/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		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;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

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

/**
Remove the inheritance of text transform in Edge and Firefox.
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'] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-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 Chrome and Safari.
*/

summary {
  display: list-item;
}

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
}

fieldset {
  margin: 0;
  padding: 0;
}

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

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * Inherit font-family and line-height from `html` so users can set them as
 * a class directly on the `html` element.
 */

body {
  font-family: inherit;
  line-height: inherit;
  margin: 0;
}

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

/*
 * Ensure horizontal rules are visible by default
 */

hr {
  border-top-width: 1px;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img {
  border-style: solid;
}

textarea {
  resize: vertical;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}

/**
 * Override legacy focus reset from Normalize with modern Firefox focus styles.
 *
 * This is actually an improvement over the new defaults in Firefox in our testing,
 * as it triggers the better focus styles even for links, which still use a dotted
 * outline in Firefox by default.
 */

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

pre,
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
 * 1. Make replaced elements `display: block` by default as that's
 *    the behavior you want almost all of the time. Inspired by
 *    CSS Remedy, with `svg` added as well.
 *
 *    https://github.com/mozdevs/cssremedy/issues/14
 *
 * 2. Add `vertical-align: middle` to align replaced elements more
 *    sensibly by default when overriding `display` by adding a
 *    utility like `inline`.
 *
 *    This can trigger a poorly considered linting error in some
 *    tools but is included by design.
 *
 *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/**
 * Constrain images and videos to the parent width and preserve
 * their intrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

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

/**
 * Ensure the default browser behavior of the `hidden` attribute.
 */

[hidden] {
  display: none;
}

*, ::before, ::after{
  --tw-border-opacity:1;
  border-color:rgba(229, 231, 235, var(--tw-border-opacity));
}

.container{
  width:100%;
}

@media (min-width: 640px){
  .container{
    max-width:640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width:768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width:1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width:1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width:1536px;
  }
}

.static{
  position:static !important;
}

.fixed{
  position:fixed !important;
}

.absolute{
  position:absolute !important;
}

.relative{
  position:relative !important;
}

.sticky{
  position:-webkit-sticky !important;
  position:sticky !important;
}

.top-0{
  top:0px !important;
}

.top-10{
  top:2.5rem !important;
}

.right-0{
  right:0px !important;
}

.bottom-0{
  bottom:0px !important;
}

.left-0{
  left:0px !important;
}

.z-0{
  z-index:0 !important;
}

.z-50{
  z-index:50 !important;
}

.mx-auto{
  margin-left:auto !important;
  margin-right:auto !important;
}

.my-2{
  margin-top:0.5rem !important;
  margin-bottom:0.5rem !important;
}

.my-3{
  margin-top:0.75rem !important;
  margin-bottom:0.75rem !important;
}

.my-4{
  margin-top:1rem !important;
  margin-bottom:1rem !important;
}

.my-5{
  margin-top:1.25rem !important;
  margin-bottom:1.25rem !important;
}

.my-6{
  margin-top:1.5rem !important;
  margin-bottom:1.5rem !important;
}

.my-8{
  margin-top:2rem !important;
  margin-bottom:2rem !important;
}

.my-12{
  margin-top:3rem !important;
  margin-bottom:3rem !important;
}

.my-24{
  margin-top:6rem !important;
  margin-bottom:6rem !important;
}

.mt-0{
  margin-top:0px !important;
}

.mt-1{
  margin-top:0.25rem !important;
}

.mt-2{
  margin-top:0.5rem !important;
}

.mt-3{
  margin-top:0.75rem !important;
}

.mt-4{
  margin-top:1rem !important;
}

.mt-6{
  margin-top:1.5rem !important;
}

.mt-8{
  margin-top:2rem !important;
}

.mt-12{
  margin-top:3rem !important;
}

.mr-1{
  margin-right:0.25rem !important;
}

.mr-2{
  margin-right:0.5rem !important;
}

.mr-3{
  margin-right:0.75rem !important;
}

.mr-4{
  margin-right:1rem !important;
}

.mr-5{
  margin-right:1.25rem !important;
}

.mb-0{
  margin-bottom:0px !important;
}

.mb-1{
  margin-bottom:0.25rem !important;
}

.mb-2{
  margin-bottom:0.5rem !important;
}

.mb-3{
  margin-bottom:0.75rem !important;
}

.mb-4{
  margin-bottom:1rem !important;
}

.mb-6{
  margin-bottom:1.5rem !important;
}

.mb-20{
  margin-bottom:5rem !important;
}

.ml-2{
  margin-left:0.5rem !important;
}

.ml-auto{
  margin-left:auto !important;
}

.block{
  display:block !important;
}

.inline-block{
  display:inline-block !important;
}

.flex{
  display:flex !important;
}

.table{
  display:table !important;
}

.hidden{
  display:none !important;
}

.h-3{
  height:0.75rem !important;
}

.h-6{
  height:1.5rem !important;
}

.h-10{
  height:2.5rem !important;
}

.h-12{
  height:3rem !important;
}

.h-24{
  height:6rem !important;
}

.h-96{
  height:24rem !important;
}

.h-full{
  height:100% !important;
}

.min-h-screen{
  min-height:100vh !important;
}

.w-3{
  width:0.75rem !important;
}

.w-5{
  width:8.25rem !important;
}

.w-6{
  width:1.5rem !important;
}

.w-10{
  width:2.5rem !important;
}

.w-12{
  width:3rem !important;
}

.w-16{
  width:4rem !important;
}

.w-24{
  width:6rem !important;
}

.w-40{
  width:10rem !important;
}

.w-48{
  width:12rem !important;
}

.w-60{
  width:15rem !important;
}

.w-auto{
  width:auto !important;
}

.w-1\/2{
  width:50% !important;
}

.w-1\/3{
  width:33.333333% !important;
}

.w-2\/3{
  width:66.666667% !important;
}

.w-1\/4{
  width:25% !important;
}

.w-2\/6{
  width:33.333333% !important;
}

.w-4\/6{
  width:66.666667% !important;
}

.w-2\/12{
  width:16.666667% !important;
}

.w-5\/12{
  width:41.666667% !important;
}

.w-7\/12{
  width:58.333333% !important;
}

.w-8\/12{
  width:66.666667% !important;
}

.w-10\/12{
  width:83.333333% !important;
}

.w-11\/12{
  width:91.666667% !important;
}

.w-full{
  width:100% !important;
}

.max-w-4xl{
  max-width:56rem !important;
}

.transform{
  --tw-translate-x:0 !important;
  --tw-translate-y:0 !important;
  --tw-rotate:0 !important;
  --tw-skew-x:0 !important;
  --tw-skew-y:0 !important;
  --tw-scale-x:1 !important;
  --tw-scale-y:1 !important;
  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

@-webkit-keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@-webkit-keyframes ping{
  75%, 100%{
    transform:scale(2);
    opacity:0;
  }
}

@keyframes ping{
  75%, 100%{
    transform:scale(2);
    opacity:0;
  }
}

@-webkit-keyframes pulse{
  50%{
    opacity:.5;
  }
}

@keyframes pulse{
  50%{
    opacity:.5;
  }
}

@-webkit-keyframes bounce{
  0%, 100%{
    transform:translateY(-25%);
    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
            animation-timing-function:cubic-bezier(0.8,0,1,1);
  }

  50%{
    transform:none;
    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
            animation-timing-function:cubic-bezier(0,0,0.2,1);
  }
}

@keyframes bounce{
  0%, 100%{
    transform:translateY(-25%);
    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
            animation-timing-function:cubic-bezier(0.8,0,1,1);
  }

  50%{
    transform:none;
    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
            animation-timing-function:cubic-bezier(0,0,0.2,1);
  }
}

.cursor-pointer{
  cursor:pointer !important;
}

.flex-col{
  flex-direction:column !important;
}

.flex-wrap{
  flex-wrap:wrap !important;
}

.items-center{
  align-items:center !important;
}

.justify-end{
  justify-content:flex-end !important;
}

.justify-center{
  justify-content:center !important;
}

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

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:0 !important;
  margin-right:calc(0.5rem * var(--tw-space-x-reverse)) !important;
  margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

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

.rounded{
  border-radius:0.25rem !important;
}

.rounded-md{
  border-radius:0.375rem !important;
}

.rounded-lg{
  border-radius:0.5rem !important;
}

.rounded-full{
  border-radius:9999px !important;
}

.rounded-t-lg{
  border-top-left-radius:0.5rem !important;
  border-top-right-radius:0.5rem !important;
}

.border{
  border-width:1px !important;
}

.border-t{
  border-top-width:1px !important;
}

.border-b{
  border-bottom-width:0px !important;
}

.border-dashed{
  border-style:dashed !important;
}

.border-black{
  --tw-border-opacity:1 !important;
  border-color:rgba(0, 0, 0, var(--tw-border-opacity)) !important;
}

.border-gray-100{
  --tw-border-opacity:1 !important;
  border-color:rgba(243, 244, 246, var(--tw-border-opacity)) !important;
}

.border-gray-300{
  --tw-border-opacity:1 !important;
  border-color:rgba(209, 213, 219, var(--tw-border-opacity)) !important;
}

.border-gray-600{
  --tw-border-opacity:1 !important;
  border-color:rgba(75, 85, 99, var(--tw-border-opacity)) !important;
}

.border-red-400{
  --tw-border-opacity:1 !important;
  border-color:rgba(248, 113, 113, var(--tw-border-opacity)) !important;
}

.bg-black{
  --tw-bg-opacity:1 !important;
  background-color:rgba(0, 0, 0, var(--tw-bg-opacity)) !important;
}

.bg-white{
  --tw-bg-opacity:1 !important;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}

.bg-gray-100{
  --tw-bg-opacity:1 !important;
  background-color:rgba(243, 244, 246, var(--tw-bg-opacity)) !important;
}

.bg-gray-400{
  --tw-bg-opacity:1 !important;
  background-color:rgba(156, 163, 175, var(--tw-bg-opacity)) !important;
}

.bg-red-400{
  --tw-bg-opacity:1 !important;
  background-color:rgba(248, 113, 113, var(--tw-bg-opacity)) !important;
}

.bg-themeBlue{
  --tw-bg-opacity:1 !important;
  background-color:rgba(136, 164, 132, var(--tw-bg-opacity)) !important;
    background-image: url(https://2025.monomachi.com//assets/img/bg_box.jpg);
}

.bg-themeBlueLight{
  --tw-bg-opacity:1 !important;
  background-color:rgba(136, 164, 132, var(--tw-bg-opacity)) !important;
}

.object-contain{
  -o-object-fit:contain !important;
     object-fit:contain !important;
}

.object-cover{
  -o-object-fit:cover !important;
     object-fit:cover !important;
}

.object-top{
  -o-object-position:top !important;
     object-position:top !important;
}

.p-1{
  padding:0.25rem !important;
}

.p-2{
  padding:0.5rem !important;
}

.p-6{
  padding:1.5rem !important;
}

.px-2{
  padding-left:0.5rem !important;
  padding-right:0.5rem !important;
}

.px-3{
  padding-left:0.75rem !important;
  padding-right:0.75rem !important;
}

.px-4{
  padding-left:1rem !important;
  padding-right:1rem !important;
}

.px-5{
  padding-left:1.25rem !important;
  padding-right:1.25rem !important;
}

.px-12{
  padding-left:3rem !important;
  padding-right:3rem !important;
}

.py-1{
  padding-top:0.25rem !important;
  padding-bottom:0.25rem !important;
}

.py-2{
  padding-top:0.5rem !important;
  padding-bottom:0.5rem !important;
}

.py-3{
  padding-top:0.7rem !important;
  padding-bottom:0.7rem !important;
}

.py-3menu{
  padding-top:0.35rem !important;
  padding-bottom:0.35rem !important;
}

.py-4{
  padding-top:1rem !important;
  padding-bottom:1rem !important;
}

.pt-1{
  padding-top:0.25rem !important;
}

.pt-4{
  padding-top:1rem !important;
}

.pt-8{
  padding-top:2rem !important;
}

.pt-10{
  padding-top:2.5rem !important;
}

.pt-12{
  padding-top:3rem !important;
}

.pr-1{
  padding-right:0.25rem !important;
}

.pr-2{
  padding-right:0.5rem !important;
}

.pb-0{
  padding-bottom:0px !important;
}

.pb-12{
  padding-bottom:3rem !important;
}

.pl-0{
  padding-left:0px !important;
}

.pl-1{
  padding-left:0.25rem !important;
}

.pl-2{
  padding-left:0.5rem !important;
}

.text-left{
  text-align:left !important;
}

.text-center{
  text-align:center !important;
}

.text-xs{
  font-size:0.75rem !important;
  line-height:1rem !important;
}

.text-sm{
  font-size:0.875rem !important;
  line-height:1.25rem !important;
}

.text-base{
  font-size:1rem !important;
  line-height:1.5rem !important;
}

.text-lg{
  font-size:1.125rem !important;
  line-height:1.75rem !important;
}

.text-xl{
  font-size:1.05rem !important;
  line-height:1.5rem !important;
}

.text-2xl{
  font-size:1.5rem !important;
  line-height:2rem !important;
}

.font-semibold{
  font-weight:600 !important;
}

.font-bold{
  font-weight:700 !important;
}

.leading-7{
  line-height:1.75rem !important;
}

.leading-relaxed{
  line-height:1.625 !important;
}

.leading-loose{
  line-height:2 !important;
}

.text-black{
  --tw-text-opacity:1 !important;
  color:rgba(0, 0, 0, var(--tw-text-opacity)) !important;
}

.text-white{
  --tw-text-opacity:1 !important;
  color:rgba(255, 255, 255, var(--tw-text-opacity)) !important;
}

.text-gray-400{
  --tw-text-opacity:1 !important;
  color:rgba(156, 163, 175, var(--tw-text-opacity)) !important;
}

.text-gray-600{
  --tw-text-opacity:1 !important;
  color:rgba(75, 85, 99, var(--tw-text-opacity)) !important;
}

.text-gray-700{
  --tw-text-opacity:1 !important;
  color:rgba(55, 65, 81, var(--tw-text-opacity)) !important;
}

.text-gray-800{
  --tw-text-opacity:1 !important;
  color:rgba(31, 41, 55, var(--tw-text-opacity)) !important;
}

.text-red-400{
  --tw-text-opacity:1 !important;
  color:rgba(248, 113, 113, var(--tw-text-opacity)) !important;
}

.text-red-600{
  --tw-text-opacity:1 !important;
  color:rgba(220, 38, 38, var(--tw-text-opacity)) !important;
}

.text-green-500{
  --tw-text-opacity:1 !important;
  color:rgba(16, 185, 129, var(--tw-text-opacity)) !important;
}

.text-blue-600{
  --tw-text-opacity:1 !important;
  color:rgba(37, 99, 235, var(--tw-text-opacity)) !important;
}

.hover\:text-gray-800:hover{
  --tw-text-opacity:1 !important;
  color:rgba(31, 41, 55, var(--tw-text-opacity)) !important;
}

.hover\:underline:hover{
  text-decoration:underline !important;
}

.opacity-75{
  opacity:0.75 !important;
}

.hover\:opacity-100:hover{
  opacity:1 !important;
}

*, ::before, ::after{
  --tw-shadow:0 0 #0000;
}

.shadow{
  --tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

*, ::before, ::after{
  --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
}

.filter{
  --tw-blur:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-brightness:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-contrast:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-grayscale:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-invert:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-saturate:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-sepia:var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/) !important;
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.transition{
  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important;
  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration:150ms !important;
}

@media (min-width: 640px){
  .sm\:mx-1{
    margin-left:0.25rem !important;
    margin-right:0.25rem !important;
  }

  .sm\:hidden{
    display:none !important;
  }

  .sm\:w-32{
    width:8rem !important;
  }

  .sm\:w-10\/12{
    width:83.333333% !important;
  }

  .sm\:items-center{
    align-items:center !important;
  }

  .sm\:rounded-lg{
    border-radius:0.5rem !important;
  }

  .sm\:px-6{
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
  }

  .sm\:pt-0{
    padding-top:0px !important;
  }
}

@media (min-width: 768px){
  .md\:mx-4{
    margin-left:1rem !important;
    margin-right:1rem !important;
  }
}

@media (min-width: 1024px){
  .lg\:block{
    display:block !important;
  }

  .lg\:flex{
    display:flex !important;
  }

  .lg\:hidden{
    display:none !important;
  }

  .lg\:px-8{
    padding-left:2rem !important;
    padding-right:2rem !important;
  }
}

@media (min-width: 1280px){
}

@media (min-width: 1536px){
}

@media (max-width: 767px){
  .sp\:mr-0{
    margin-right:0px !important;
  }

  .sp\:mr-2{
    margin-right:0.5rem !important;
  }

  .sp\:mb-1{
    margin-bottom:0.25rem !important;
  }

  .sp\:mb-4{
    margin-bottom:1rem !important;
  }

  .sp\:hidden{
    display:none !important;
  }

  .sp\:h-auto{
    height:auto !important;
  }

  .sp\:w-1\/2{
    width:50% !important;
  }

  .sp\:w-1\/6{
    width:16.666667% !important;
  }

  .sp\:w-5\/6{
    width:83.333333% !important;
  }

  .sp\:w-11\/12{
    width:91.666667% !important;
  }

  .sp\:w-full{
    width:100% !important;
  }

  .sp\:flex-col{
    flex-direction:column !important;
  }

  .sp\:items-start{
    align-items:flex-start !important;
  }

  .sp\:items-end{
    align-items:flex-end !important;
  }

  .sp\:px-6{
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
  }

  .sp\:pt-1{
    padding-top:0.25rem !important;
  }

  .sp\:pt-12{
    padding-top:3rem !important;
  }

  .sp\:pb-24{
    padding-bottom:6rem !important;
  }

  .sp\:text-xs{
    font-size:0.75rem !important;
    line-height:1rem !important;
  }

  .sp\:text-sm{
    font-size:0.875rem !important;
    line-height:1.25rem !important;
  }

  .sp\:text-base{
    font-size:1rem !important;
    line-height:1.5rem !important;
  }
}

body{
  font-size:16px;
  min-height:100%;
  width:100%;
  position:relative
}

body.common,body.page-about{
  background-color:#cce6e4
}

body.page-map-flyer{
  background-color:#8e7952
}

body.page-event-workshop{
  background-color:#e96b22
}

body.page-food-info,body.page-shop-detail,body.page-shop-info{
  background-color:#489494
}

.bg.all{
  background-color:#9b9a93
}

.bg.east{
  background-color:#58673c
}

.bg.center{
  background-color:#344e65
}

.bg.west{
  background-color:#7e3a51
}

.bg.\0032k540{
  background-color:#aa773e
}

ul{
  padding:0
}

ul li{
  list-style:none
}

a,a:hover{
  color:inherit
}

a:hover{
  text-decoration:none;
      transition: 0.5s ;
	opacity: 0.7 ;
}

header.front_header{
  height:650px;
  background-color:#fff
}

header.front_header .header_top{
  height:88px;
  padding:1rem 0
}

header.front_header .header_top .link_area{
  padding-top:1rem
}

header.front_header .header_top .link_area a{
  margin-left:.5em
}

header.front_header .header_top .link_area a.official{
  font-size:15.2px;
  font-weight:700;
  vertical-align:super
}

header.front_header .header_top .link_area a.official i{
  vertical-align:bottom;
  margin-right:.2em;
  position:relative;
  top:-3px
}

header.front_header .header_top .link_area a i{
  font-size:30px
}

header.front_header .main_img{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:562px
}

header.front_header .main_img2{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
}

header.front_header .main_img img{
  width:900px
}
@media screen and (max-width: 900px){
header.front_header .main_img img{
  width:750px
}
}

@media screen and (max-width: 700px){
header.front_header .main_img img{
  width:450px
}
}

@media screen and (max-width: 575px){
header.front_header .main_img img{
  width:300px
}
}

img.category_icon{
  border-radius:50%;
  width:1.2rem;
  position:relative;
  top:-1px;
  margin-right:.25rem
}

.breadcrumb{
  background:none;
  padding:.5rem 0 0
}

.breadcrumb span{
  font-size:15.36px;
  margin:0 .25em;
  position:relative;
  top:.05em
}

nav{
  background:#5a5a5a;
  height:105px
}

nav .container,nav .row,nav ul{
  height:100%
}

nav ul{
  width:100%
}

nav ul li{
  height:100%;
  text-align:center;
  flex-grow:1;
  padding-top:28px;
  display:inline-block
}

nav ul li:hover{
  opacity:.6
}

nav ul li a{
  display:block;
  width:100%;
  height:100%
}

nav ul li .menu_icon{
  display:inline-block;
  width:54px;
  height:33px;
  background-size:contain;
  vertical-align:top;
  background-repeat:no-repeat;
  margin-top:4px
}

nav ul li.map .menu_icon{
  width:70px
}

nav ul li.event .menu_icon{
  width:14px
}

nav ul li.shop .menu_icon{
  width:48px
}

nav ul li .menu_text{
  display:inline-block;
  text-align:left;
  color:#fefefe
}

nav ul li .menu_text p{
  padding-left:.8rem
}

nav ul li .menu_text p.ja{
  font-size:20px;
  font-weight:700;
  margin-bottom:0
}

nav ul li .menu_text p.en{
  display:block;
  font-size:12.8px;
  margin-bottom:0
}

nav ul li.main .menu_icon{
  background-image:url(img/logoicon_main.png)
}

nav ul li.map .menu_icon{
  background-image:url(img/logoicon_bisque.png)
}

nav ul li.event .menu_icon{
  background-image:url(img/logoicon_orangered.png)
}

nav ul li.shop .menu_icon{
  background-image:url(img/logoicon_blue.png)
}

nav ul li.home .menu_icon{
  background-image:url(img/logoicon_gray.png)
}

.sp_btn{
  position:fixed;
  top:23px;
  right:1rem;
  width:30px;
  height:20px;
  z-index:9999
}

.sp_btn .line{
  display:block;
  background-color:#fff;
  height:2px;
  width:100%;
  position:absolute;
  transition:all .5s
}

.sp_btn .line.ln_1{
  top:0
}

.sp_btn .line.ln_1.on{
  transform:rotate(135deg);
  top:9px
}

.sp_btn .line.ln_2{
  top:9px;
  border:0 solid rgba(165,128,26,0)
}

.sp_btn .line.ln_2.on{
  height:30px;
  /*border:2px solid #cce6e4;*/
  top:-5px;
  background-color:hsla(0,0%,100%,0)
}

.sp_btn .line.ln_3{
  bottom:0
}

.sp_btn .line.ln_3.on{
  transform:rotate(-135deg);
  bottom:9px
}

.main_copy{
  position:absolute;
  left:0;
  width:14%;
  padding:3rem 0 0
}

.content_wrapp{
  background-color:#f8f8f8;
  padding:0
}

.content_inner{
  padding:0 10%
}

.content_inner.page{
  min-height:80vh
}

.introduce .photo{
  overflow:hidden;
  height:220px;
  display:block
}

.introduce .photo .photo_img{
  width:211%;
  position:relative;
  height:100%;
  background-repeat:repeat-x;
  background-size:contain
}

.introduce .photo.top .photo_img{
  background-image:url(img/intro_top.jpg);
  -webkit-animation:move_top 120s linear infinite;
          animation:move_top 120s linear infinite
}

.introduce .photo.bottom .photo_img{
  background-image:url(img/intro_bottom.jpg);
  -webkit-animation:move_bottom 120s linear infinite;
          animation:move_bottom 120s linear infinite
}

@-webkit-keyframes move_top{
  0%{
    transform:translateX(0)
  }

  to{
    transform:translateX(-50%)
  }
}

@keyframes move_top{
  0%{
    transform:translateX(0)
  }

  to{
    transform:translateX(-50%)
  }
}

@-webkit-keyframes move_bottom{
  0%{
    transform:translateX(-50%)
  }

  to{
    transform:translateX(0)
  }
}

@keyframes move_bottom{
  0%{
    transform:translateX(-50%)
  }

  to{
    transform:translateX(0)
  }
}

.introduce .message{
  padding:3rem 0 2.25rem;
  font-family:"heisei-kaku-gothic-std";
  font-weight:700;
  font-feature-settings:"halt" 1;
  text-align:justify
}

.introduce .message h2{
  font-weight:700;
  font-size:25.6px;
  margin-bottom:1.25em
}

.introduce .message p{
  font-size:19.2px;
  line-height:1.8em
}

.search_shop{
  padding:2rem 0
}

.search_shop h2{
  font-size:25.6px
}

.search_shop h2 i{
  font-size:46.08px;
  position:relative;
  top:8px;
  margin-right:.7rem
}

.search_shop .category{
  width:100%;
  padding:1rem 0 0;
  margin-top:1.8rem;
  border-top:2px solid #e0e0e0;
  border-bottom:2px solid #e0e0e0;
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap
}

.search_shop .category a{
  font-size:12.8px;
  margin-bottom:1em;
  width:20%
}

.news{
  width:100%
}

.news .news_title{
  position:relative;
  margin-bottom:2.5rem
}

.news .news_title .news_title_ja{
  position:relative;
  float:left;
  border-bottom:2px solid #aad7d7;
  margin-right:1.5rem;
  z-index:10
}

.news .news_title .news_title_ja h2{
  font-size:25.6px;
  font-weight:700
}

.news .news_title .news_title_en{
  position:relative;
  top:18px;
  z-index:0;
  border-bottom:2px solid #e0e0e0
}

.news .news_title .news_title_en h2{
  font-size:14px;
  font-weight:400
}

.news .news_list .new_list_row{
  border-bottom:1px dotted #e0e0e0;
  padding:.5rem 0;
  margin-bottom:.5rem
}

.news .news_list .new_list_row p.news_lead{
  font-size:18px;
  font-weight:700;
  margin-bottom:.25rem
}

.news .news_list .new_list_row p.date{
  font-size:15px;
  font-weight:400;
  color:#989898
}

.news a.news_all{
  font-size:15px;
  color:#989898
}

.site-footer{
  padding:2rem 0;
  background-color:#5a5a5a;
  color:#e0e0e0
}

.site-footer a{
  margin:0 1em
}

.site-footer a,.site-footer p{
  font-size:12.16px
}

.bg_pattern_area{
  position:absolute;
  height:100%;
  width:100%;
  overflow:hidden
}

.bg_pattern_area .bg_pattern{
  background-image:url(img/bg_pattern.png);
  display:block;
  background-size:cover;
  width:450px;
  height:500px;
  position:absolute;
  z-index:-1;
  transform:rotateY(0deg);
  transition:all 1s
}

.bg_pattern_area .bg_pattern.rotate{
  transform:rotateY(180deg)
}

.page-shop-detail p.Brand-link,.page-shop-info p.Brand-link{
  font-size:19.2px;
  font-weight:700
}

.page-shop-detail p.info_title,.page-shop-info p.info_title{
  font-weight:700;
  font-size:12.8px;
  color:#cce6e4;
  border-bottom:1px solid #cce6e4;
  padding-bottom:.25em;
  display:inline
}

.page-shop-detail p.info_title+div,.page-shop-info p.info_title+div{
  margin-top:.5rem
}

.page-shop-detail p.store_add,.page-shop-info p.store_add{
  font-size:12.8px
}

.page-shop-detail p.store_add span.id,.page-shop-info p.store_add span.id{
  color:#fff;
  background-color:#9b9a94;
  padding:.25em .5em;
  border-radius:.25em;
  font-size:12.8px;
  margin-right:.8em
}

.page-shop-detail .openclose,.page-shop-info .openclose{
  width:100%
}

.page-shop-detail .openclose span.day,.page-shop-info .openclose span.day{
  font-size:19.2px;
  font-weight:700;
  margin-right:.25em
}

.page-shop-detail .openclose p.week,.page-shop-info .openclose p.week{
  margin-bottom:.5rem;
  width:30%
}

.page-shop-detail .openclose span.week,.page-shop-info .openclose span.week{
  font-weight:700
}

.page-shop-detail .openclose span.week.fri,.page-shop-info .openclose span.week.fri{
  color:#909090
}

.page-shop-detail .openclose span.week.sat,.page-shop-info .openclose span.week.sat{
  color:#039eb1
}

.page-shop-detail .openclose span.week.sun,.page-shop-info .openclose span.week.sun{
  color:#e82929
}

.page-shop-detail .openclose span.week:after,.page-shop-info .openclose span.week:after{
  content:"\A";
  white-space:pre
}

.page-shop-detail .openclose span.hour,.page-shop-info .openclose span.hour{
  font-size:14.4px
}

.page-shop-detail .memo,.page-shop-info .memo{
  background-color:rgba(165,128,26,.1);
  padding:.5em;
  width:100%
}

.page-shop-detail .memo p,.page-shop-info .memo p{
  font-size:13.6px
}

.page_title{
  display:flex;
  justify-content:center;
  flex-direction:column;
  width:100%;
  text-align:center
}

.page_title .menu_icon{
  display:block;
  margin:0 auto;
  width:30px;
  height:30px;
  background-size:contain
}

.page_title.main .menu_icon{
  background-image:url(img/logoicon_main.png)
}

.page_title.main .en{
  color:#cce6e4
}

.page_title.main .title_text{
  border-bottom:1px solid #cce6e4
}

.page_title.map .menu_icon{
  background-image:url(img/img/logoicon_bisque.png)
}

.page_title.map .en{
  color:#8e7952
}

.page_title.map .title_text{
  border-bottom:1px solid #8e7952
}

.page_title.event .menu_icon{
  background-image:url(img/logoicon_orangered.png)
}

.page_title.event .en{
  color:#e96b22
}

.page_title.event .title_text{
  border-bottom:1px solid #e96b22
}

.page_title.shop .menu_icon{
  background-image:url(img/logoicon_blue.png)
}

.page_title.shop .en{
  color:#489494
}

.page_title.shop .title_text{
  border-bottom:1px solid #489494
}

.page_title.home .menu_icon{
  background-image:url(img/logoicon_gray.png)
}

.page_title.home .en{
  color:#9b9a94
}

.page_title h1{
  margin-bottom:.8em
}

.page_title h1 .ja{
  font-size:24px;
  font-family:"kan412typos-std";
  font-weight:700;
  margin-bottom:0
}

.page_title h1 .en{
  display:block;
  font-size:12.8px;
  margin-bottom:0
}

.main_content{
  width:100%;
  margin-top:2rem;
  padding-bottom:5rem
}

.category_link{
  position:sticky;
  position:-webkit-sticky;
  width:100%;
  top:0;
  z-index:10;
  padding:.5em 0;
  background-color:hsla(0,0%,100%,.9);
  box-shadow:0 3px 3px rgba(0,0,0,.1)
}

.category_link .nav_wrap{
  height:3rem
}

.category_link ul{
  display:flex;
  justify-content:center
}

.category_link ul li{
  text-align:center;
  font-size:12.8px
}

.category_link ul li a{
  padding-bottom:.25em;
  transition:all .5s
}

.category_link ul li a.active{
  transform:scale(1.2);
  border-bottom:2px solid #489494
}

.page-shop-info .area_fliter button{
  min-width:15%;
  margin:0 .5rem;
  color:#fff;
  font-size:12.8px
}

.page-shop-info .item_group{
  position:relative;
  margin-bottom:1rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap
}

.page-shop-info .category_title{
  margin-top:-5rem;
  padding-top:10.5rem;
  margin-bottom:1rem
}

.page-shop-info .category_title:first-child{
  padding-top:5rem
}

.page-shop-info .category_title h2{
  font-size:19.2px;
  font-weight:700
}

.page-shop-info .category_title h2 img.category_icon{
  width:3rem;
  top:-5px;
  margin-right:.5em
}

.page-shop-info .item{
  position:relative;
  width:49%;
  height:auto;
  display:none;
  opacity:0;
  margin:1rem 0;
  box-shadow:0 0 5px rgba(0,0,0,.3)
}

.page-shop-info .item a.detail_link{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-indent:-999px;
  z-index:2
}

.page-shop-info .item:hover{
  cursor:pointer
}

.page-shop-info .item:hover:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  background:hsla(0,0%,100%,.4);
  z-index:1
}

.page-shop-info .item.east{
  border-top:10px solid #58673c
}

.page-shop-info .item.center{
  border-top:10px solid #344e65
}

.page-shop-info .item.west{
  border-top:10px solid #7e3a51
}

.page-shop-info .item.\0032k540{
  border-top:10px solid #aa773e
}

.page-shop-info .item.pick_item{
  display:block;
  opacity:1
}

.page-shop-info .item .shop_img{
  height:200px
}

.page-shop-info .item .shop_img img{
  height:100%;
  width:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.page-shop-info .item .shop_list_infomation{
  padding:1rem
}

.page-shop-info .item .shop_list_infomation .profile{
  min-height:10em
}

.page-shop-info .item .shop_list_infomation .profile div{
  font-size:13.6px
}

.page-shop-info .item .shop_list_infomation .memo{
  min-height:10em
}

.page-shop-detail .main_content .shop_name{
  font-size:20.48px;
  font-family:"heisei-kaku-gothic-std";
  font-weight:700;
  width:100%
}

.page-shop-detail .main_content .shop_name .category_icon{
  width:3rem
}

.page-shop-detail .main_content .shop_name .Brand-link{
  margin:0 0 1rem
}

.page-shop-detail .main_content .shop_name .Brand-link img{
  position:relative
}

.page-shop-detail .main_content .shop_name .Brand-link span.kana{
  font-size:15.36px;
  font-weight:400;
  color:rgba(0,0,0,.5);
  display:block;
  margin-top:-.75em
}

.page-shop-detail .main_content .shop_name .Brand-link span.kana:before{
  content:"\A";
  white-space:pre
}

.page-shop-detail .main_content .shop_name .shop_id{
  width:20%;
  text-align:right
}

.page-shop-detail .main_content .shop_name .shop_id .id{
  color:#fff;
  background-color:#9b9a94;
  padding:.25em .5em;
  border-radius:.25em;
  font-size:16px;
  width:100%;
  margin-right:.25em
}

.page-shop-detail .main_content .detail_text{
  margin:0 0 1.5rem;
  line-height:1.8em
}

.page-shop-detail .main_content .openclose .day{
  font-size:25.6px
}

.page-shop-detail .main_content .openclose .hour{
  font-size:19.2px;
  font-weight:700
}

.page-shop-detail .main_content .openclose .week{
  margin-bottom:1em;
  width:100%
}

.page-shop-detail .main_content .infomation{
  margin:1rem 0
}

.page-shop-detail .main_content .infomation p{
  font-size:16px;
  margin-bottom:.5em
}

.page-shop-detail .main_content .memo{
  margin-top:1rem
}

.page-shop-detail .main_content .map{
  width:100%
}

.pagetop{
  opacity:.8;
  position:fixed;
  bottom:0;
  right:0;
  background:#cce6e4;
  color:#fff;
  z-index:2;
  text-align:center;
  padding:.5em;
  width:100px;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center
}

.pagetop a{
  position:absolute;
  width:100%;
  height:100%;
  top:5px;
  left:0
}

.pagetop p{
  font-size:12.8px;
  margin-bottom:0
}

.pagetop i{
  font-size:30px
}

.pagetop i:after{
  content:"\A";
  white-space:pre
}

.footerlogo img{
  mix-blend-mode:multiply
}

@-webkit-keyframes fade-in{
  0%{
    display:none;
    opacity:0
  }

  1%{
    display:block;
    opacity:0
  }

  to{
    display:block;
    opacity:1
  }
}

@keyframes fade-in{
  0%{
    display:none;
    opacity:0
  }

  1%{
    display:block;
    opacity:0
  }

  to{
    display:block;
    opacity:1
  }
}

@media(max-width:1023px){
  nav.sub{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:100%;
    z-index:999;
    padding-top:88px;
    background-color:#5a5a5a;
    transition:all .5s
  }

  nav.sub.on{
    left:0
  }

  nav.sub ul{
    height:inherit;
    flex-direction:column
  }

  nav.sub ul li{
    height:5rem;
    text-align:left
  }

  nav.sub ul li.official{
    font-weight:700
  }

  nav.sub .link_area i{
    font-size:36px
  }
}

@media(max-width:576px){
  .header_sub .brand{
    position:fixed;
    width:100%;
    height:auto;
    background-color:#fff;
    z-index:100;
    padding:.5rem 1rem;
    text-align:center
  }

  .header_sub .brand img{
    width:7%
  }

  header.front_header{
    height:430px;
    background-color:#fff
  }

  header.front_header .header_top{
    position:fixed;
    z-index:9999
  }

  header.front_header .main_img{
    padding-top:148px;
    height:342px
  }



  .introduce .photo{
    height:90px
  }

  .category_link{
    position:fixed;
    top:42px;
    padding:0;
    z-index:3
  }

  .category_link .nav_wrap{
    height:0;
    overflow:hidden;
    transition:all 1s
  }

  .category_link .nav_wrap.show{
    height:22em
  }

  .category_link ul{
    flex-direction:column
  }

  .category_link ul li{
    text-align:left;
    margin-bottom:.5em
  }

  .category_link ul li a.active{
    transform:scale(1)
  }

  .category_link .area_fliter{
    width:100%;
    padding:1em 1em 0
  }

  .category_link .area_fliter button{
    display:block;
    margin-bottom:1rem;
    height:3rem;
    text-align:left
  }

  .category_link .area_fliter .area_button_wrap{
    flex-direction:column;
    height:0;
    overflow:hidden;
    transition:all .5s
  }

  .category_link .area_fliter .area_button_wrap button{
    cursor:pointer
  }

  .category_link .area_fliter .area_button_wrap.show{
    height:20em
  }

  .category_link .area_fliter .sp_area .container{
    padding:0
  }

  .category_link .area_fliter .sp_area .current{
    width:100%
  }

  .category_link .area_fliter .sp_area .current .area_color{
    display:block;
    width:1.5rem;
    height:1.5rem;
    margin-right:.25em;
    border-radius:50%;
    position:relative;
    left:-5px;
    float:left
  }

  .category_link .area_fliter .sp_area .expand_area i.show{
    transform:rotate(180deg)
  }

  .category_link .sp_category{
    width:100%;
    padding:.5em 0
  }

  .category_link .sp_category .expand.show{
    transform:rotate(180deg)
  }

  .category_link .sp_category .current_disp{
    width:100%
  }

  .category_link .sp_category .current_disp p{
    margin-bottom:0
  }

  .category_link .sp_category .current_disp img{
    float:left;
    position:relative;
    top:2px
  }

  .page-shop-info .page_title{
    margin-top:110px
  }

  .page-shop-info .item,.page-shop-info a.detail_link{
    width:100%
  }

  .page-shop-info .item .shop_list_infomation .memo,.page-shop-info .item .shop_list_infomation .profile{
    min-height:auto
  }

  .page-shop-detail .page_title{
    margin-top:2rem
  }

  .page-shop-detail .main_content .shop_name{
    flex-direction:column-reverse
  }

  .page-shop-detail .main_content .shop_name .shop_id{
    width:100%;
    text-align:left;
    margin-bottom:1rem
  }

  .page-shop-detail .main_content .shop_name .Brand-link{
    flex-direction:column;
    font-size:19.2px
  }

  .page-shop-detail .main_content .shop_name .Brand-link .category_icon{
    width:1.5rem;
    float:left;
    top:0
  }

  .page-shop-detail .main_content .shop_name .Brand-link .category_name{
    font-size:12.8px;
    position:relative;
    top:5px;
    margin-bottom:1.5em
  }

  .page-shop-detail .main_content .openclose div{
    flex-direction:column;
    position:relative
  }

  .page-shop-detail .main_content .openclose div span.week{
    margin-right:1rem
  }

  .page-shop-detail .main_content .openclose div span.week:after{
    content:none
  }

  .page-shop-detail .main_content .openclose div .hour{
    font-size:25.6px;
    position:absolute;
    left:5rem
  }

  .page-shop-detail .main_content .store_add span.id{
    line-height:4em;
    margin-bottom:.5em
  }

  .page-shop-detail .main_content .store_add span.id:after{
    content:"\A";
    white-space:pre
  }

  .search_shop h2{
    font-size:20.48px
  }

  .search_shop .category a{
    width:50%
  }

  .footer_link{
    flex-direction:column
  }

  .footer_link a{
    margin-bottom:1rem
  }

  .load{
    position:fixed;
    display:none;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:hsla(0,0%,100%,.6);
    z-index:99999
  }

  .loader{
    width:100px;
    height:100px;
    border-radius:100%;
    position:absolute;
    margin:0 auto;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
  }

  #loader-1:after,#loader-1:before{
    content:"";
    position:absolute;
    top:-10px;
    left:-10px;
    width:100%;
    height:100%;
    border-radius:100%;
    border:10px solid transparent;
    border-top-color:#3498db
  }

  #loader-1:before{
    z-index:100;
    -webkit-animation:spin 1s infinite;
            animation:spin 1s infinite
  }

  #loader-1:after{
    border:10px solid #ccc
  }

  @-webkit-keyframes spin{
    0%{
      transform:rotate(0deg)
    }

    to{
      transform:rotate(1turn)
    }
  }

  @keyframes spin{
    0%{
      transform:rotate(0deg)
    }

    to{
      transform:rotate(1turn)
    }
  }
}

.fade-enter-active,.fade-leave-active{
  transition:opacity 1s
}

.fade-enter,.fade-leave-to{
  opacity:0
}

.unicon {
  display: inline-block;
}
.unicon svg {
  transition: 0.2s all;
}
.uim-primary {
  opacity: 1;
}
.uim-secondary {
  opacity: 0.7;
}
.uim-tertiary {
  opacity: 0.5;
}
.uim-quaternary {
  opacity: 0.25;
}
.uim-quinary {
  opacity: 0;
}


img.sample {
   vertical-align: middle;
}


.container2 {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
}

@media (min-width: 1200px) {
  .column {
    width: 50%;
  }
}

.box{
  float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.socialbottun{
  overflow: hidden;
	
}


.box-sponsor {
    padding: 0.5em 1em;
    margin: 2em;
    border: double 5px red;
    color:red;
   
}

.box-sponsor2 {
    padding: 0.5em 1em;
    border: double 5px red;
    color:red;
   
}


.box-sponsor p {
    margin: 0; 
    padding: 1;
}


/*========▼▼PC,SP改行▼▼========*/


@media screen and (min-width: 650px){
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){
  .br-pc { display:none; }
  .br-sp { display:block; }
}


/*========▼▼PC,SP画像表示▼▼========*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc990 { display: block !important; }
.sp990 { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 991px) {
.pc990 { display: none !important; }
.sp990 { display: block !important; }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc700 { display: block !important; }
.sp700 { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 701px) {
.pc700 { display: none !important; }
.sp700 { display: block !important; }
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc575 { display: block !important; }
.sp575 { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される  */
@media only screen and (max-width: 576px) {
.pc575 { display: none !important; }
.sp575 { display: block !important; }
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#eee;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:300px;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #333;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}



.video {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}