@import '//fonts.googleapis.com/css?family=Montserrat:500,600';
@charset 'utf-8';
/* Silk: ver.202309250000 */
/*! normalize.css v8.0.0 | 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
   ========================================================================== */
/**
 * 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;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  word-break: break-all;
}
html {
  font-size: 62.5%;
  color: #222222;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: grayscale;
  line-height: 1.6;
}
body {
  margin: 0;
  font-size: 1.6rem;
  background-color: #ffffff;
  position: relative;
}
img {
  max-width: 100%;
  height: auto;
}
input[type="text"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.c-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
@media only screen and (min-width: 769px) {
  .c-icon {
    width: 20px;
    height: 20px;
  }
}
.c-container {
  max-width: 1230px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 769px) {
  .c-container.c-container--flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.c-overlay-checkbox {
  display: none;
}
.c-overlay {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
  opacity: 0;
}
.c-section {
  margin-top: 40px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 769px) {
  .c-section {
    margin-top: 70px;
    margin-bottom: 70px;
    position: relative;
  }
}
.c-section:first-child {
  margin-top: 0;
}
.c-section.c-section--bg {
  background-color: #f6f6f6;
  padding: 30px 15px;
  padding-bottom: 30px;
  margin-right: -15px;
  margin-left: -15px;
}
@media only screen and (min-width: 769px) {
  .c-section.c-section--bg {
    background-color: transparent;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
  }
}
.c-section__heading {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.8em;
  font-family: 'Montserrat', sans-serif;
}
@media only screen and (min-width: 769px) {
  .c-section__heading {
    font-size: 3.2rem;
    font-weight: normal;
  }
}
@media only screen and (min-width: 769px) {
  .c-section__heading.c-section__heading--is-top {
    margin-right: 90px;
  }
}
.c-section__heading:first-child {
  margin-top: 0;
}
.c-section__category-heading {
  position: relative;
  text-align: center;
  font-size: 1.6rem;
  margin-top: 40px;
  margin-bottom: 40px;
}
.c-section__category-heading::before {
  content: '';
  display: block;
  background-color: #f6f6f6;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 50%;
  margin-top: 1px;
}
.c-section__category-heading span {
  background-color: #ffffff;
  padding-right: 1em;
  padding-left: 1em;
  position: relative;
}
.c-section__more {
  font-size: 1.2rem;
  margin: 30px 0 0;
  text-align: right;
}
@media only screen and (min-width: 769px) {
  .c-section__more {
    position: absolute;
    margin-top: 1.5rem;
    top: 0;
    right: 0;
  }
}
.c-section__more.c-section__more--static {
  position: static;
  margin-top: 10px;
  margin-bottom: 30px;
}
.c-section__more a {
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.c-section__more svg {
  width: 0.9em;
  height: 0.9em;
}
.c-chapter {
  margin-top: 40px;
}
@media only screen and (min-width: 769px) {
  .c-chapter {
    margin-top: 50px;
  }
}
.c-chapter__heading {
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-family: 'Montserrat', sans-serif;
}
@media only screen and (min-width: 769px) {
  .c-chapter__heading {
    font-size: 2.4rem;
  }
}
.c-chapter__heading img {
  vertical-align: 0.15em;
  margin-right: 0.2em;
}
.c-chapter__heading a {
  color: #8dc5c6;
  text-decoration: none;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .c-chapter__heading a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #8dc5c6;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  .c-chapter__heading a:hover::after {
    width: 100%;
  }
}
.c-chapter__heading.c-chapter__heading--calendar {
  text-align: center;
  position: relative;
}
.c-chapter__heading.c-chapter__heading--calendar a {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -0.5em;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
}
@media only screen and (min-width: 769px) {
  .c-chapter__heading.c-chapter__heading--calendar a {
    top: -0.05em;
  }
}
.c-chapter__heading.c-chapter__heading--calendar a:first-child {
  left: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22%23444%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1203%20544q0%2013-10%2023l-393%20393%20393%20393q10%2010%2010%2023t-10%2023l-50%2050q-10%2010-23%2010t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10%2023-10t23%2010l50%2050q10%2010%2010%2023z%22%2F%3E%3C%2Fsvg%3E');
}
.c-chapter__heading.c-chapter__heading--calendar a:last-child {
  right: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1171%20960q0%2013-10%2023l-466%20466q-10%2010-23%2010t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10%2023-10t23%2010l466%20466q10%2010%2010%2023z%22%2F%3E%3C%2Fsvg%3E');
}
.c-chapter__header {
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}
.c-button,
.p-form__actions input[type="submit"] {
  display: inline-block;
  border: 0;
  background-color: #8dc5c6;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  color: #ffffff;
  padding: 0 2em;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  font-weight: bold;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  letter-spacing: 0.1em;
  outline: 0;
  font-family: 'Montserrat', sans-serif;
}
.c-button:hover,
.p-form__actions input[type="submit"]:hover {
  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.c-button:active,
.p-form__actions input[type="submit"]:active {
  -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1);
  background-color: #6bb4b5;
}
.c-button.c-button--sm,
.p-form__actions input[type="submit"].c-button--sm {
  font-size: 1.4rem;
  height: 40px;
  line-height: 40px;
}
.c-article {
  margin-top: 1em;
}
@media only screen and (min-width: 769px) {
  .c-article.c-article--type-thumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -30px;
  }
}
.c-article__image img {
  display: block;
  margin-bottom: 1.5em;
}
.c-article__image img[src=""] {
  display: none;
}
@media only screen and (min-width: 769px) {
  .c-article__image.c-article__image--type-thumb img {
    max-width: 250px;
    margin-left: 30px;
  }
}
.c-article__content {
  font-size: 1.4rem;
  color: #777777;
}
@media only screen and (min-width: 769px) {
  .c-article__content.c-article__content--type-thumb {
    margin-left: 30px;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
}
.c-hidden-source {
  display: none;
}
.swiper-container {
  width: 100%;
  padding-bottom: 20px;
  overflow-x: hidden;
  overflow-y: visible;
  margin-bottom: 30px;
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 0;
}
.swiper-pagination-bullet {
  opacity: 1;
  background-color: #dddddd;
}
.swiper-pagination-bullet-active {
  background-color: #222222;
}
#cboxOverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: visible;
  width: 100%;
  height: 100%;
  background: #fff;
}
#colorbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: visible;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  outline: 0;
}
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: visible;
}
#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left;
}
#cboxContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  position: relative;
  overflow: visible;
  margin: 0 40px 40px;
  background: transparent;
  border: 0;
}
#cboxLoadedContent {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;
  padding: 0;
  background: transparent;
}
#cboxTitle {
  margin: 0;
  position: absolute;
  top: -22px;
  left: 0;
  color: #333;
}
#cboxClose {
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2210px%22%20height%3D%2210px%22%20viewBox%3D%220%200%2010%2010%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%20%3Ctitle%3Ecross%3C%2Ftitle%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%3C%2Fdefs%3E%20%3Cg%20id%3D%22top%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22sp%2Fdrawer%22%20transform%3D%22translate(-30.000000%2C%20-48.000000)%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%3E%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(30.000000%2C%2047.000000)%22%3E%20%3Cpolygon%20id%3D%22cross%22%20points%3D%2210%202.02604317%208.97396484%201%205.00003906%204.97385917%201.02613281%201%200%202.02604317%203.97402344%206.00009766%200%209.97395683%201.02603516%2011%205.00003906%207.02592598%208.97396484%2011%2010%209.97415214%206.02609375%206.00009766%22%3E%3C%2Fpolygon%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: 20px;
  background-position: 0 0;
  top: -30px;
  outline: 0;
}
#cboxClose:hover {
  background-position: 0 0;
}
#cboxPrevious {
  background-position: 0 0;
  background-size: 40px;
  width: 40px;
  height: 40px;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20fill%3D%22%23444%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1203%20544q0%2013-10%2023l-393%20393%20393%20393q10%2010%2010%2023t-10%2023l-50%2050q-10%2010-23%2010t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10%2023-10t23%2010l50%2050q10%2010%2010%2023z%22%2F%3E%3C%2Fsvg%3E');
  left: -40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  outline: 0;
}
#cboxPrevious:hover {
  background-position: 0 0;
}
#cboxNext {
  background-position: 0 0;
  background-size: 40px;
  width: 40px;
  height: 40px;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20fill%3D%22%23444%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1171%20960q0%2013-10%2023l-466%20466q-10%2010-23%2010t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10%2023-10t23%2010l466%20466q10%2010%2010%2023z%22%2F%3E%3C%2Fsvg%3E');
  right: -40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  outline: 0;
}
#cboxNext:hover {
  background-position: 0 0;
}
#cboxSlideshow {
  position: absolute;
  top: -20px;
  overflow: visible;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-indent: 0;
  outline: 0;
}
#cboxLoadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
}
@media only screen and (max-width: 800px) {
  #cboxLoadedContent table {
    width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 800px) {
  #cboxLoadedContent [class^="wysiwyg_template_profile"],
  #cboxLoadedContent [class^="wysiwyg_template_profile"] td,
  #cboxLoadedContent [class^="wysiwyg_template_profile"] img {
    display: block;
    max-width: 100%;
    height: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.photo-modal__image img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  margin: auto;
}
.photo-modal-body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px;
  background: #f1f1f1;
  color: #333;
}
.photo-modal--photo .photo-modal-body {
  display: none;
}
.photo-modal-body__item:empty {
  display: none;
}
.photo-modal-body__item + .photo-modal-body__item {
  margin: 1em 0 0;
}
.photo-modal-body__item--title {
  font-weight: bold;
  font-size: 15px;
}
/*
 パーツ表示切替用style
*/
.site_description {
  display: block;
}
.shop_name {
  display: block;
}
.shop_tel {
  display: block;
}
.shop_rss {
  display: block;
}
.today_area {
  display: block;
}
.qr_area {
  display: block;
}
.counter_area {
  display: block;
}
.copyright {
  display: block;
}
.powered {
  display: block;
}
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f6f6f6;
  color: #222222;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
@media only screen and (min-width: 769px) {
  .l-header {
    margin-bottom: 0;
    background-color: transparent;
    position: static;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.l-header a:not([class]) {
  color: currentColor;
  text-decoration: none;
}
.l-header.l-header--hidden {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
@media only screen and (min-width: 769px) {
  .l-header.l-header--hidden {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
.l-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media only screen and (min-width: 769px) {
  .l-header__inner {
    padding-top: 35px;
    padding-bottom: 50px;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}
.l-header__brand {
  display: none;
}
@media only screen and (min-width: 769px) {
  .l-header__brand {
    display: block;
  }
}
.l-header-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  height: 56px;
  line-height: 56px;
  padding: 0;
  font-weight: bold;
  white-space: nowrap;
}
@media only screen and (min-width: 769px) {
  .l-header-button {
    display: none;
  }
}
.l-header-button__icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  vertical-align: -0.25em;
  margin-right: 0.5em;
}
.l-header-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 5px 0;
  padding: 0;
  width: auto;
}
.l-header-social__item {
  list-style: none;
  margin-left: 0.5em;
}
@media only screen and (min-width: 769px) {
  .l-header-social__item {
    margin-left: 0.8em;
  }
}
.l-header-social__item:first-child {
  margin-left: 0;
}
.l-header-social__icon {
  display: block;
}
.l-drawer {
  height: 100vh;
  width: 80%;
  max-width: 400px;
  position: fixed;
  top: 0;
  left: 0;
  background: #f6f6f6;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  z-index: 2000;
  overflow-y: scroll;
  color: #777777;
  opacity: 0;
  padding: 10px 30px;
  font-weight: bold;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.l-drawer__icon {
  width: 13px;
  height: 13px;
  vertical-align: -0.2em;
  margin-right: 0.2em;
  fill: currentColor;
}
.l-drawer__close {
  display: block;
  font-size: 1.2rem;
  margin: 20px 0;
}
.l-drawer-state:checked ~ [for="l-drawer-state"] {
  z-index: 1000;
  opacity: 1;
}
.l-drawer-state:checked ~ [for="l-drawer-state"] ~ .l-drawer {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
}
.l-modal__wrapper {
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.l-modal {
  position: absolute;
  margin: 0px auto;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow-y: auto;
}
.l-modal__container {
  position: relative;
  width: 300px;
  padding: 30px;
}
@media only screen and (min-width: 769px) {
  .l-modal__container {
    width: 640px;
    padding: 50px 40px 50px 50px;
  }
}
@media only screen and (min-width: 769px) {
  .l-modal__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.l-modal__image {
  text-align: center;
  width: 100px;
  margin: 0 auto 10px;
}
@media only screen and (min-width: 769px) {
  .l-modal__image {
    margin: 0 30px 0 0;
  }
}
.l-modal__image img {
  display: block;
}
@media only screen and (min-width: 769px) {
  .l-modal__content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
}
.l-modal__content h2 {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: normal;
}
.l-modal__text {
  margin: 0;
  font-size: 1.4rem;
}
.l-modal__close-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  cursor: pointer;
}
.l-modal-state:checked ~ [for="l-modal-state"] {
  z-index: 1000;
  opacity: 1;
}
.l-modal-state:checked ~ [for="l-modal-state"] ~ .l-modal {
  opacity: 1;
  z-index: 2000;
}
.l-side {
  display: none;
  position: relative;
  top: -10px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  margin-right: 30px;
  margin-bottom: 50px;
  font-family: 'Montserrat', sans-serif;
}
@media only screen and (min-width: 769px) {
  .l-side {
    display: block;
  }
}
@media only screen and (min-width: 961px) {
  .l-side {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    margin-right: 60px;
  }
}
.l-side nav {
  background-color: #f6f6f6;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  position: sticky;
  margin-top: 10px;
  top: 10px;
  color: #777777;
  padding: 10px 15px 10px 30px;
}
.l-main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
  min-width: 0;
}
.l-sub-footer {
  background-color: #f6f6f6;
  padding-top: 30px;
  padding-bottom: 30px;
}
@media only screen and (min-width: 769px) {
  .l-sub-footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.l-footer {
  background-color: #eaeeef;
  color: #769097;
  text-align: center;
}
.l-footer p {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 0;
}
@media only screen and (min-width: 769px) {
  .l-footer p {
    font-size: 1.4rem;
  }
}
.l-footer a {
  color: currentColor;
}
.l-footer__inner {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
}
.l-footer__pagetop {
  position: absolute;
  right: 16px;
  top: -25px;
  font-size: 1rem;
  text-transform: uppercase;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.l-footer__pagetop:hover {
  top: -30px;
}
.l-footer__pagetop a {
  color: currentColor;
  display: block;
  line-height: 30px;
  text-decoration: none;
  padding: 0 1em 0 0.8em;
  background-color: #eaeeef;
}
.l-footer__pagetop .c-icon {
  vertical-align: -0.3em;
  fill: currentColor;
}
.p-global-nav {
  padding-left: 0;
  list-style: none;
  font-size: 1.4rem;
}
.p-global-nav:first-of-type {
  font-size: 1.6rem;
}
.p-global-nav:first-of-type::before,
.p-global-nav:first-of-type::after {
  content: '';
  width: 40px;
  height: 2px;
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 28px 0;
}
@media only screen and (min-width: 769px) {
  .p-global-nav:first-of-type::before {
    display: none;
  }
}
.p-global-nav:last-child {
  margin: 0;
}
.p-global-nav > li {
  margin: 15px 0;
  font-weight: bold;
  position: relative;
}
.p-global-nav > li.active::before {
  position: absolute;
  content: '-';
  left: -1em;
}
.p-global-nav__item {
  text-decoration: none;
  color: currentColor;
  display: block;
}
@media only screen and (min-width: 769px) {
  .p-global-nav__item span {
    position: relative;
    cursor: pointer;
    display: inline-block;
  }
  .p-global-nav__item span::after {
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    bottom: -3px;
    left: 0;
  }
  .p-global-nav__item:hover span::after {
    width: 100%;
  }
}
.p-global-nav__qr {
  visibility: hidden;
}
@media only screen and (min-width: 769px) {
  .p-global-nav__qr {
    visibility: visible;
  }
}
.sub_navi {
  padding-left: 0;
  list-style: none;
}
.sub_navi li {
  padding-left: 0.8em;
  position: relative;
  margin: 0.2em 0;
  font-size: 1.4rem;
}
.sub_navi li::before {
  content: '-';
  position: absolute;
  left: 0;
}
.sub_navi a {
  color: currentColor;
  text-decoration: none;
}
.p-brand__name {
  font-size: 2rem;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}
.p-brand__name a {
  color: currentColor;
  text-decoration: none;
  position: relative;
}
.p-brand__name a:hover {
  opacity: 0.9;
}
.p-brand__description {
  font-size: 1.2rem;
  color: #888888;
  font-weight: bold;
}
.p-counter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-align: center;
  margin: 10px auto 25px;
}
.p-counter__unit {
  width: 90px;
}
.p-counter__unit:last-child .p-counter__value {
  border-right: 0;
}
.p-counter__label {
  font-size: 1rem;
  text-transform: uppercase;
}
.p-counter__value {
  font-size: 1.2rem;
  margin: 0;
  border-right: 2px solid #a2b3b8;
  font-family: 'Montserrat', sans-serif;
}
.p-photo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.p-photo-list.p-photo-list--swiper {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
@media only screen and (min-width: 769px) {
  .p-photo-list.p-photo-list--swiper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.p-photo-list__unit {
  max-width: 280px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 1em;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .p-photo-list__unit {
    max-width: 30%;
    margin-right: 20px;
  }
  .p-photo-list__unit:nth-child(3n) {
    margin-right: 0;
  }
}
.p-photo-list__unit.p-photo-list__unit--small {
  max-width: 30%;
  margin-right: 5%;
}
.p-photo-list__unit.p-photo-list__unit--small:nth-child(3n) {
  margin-right: 0;
}
.p-photo-list__image {
  border: 8px solid #f7f7f7;
  background-color: #f7f7f7;
  position: relative;
}
.p-photo-list__image::after {
  content: '';
  display: block;
  padding-top: 100%;
  top: 0;
}
.p-photo-list__image a {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.p-photo-list__image a:hover {
  background-color: #f2f2f2;
  -webkit-box-shadow: 10px 10px 0 #f2f2f2, -10px -10px 0 #f2f2f2, 10px -10px 0 #f2f2f2, -10px 10px 0 #f2f2f2;
  box-shadow: 10px 10px 0 #f2f2f2, -10px -10px 0 #f2f2f2, 10px -10px 0 #f2f2f2, -10px 10px 0 #f2f2f2;
}
.p-photo-list__image img {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}
.p-photo-list__image-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.p-photo-list__title {
  margin-top: 0.8em;
  margin-bottom: 0;
  color: #777777;
  font-size: 1.2rem;
  line-height: 1.2;
}
@media only screen and (min-width: 961px) {
  .p-photo-list__title {
    font-size: 1.4rem;
  }
}
.p-pager {
  margin-top: 40px;
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
}
@media only screen and (min-width: 769px) {
  .p-pager {
    font-size: 14px;
  }
}
@media only screen and (min-width: 961px) {
  .p-pager {
    font-size: 16px;
  }
}
.p-pager a {
  margin-right: 2px;
  margin-left: 2px;
  padding: 0 0.5em;
  text-decoration: none;
  color: currentColor;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-bottom: 2px solid transparent;
}
@media only screen and (min-width: 481px) {
  .p-pager a {
    margin-right: 5px;
    margin-left: 5px;
  }
}
@media only screen and (min-width: 769px) {
  .p-pager a {
    padding: 0.3em 0.8em;
  }
}
.p-pager a:hover {
  border-color: #8dc5c6;
}
.p-pager a.chk {
  color: #777777;
  background-color: #f6f6f6;
}
.p-pager a.chk:hover {
  cursor: default;
  border-color: transparent;
}
.p-form .reservation_area,
.p-form .contact_area {
  margin-bottom: 1.4em;
}
.p-form .reservation_area > label,
.p-form .contact_area > label {
  display: block;
  font-size: 1.4rem;
  color: #777777;
  margin-bottom: 0.5em;
}
.p-form .reservation_area > br,
.p-form .contact_area > br {
  display: none;
}
@media only screen and (min-width: 481px) {
  .p-form input[type="text"],
  .p-form input[type="tel"],
  .p-form input[type="email"] {
    max-width: 300px;
  }
}
.p-form input[type="text"].contact_medium,
.p-form input[type="tel"].contact_medium,
.p-form input[type="email"].contact_medium {
  max-width: 600px;
}
.p-form textarea {
  height: 10em;
}
@media only screen and (min-width: 481px) {
  .p-form textarea {
    max-width: 600px;
  }
}
.p-form input[type="text"],
.p-form input[type="tel"],
.p-form input[type="email"],
.p-form textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  background-color: #f6f6f6;
  padding: 0.6em 0.5em;
  outline: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  position: relative;
  width: 100%;
  display: block;
  border-radius: 0;
}
.p-form input[type="text"]:focus,
.p-form input[type="tel"]:focus,
.p-form input[type="email"]:focus,
.p-form textarea:focus {
  -webkit-box-shadow: inset 0 -2px 0 #8dc5c6;
  box-shadow: inset 0 -2px 0 #8dc5c6;
}
.p-form select {
  display: inline-block;
  padding: 0.4rem 2.5rem 0.4rem 0.75rem;
  height: calc(4rem);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto !important;
  overflow: hidden;
  max-width: 100%;
  border: 0;
  position: relative;
  border-radius: 0;
  outline: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22%23444%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200l8%2010h-16l8-10zm8%2014h-16l8%2010%208-10z%22%2F%3E%3C%2Fsvg%3E');
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-color: #f6f6f6;
  cursor: pointer;
}
.p-form select::-ms-expand {
  display: none;
}
.p-form select:focus {
  -webkit-box-shadow: inset 0 -2px 0 #8dc5c6;
  box-shadow: inset 0 -2px 0 #8dc5c6;
}
.p-form .radio,
.p-form .checkbox {
  display: block;
  margin-bottom: 1em;
}
@media only screen and (min-width: 769px) {
  .p-form .radio,
  .p-form .checkbox {
    margin-bottom: 0.5em;
  }
}
.p-form .radio input,
.p-form .checkbox input {
  display: none;
}
.p-form .radio input:checked + label,
.p-form .checkbox input:checked + label {
  font-weight: bold;
}
.p-form .radio input:checked + label::before,
.p-form .checkbox input:checked + label::before {
  border-color: transparent;
  background-color: #8dc5c6;
}
.p-form .radio input:checked + label::after,
.p-form .checkbox input:checked + label::after {
  visibility: visible;
}
.p-form .radio label,
.p-form .checkbox label {
  color: #777777;
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}
.p-form .radio label::before,
.p-form .checkbox label::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.1);
  vertical-align: -0.2em;
}
.p-form .radio label::before {
  border-radius: 100%;
}
.p-form .radio label::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  display: inline-block;
  visibility: hidden;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 100%;
}
.p-form .checkbox label::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 2px;
  display: inline-block;
  visibility: hidden;
  width: 4px;
  height: 9px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.p-form__message {
  margin: 40px 0;
  text-align: center;
  color: #777777;
  line-height: 2;
  font-size: 1.4rem;
}
.p-form__message::before,
.p-form__message::after {
  display: block;
  margin-right: auto;
  margin-left: auto;
  content: '';
  width: 80px;
  height: 2px;
  background-color: #dddddd;
}
.p-form__message::before {
  margin-bottom: 30px;
}
.p-form__message::after {
  margin-top: 30px;
}
.p-form__note {
  font-size: 1.2rem;
  margin: 0;
  max-width: 600px;
  color: #777777;
}
.p-form__note h3 {
  margin: 0 0 0.5em;
}
.p-form__note p {
  margin-bottom: 0;
}
.p-form__actions {
  margin-top: 1.5em;
  margin-bottom: 30px;
}
.wysiwyg {
  overflow-x: auto;
}
.wysiwyg::after {
  content: '';
  display: block;
  clear: both;
}
.wysiwyg > *:first-child {
  margin-top: 0;
}
.wysiwyg > *:last-child {
  margin-bottom: 0;
}
.wysiwyg p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.wysiwyg a {
  color: #8dc5c6;
}
.wysiwyg table {
  table-layout: fixed;
  border-collapse: collapse;
}
.wysiwyg iframe {
  max-width: 100%;
}
.wysiwyg-table {
  overflow-x: auto;
}
.wysiwyg-table::-webkit-scrollbar {
  height: 8px;
}
.wysiwyg-table::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
.wysiwyg-table::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 4px;
}
.wysiwyg_template_profile1,
.wysiwyg_template_profile2 {
  display: block;
}
@media only screen and (min-width: 481px) {
  .wysiwyg_template_profile1,
  .wysiwyg_template_profile2 {
    display: table;
  }
}
.wysiwyg_template_profile1 tr,
.wysiwyg_template_profile2 tr {
  display: block;
}
@media only screen and (min-width: 481px) {
  .wysiwyg_template_profile1 tr,
  .wysiwyg_template_profile2 tr {
    display: table-row;
  }
}
.wysiwyg_template_profile1 td,
.wysiwyg_template_profile2 td {
  display: block;
}
@media only screen and (min-width: 481px) {
  .wysiwyg_template_profile1 td,
  .wysiwyg_template_profile2 td {
    display: table-cell;
  }
}
@media only screen and (min-width: 481px) {
  .wysiwyg_template_profile1 img,
  .wysiwyg_template_profile2 img {
    max-width: initial;
  }
}
#navi_parts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: -10px;
  margin-left: -10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.navi_parts_detail {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;
}
#google_translate_element .goog-te-gadget a {
  pointer-events: none;
}
.p-top-brand {
  text-align: center;
  padding: 25px 0;
}
@media only screen and (min-width: 769px) {
  .p-top-brand {
    display: none;
  }
}
.p-top-slider-container {
  margin-bottom: 0;
}
.p-top-slider__unit {
  max-width: 1200px;
}
.p-top-slider__image {
  position: relative;
}
.p-top-slider__image::after {
  content: '';
  display: block;
  padding-top: 50%;
  top: 0;
}
.p-top-slider__image img {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}
.p-top-slider__image-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.p-top-slider__text {
  margin: 0.5em 0 0;
  text-align: center;
  color: currentColor;
  font-size: 1.2rem;
  color: #777777;
}
@media only screen and (min-width: 769px) {
  .p-top-slider__text {
    font-size: 1.6rem;
  }
}
.p-top-slider__button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
  z-index: 10;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.p-top-slider__button:hover {
  -webkit-transform: translateY(-50%) scale(1.2);
  transform: translateY(-50%) scale(1.2);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 769px) {
  .p-top-slider__button {
    display: block;
  }
  .p-top-slider__button.swiper-button-lock {
    display: none;
  }
}
.p-top-slider__button.p-top-slider__button--next {
  right: 0;
}
@media only screen and (min-width: 961px) {
  .p-top-slider__button.p-top-slider__button--next {
    right: 20px;
  }
}
.p-top-slider__button.p-top-slider__button--prev {
  left: 0;
}
@media only screen and (min-width: 961px) {
  .p-top-slider__button.p-top-slider__button--prev {
    left: 20px;
  }
}
.p-top-slider__icon {
  width: 50px;
  height: 50px;
  display: block;
  fill: #222222;
}
.p-top-message {
  font-size: 1.2rem;
  line-height: 2;
  margin-top: 20px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 769px) {
  .p-top-message {
    font-size: 1.6rem;
  }
}
.p-top-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-top-info-list__label {
  color: #fff;
  background-color: #222222;
  display: inline-block;
  padding: 0.1em 0.5em;
  margin-right: 0.5em;
  font-weight: bold;
}
.p-top-info-list__item {
  margin-bottom: 0.5em;
}
.p-top-info-list__date {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 0.3em;
}
.p-top-info-list__link {
  font-weight: bold;
  text-decoration: none;
  color: #8dc5c6;
}
.p-top-info-list__link:hover {
  text-decoration: underline;
}
@media only screen and (min-width: 769px) {
  .p-top-photo {
    padding-bottom: 0;
    margin-bottom: -20px;
  }
}
@media only screen and (min-width: 769px) {
  .p-top-photo__pagination {
    display: none;
  }
}
.p-top-about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media only screen and (min-width: 961px) {
  .p-top-about {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
.p-top-about__map {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  margin-right: -15px;
  margin-bottom: 25px;
  margin-left: -15px;
}
@media only screen and (min-width: 769px) {
  .p-top-about__map {
    margin-right: 0;
    margin-left: 0;
  }
}
@media only screen and (min-width: 961px) {
  .p-top-about__map {
    margin-right: 30px;
    margin-bottom: 0;
  }
}
.p-top-about__map iframe {
  display: block;
  width: 100%;
}
@media only screen and (min-width: 961px) {
  .p-top-about__map iframe {
    width: 300px;
  }
}
.p-top-about__body {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}
@media only screen and (min-width: 961px) {
  .p-top-about__body {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
}
.p-top-about__content {
  font-size: 1.4rem;
}
.p-footer-contact {
  background-color: #f6f6f6;
  padding: 30px 0;
  margin-top: 0;
  margin-bottom: 0;
}
.p-footer-contact .c-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media only screen and (min-width: 769px) {
  .p-footer-contact .c-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media only screen and (min-width: 769px) {
  .p-footer-contact {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.p-footer-contact input[type="text"],
.p-footer-contact textarea,
.p-footer-contact select {
  background-color: #fff;
}
@media only screen and (min-width: 769px) {
  .p-footer-contact__heading {
    width: 200px;
    margin-right: 30px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 961px) {
  .p-footer-contact__heading {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    margin-right: 60px;
  }
}
.p-footer-contact__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
}
#top .c-section:first-of-type {
  margin-top: 40px;
}
.table_calendar {
  margin-top: 30px;
  font-family: 'Montserrat', sans-serif;
}
.table_calendar th {
  width: 14.28571429%;
  font-size: 1rem;
  text-align: left;
  padding: 0 0.4em 0 0;
  border-bottom: 1px solid #f6f6f6;
  text-align: right;
}
@media only screen and (min-width: 769px) {
  .table_calendar th {
    font-size: 1.2rem;
  }
}
.table_calendar td {
  position: relative;
  text-align: right;
  height: 70px;
  padding: 0.4em 0 0;
  border-bottom: 1px solid #f6f6f6;
}
.table_calendar td p {
  margin-top: 0;
  margin-right: 0.1em;
  margin-bottom: 0;
}
.table_calendar td img {
  display: block;
  margin-top: 0.2em;
  margin-right: 0;
  margin-left: auto;
}
.table_calendar .sun,
.table_calendar .sat,
.table_calendar .holiday {
  color: #777777;
  font-weight: bold;
}
.p-calendar-label {
  font-size: 1.2rem;
  display: inline-block;
  padding: 0.1em 0.5em;
  background-color: #8dc5c6;
  color: #fff;
  font-weight: bold;
  margin-right: 0.5em;
}
.p-calendar-list {
  margin-bottom: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.p-calendar-list dd {
  margin-left: 0;
}
.p-calendar-list__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px 10px 18px;
}
.p-calendar-list__date {
  color: #777777;
  font-size: 1.8rem;
  margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif;
}
.p-calendar-list__link {
  color: #8dc5c6;
  font-weight: bold;
  text-decoration: none;
}
.hotspot {
  cursor: pointer;
}
#tt {
  position: absolute;
  display: block;
}
#ttcont {
  display: block;
  padding: 0.5em 0.7em;
  margin-left: 5px;
  background: #ffffff;
  color: #333;
  border-radius: 6px 6px 6px 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#ttcont .schedule_title {
  font-size: 13px;
}
#ttcont .schedule_body {
  font-size: 11px;
}
#tttop {
  display: none;
}
#ttbot {
  display: none;
}
.p-print-link {
  color: #777777;
  text-align: right;
}
.p-print-link a {
  text-decoration: none;
  color: currentColor;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .p-print-link a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #777777;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  .p-print-link a:hover::after {
    width: 100%;
  }
}
.p-print-link .c-icon {
  vertical-align: -0.3em;
  fill: #777777;
}
.p-coupon__button-layout {
  margin-top: 20px;
}
.p-coupon__detail {
  font-size: 1.4rem;
  margin: 0;
}
.p-coupon__detail dt {
  font-weight: bold;
  font-size: 1.2rem;
  color: #777777;
}
@media only screen and (min-width: 481px) {
  .p-coupon__detail dt {
    float: left;
    clear: left;
  }
}
.p-coupon__detail dd {
  margin-left: 0;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 481px) {
  .p-coupon__detail dd {
    padding-left: 5em;
  }
}
.p-menu__price {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
  .p-menu__price {
    float: right;
  }
}
.p-menu__price span {
  font-size: 0.8em;
}
@media only screen and (min-width: 769px) {
  .p-menu__body {
    float: left;
  }
}
.p-about__table {
  margin-bottom: 50px;
}
.p-about__table table {
  display: block;
}
@media only screen and (min-width: 481px) {
  .p-about__table table {
    display: table;
    border-top: 1px solid #f6f6f6;
  }
}
.p-about__table tr {
  display: block;
}
@media only screen and (min-width: 481px) {
  .p-about__table tr {
    display: table-row;
  }
}
.p-about__table th {
  display: block;
  text-align: left;
  font-size: 1.4rem;
  color: #777777;
  font-weight: bold;
}
@media only screen and (min-width: 481px) {
  .p-about__table th {
    font-weight: normal;
    display: table-cell;
    text-align: right;
    width: 30%;
    padding-top: 0.8em;
    padding-right: 1.5em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid #f6f6f6;
  }
}
.p-about__table td {
  display: block;
  margin-bottom: 1.5em;
}
@media only screen and (min-width: 481px) {
  .p-about__table td {
    display: table-cell;
    border-bottom: 1px solid #f6f6f6;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
  }
}
.staff_wrap {
  padding-top: 30px;
  border-top: 1px solid #f6f6f6;
}
.staff_wrap:first-of-type {
  border-top: 0;
}
.staff__text__social_icon {
  color: #222222;
}
.p-reservation-header {
  color: #777777;
  font-size: 1.4rem;
}
.p-reservation-header__tel {
  font-size: 2.8rem;
  color: #222222;
}
.p-reservation-header__tel a {
  color: #8dc5c6;
}
.p-reservation-header__tel-time {
  color: #222222;
  display: block;
}
@media only screen and (min-width: 769px) {
  .p-reservation-header__tel-time {
    display: inline;
  }
  .p-reservation-header__tel-time::before {
    content: '（';
  }
  .p-reservation-header__tel-time::after {
    content: '）';
  }
}
.p-reservation-course__content {
  color: #777777;
  font-size: 1.4rem;
}
.reservation_course_name {
  font-size: 1.2rem;
  color: #777777;
  padding: 0.3em 0.6em 0.1em 0.8em;
  border: 1px solid #777777;
  text-decoration: none;
  margin-left: 1em;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  white-space: nowrap;
}
.reservation_course_name:hover {
  color: #222222;
  border-color: #222222;
}
.reservation_course_name::after {
  content: '▼';
  margin-left: 0.5em;
}
.reservation_course_body {
  margin-bottom: 2rem;
  margin-left: 10px;
  padding-top: 1rem;
  padding-left: 18px;
  padding-bottom: 1rem;
  border-left: 2px solid #777777;
  color: #777777;
}
.reservation_course_body *:first-child {
  margin-top: 0;
}
.reservation_course_body *:last-child {
  margin-bottom: 0;
}
.p-minne-gallery {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 481px) {
  .p-minne-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.p-minne-item {
  margin: 0 0 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (min-width: 481px) {
  .p-minne-item {
    display: block;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 30%;
    margin-right: 5%;
  }
  .p-minne-item:nth-child(3n) {
    margin-right: 0;
  }
}
.p-minne-item__image-wrap {
  -ms-flex-preferred-size: 100px;
  flex-basis: 100px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  margin-right: 0.5em;
  border: 8px solid #f7f7f7;
  background-color: #f7f7f7;
}
@media only screen and (min-width: 481px) {
  .p-minne-item__image-wrap {
    margin-right: 0;
  }
}
.p-minne-item__image {
  display: block;
  height: 0;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.p-minne-item__image:hover {
  background-color: #f2f2f2;
  -webkit-box-shadow: 10px 10px 0 #f2f2f2, -10px -10px 0 #f2f2f2, 10px -10px 0 #f2f2f2, -10px 10px 0 #f2f2f2;
  box-shadow: 10px 10px 0 #f2f2f2, -10px -10px 0 #f2f2f2, 10px -10px 0 #f2f2f2, -10px 10px 0 #f2f2f2;
}
.p-minne-item__image img {
  display: none;
}
.p-minne-item__caption {
  line-height: 1.4;
  min-width: 0;
}
.p-minne-item__title {
  text-decoration: none;
  display: block;
  line-height: 1.3;
  color: #8dc5c6;
}
@media only screen and (min-width: 481px) {
  .p-minne-item__title {
    margin-top: 0.5em;
  }
}
.p-minne-item__title:hover {
  text-decoration: underline;
}
.p-minne-item__price {
  display: block;
  font-size: 0.8em;
  margin-top: 0.2em;
  text-align: right;
}
@media only screen and (min-width: 481px) {
  .p-minne-item__price {
    text-align: left;
  }
}
.p-minne-message {
  margin: 40px 0;
  text-align: center;
  color: #777777;
  line-height: 2;
  font-size: 1.4rem;
}
.p-minne-message::before,
.p-minne-message::after {
  display: block;
  margin-right: auto;
  margin-left: auto;
  content: '';
  width: 80px;
  height: 2px;
  background-color: #dddddd;
}
.p-minne-message::before {
  margin-bottom: 30px;
}
.p-minne-message::after {
  margin-top: 30px;
}


/* 2026-07-29 小菅リクエストにより追加: トップページのカスタム下層(地図・お問い合わせフォーム)を非表示化 */
.p-top-about { display: none !important; }
.p-footer-contact { display: none !important; }


/* 2026-07-29 小菅リクエストにより追加: トップページの背景色をリミックスロゴの最も薄い色(#FFFECC)に変更 */
body { background-color: #FFFECC !important; }


/* 2026-07-29 小菅リクエストにより追加: 部門アイコンボタンブロックのPC表示改善(狭い・見にくい対策) */
.welcome-msg-wrap {
  font-family: 'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
}
@media (min-width: 768px) {
  .welcome-msg-wrap {
    max-width: 760px !important;
  }
  .dept-header-bar {
    font-size: 16px !important;
    padding: 10px !important;
  }
  .dept-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .dept-card {
    margin: 0 !important;
    padding: 14px 14px 10px !important;
  }
  .dept-logo {
    height: 42px !important;
  }
  .dept-label {
    font-size: 15px !important;
  }
  .dept-store-name {
    font-size: 14px !important;
    padding: 6px 14px !important;
  }
  .dept-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* 2026-07-29 小菅リクエストにより撤回: ロゴ+スライドショーの左右区切りをfloatで実現していたが、代わりにスライドショー/インフォメーションをHTML側でl-main内に移動し、標準のサイドバー(l-side)構造を使う方式に変更したため不要になった */

/* 2026-07-29 小菅リクエストにより一旦棚上げ: スライドショー縮小は保留(PCで見づらいとのフィードバックのため撤回) */

/* 2026-07-29 小菅リクエストにより追加: お知らせ最新リスト(写真付き)のサンプル表示スタイル */
body#top .p-top-info-list.js-top-info-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body#top .p-top-info-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
body#top .p-top-info-list__item .info-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
}
body#top .p-top-info-list__item .info-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body#top .p-top-info-list__item .info-body {
  flex: 1 1 auto;
  min-width: 0;
}
body#top .p-top-info-list__date {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 2px;
}
body#top .p-top-info-list__link {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 769px) {
  body#top .p-top-info-list.js-top-info-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* 2026-07-29 小菅リクエストにより追加: お知らせ最新リストのスマホ幅はみ出し修正(グリッド/フレックス内の縮小許可) */
body#top .p-top-info-list.js-top-info-list {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
body#top .info-body {
  min-width: 0;
  overflow: hidden;
}


/* 2026-07-29 小菅リクエストにより追加: スマホでスクロールしてもロゴが常にハンバーガーメニューと一緒に見えるようにする(サンプルサイトと同様の固定ヘッダー表示) */
@media (max-width: 768px) {
  .l-header__brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .l-header__brand .p-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .l-header__brand .p-brand__name {
    margin: 0;
  }
  .l-header__brand .p-brand__name a img {
    height: 36px;
    width: auto;
    display: block;
  }
  .l-header__brand .p-brand__description {
    display: none;
  }
  .l-header.l-header--hidden {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}


/* 2026-07-29 小菅リクエストにより追加: スマホの固定ヘッダーを半透明化し、ロゴを中央・ハンバーガーを左に配置 */
@media (max-width: 768px) {
  .js-header.l-header {
    background-color: rgba(246, 246, 246, 0.85);
  }
  .l-header__inner {
    position: relative;
  }
  .l-header__brand {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .l-header-button {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
}


/* 2026-07-29 小菅リクエストにより追加: 固定ヘッダーに常時ロゴを表示するようにしたため、スマホの旧来の大きいロゴ表示(ページ上部の別ブロック)は重複のため非表示にする */
.p-top-brand {
  display: none;
}


/* 2026-07-29 小菅リクエストにより追加: スマホでのインフォメーションの縦幅短縮(2列化・サムネイル縮小・余白圧縮)、および背景色をページ全体と同じ色に統一 */
.c-section.c-section--bg {
  background-color: transparent;
}
@media (max-width: 768px) {
  .c-section.c-section--bg {
    padding: 16px 15px;
  }
  .c-section--bg .c-section__heading {
    font-size: 1.4rem;
    margin-bottom: 0.4em;
  }
  body#top .p-top-info-list.js-top-info-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body#top .p-top-info-list__item {
    padding: 6px;
    gap: 8px;
  }
  body#top .p-top-info-list__item .info-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  body#top .p-top-info-list__date {
    font-size: 10px;
    margin-bottom: 1px;
  }
  body#top .p-top-info-list__link {
    font-size: 12px;
  }
}

/* 2026-07-29 小菅リクエストにより追加: インフォメーションの見出し文字を非表示化 */
.c-section--bg .c-section__heading {
  display: none;
}


/* 2026-07-29 小菅リクエストにより追加: スマホでスライドショーが固定ヘッダーに近すぎるため、上に少し余白を追加 */
@media (max-width: 768px) {
  .p-top-slider-section {
    margin-top: 14px;
  }
}


/* 2026-07-29 小菅リクエストにより追加: スライドショーを削除(PC・スマホ両方で非表示) */
.p-top-slider-section {
  display: none !important;
}

/* 2026-07-29 小菅リクエストにより追加: スマホでインフォメーションと部門から探すの間の余白が広すぎるため、半分程度に圧縮 */
@media (max-width: 768px) {
  .c-section.c-section--bg {
    margin-bottom: 20px;
  }
}


/* 2026-07-29 小菅リクエストにより追加: PCでも小さいロゴを最上部に固定表示(スマホの固定ヘッダーと同様の仕組み) */
@media (min-width: 769px) {
  .l-header {
    position: sticky;
    background-color: rgba(246, 246, 246, 0.9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .l-header__inner {
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
  }
  .l-header__brand img {
    height: 40px;
    width: auto;
  }
}


/* 2026-07-29 小菅リクエストにより追加: PCで左サイドバーのメニューがスクロールで隠れないよう、固定ヘッダーの下に追従して残るようにする */
@media (min-width: 769px) {
  .l-side {
    position: sticky;
    top: 82px;
    align-self: flex-start;
  }
}



/* 2026-07-29 小菅リクエストにより追加: トップページのキャッチコピー帯(生きものシルエット付き)
   ・非表示にしてあった重複ロゴ枠(.p-top-brand)を再利用し、トップページのみ「帯」として表示する
   ・色はリミックスのテーマカラー(黄)の濃淡で統一。部門の緑/青/橙/赤は部門ボタン側にだけ使う
   ・シルエット帯は横方向のタイル(repeat-x)。PCは多く、スマホは少なく自動で表示数が変わる */
body#top .p-top-brand {
  display: block !important;
  max-width: 1230px;
  margin: 0 auto 18px;
  padding: 0 15px;
}
body#top .p-top-brand .p-brand {
  background-color: #FBEF58;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px 16px 0;
  text-align: center;
  margin: 0;
}
body#top .p-top-brand .p-brand__name { display: none !important; }
body#top .p-top-brand .p-brand::before {
  content: "生きものが好きな人たちへ";
  display: block;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.14em;
  color: #8A6A00;
  margin-bottom: 8px;
}
body#top .p-top-brand .p-brand__description { margin: 0; }
body#top .p-top-brand .p-brand__description::before {
  content: "名古屋のペットショップ　リミックス";
  display: block;
  font-size: 21px;
  font-weight: bold;
  color: #3A2B00;
  line-height: 1.4;
  margin-bottom: 8px;
}
body#top .p-top-brand .p-brand__description::after {
  content: "淡水魚・海水魚・爬虫類・小動物。ぜんぶ、ここにいます。";
  display: block;
  font-size: 12.5px;
  color: #7A5E00;
  line-height: 1.7;
}
body#top .p-top-brand .p-brand::after {
  content: "";
  display: block;
  height: 64px;
  margin-top: 14px;
  background-image: url(https://cdn.goope.jp/224013/260729210842-6a69ed4af0909.png);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 64px;
}
@media (max-width: 768px) {
  body#top .p-top-brand { margin-bottom: 12px; }
  body#top .p-top-brand .p-brand { padding: 18px 12px 0; border-radius: 10px; }
  body#top .p-top-brand .p-brand::before { font-size: 12px; margin-bottom: 6px; }
  body#top .p-top-brand .p-brand__description::before { font-size: 17px; margin-bottom: 6px; }
  body#top .p-top-brand .p-brand__description::after { font-size: 11.5px; }
  body#top .p-top-brand .p-brand::after { height: 50px; margin-top: 10px; background-size: auto 50px; }
}


/* 2026-07-29 小菅リクエストにより追加: トップページ末尾(フッター直前)の締めのシルエット帯。
   上の帯と同じ素材を薄く敷いてページの始まりと終わりを対にする */
body#top .l-sub-footer::before {
  content: "";
  display: block;
  height: 44px;
  margin-bottom: 16px;
  opacity: 0.5;
  background-image: url(https://cdn.goope.jp/224013/260729210842-6a69ed4af0909.png);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 44px;
}
@media (max-width: 768px) {
  body#top .l-sub-footer::before { height: 36px; background-size: auto 36px; margin-bottom: 12px; }
}



/* 2026-07-29 小菅リクエストにより追加: テンプレート初期値の灰色(#F6F6F6)をすべてリミックスの黄色系に置き換える。
   土台(ペーシ゚背景)=#FFFECC / 枠まわり(ヘッダー・メニュー)=#FBEF58 / 浮く要素(お知らせカード)=白 の3段階。
   フッターだけは背景と同色(#FFFECC)にして、下に敷いたシルエット帯(#E0A420)のコントラストを保つ。 */
.l-side nav,
.l-drawer {
  background-color: #FBEF58;
}
.l-side nav,
.l-side nav a,
.l-drawer,
.l-drawer a {
  color: #3A2B00;
}
.l-sub-footer {
  background-color: #FFFECC;
}
@media (max-width: 768px) {
  .js-header.l-header {
    background-color: rgba(251, 239, 88, 0.92);
  }
}


/* 2026-07-29 小菅リクエストにより追加(維持): 固定ヘッダーはPC・スマホとも黄色系にする。
   上記のメディアクエリ内だけではPC幅の指定(灰色)が残ってしまうため、幅の指定なしで上書きする。 */
.js-header.l-header {
  background-color: rgba(251, 239, 88, 0.92);
}



/* 2026-07-29 小菅リクエストにより追加: 全体の黄色が強すぎるため、1段づつ淡くずらす。
   面(背景・枠)は淡い黄色だけにし、強い黄色(#FBEF58/#FFDA00/#E0A420)はボタン・見出しバー・シルエットなど
   「押せるもの・装飾」にだけ残す。ロゴの黄色(#FFDA00)とヘッダーが同色域でロゴが埋もれていた問題もこれで解消する。
   #FFFEE8 はガイドラインの最淡(#FFFECC)のさらに1段淡い色として今回新設したもの。 */
body {
  background-color: #FFFEE8 !important;
}
.js-header.l-header {
  background-color: rgba(255, 254, 204, 0.94);
}
.l-side nav,
.l-drawer {
  background-color: #FFFECC;
}
body#top .p-top-brand .p-brand {
  background-color: #FFFECC;
}
/* フッターは2層に分かれている。.l-sub-footer(シルエット帯・PAGE TOP)は既に対応済みだが、
   その下の .l-footer(カウンター・コピーライト)は別の青を帯びた灰色(#EAEEEF)で残っていたのでここで揃える。 */
.l-sub-footer,
.l-footer,
.c-section.p-footer-contact {
  background-color: #FFFEE8;
}


/* 2026-07-29 小菅リクエストにより追加(仕上げ): 面の灰色を消したことで最後に残った
   フッターの青を帯びた灰色の文字(#769097)を、黄色系と相性のよい温かい色に揃える。
   あわせて、フッターのシルエット帯は背景が灰色からクリームに変わって薄くなりすぎたため、不透明度を上げる。 */
.l-footer,
.l-footer__inner,
.l-footer p,
.l-footer a,
.l-footer dl,
.l-footer dt,
.l-footer dd,
.l-footer__pagetop {
  color: #8A7330;
}
body#top .l-sub-footer::before {
  opacity: 0.75;
}



/* 2026-07-29 小菅リクエストにより追加(文言・見出し・PAGE TOPの修正)
   1) キャッチコピー1行目を、漢字の「生きもの」からひらがなの「いきもの」へ
   2) キャッチコピー3行目(淡水魚・…ここにいます。)を削除
   3) インフォメーションの見出しを(31)で非表示にしていたものを復活させ、
      「部門から探す」のバーと同じ濃い黄色(#E0A420)の題字にする(寸法も同じ: 16px/行間32px/余白10px/角丸6px)
   4) フッターのPAGE TOPの背景に残っていた灰色(#EAEEEF)を、「押せるもの=強い黄色」のルールに従って#FBEF58へ */
body#top .p-top-brand .p-brand::before {
  content: "いきものが好きな人たちへ";
}
body#top .p-top-brand .p-brand__description::after {
  content: none;
  display: none;
}
body#top .c-section.c-section--bg .c-section__heading {
  display: block !important;
  background-color: #E0A420;
  color: #3A2B00;
  font-size: 16px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  margin: 0 0 12px;
}
.l-footer__pagetop a {
  background-color: #FBEF58;
  color: #3A2B00;
  border-radius: 6px;
}


/* 2026-07-29 小菅リクエストにより追加(上記の続き): インフォメーションの見出しをバーにしたことで、
   右上に絶対配置されている「もっと見る」リンクがバーの上に乗るようになった。
   見出しの左右に同じだけ余白を取ることで、中央揃えのまま文字がリンクにぶつからないようにする。 */
body#top .c-section.c-section--bg {
  position: relative;
}
body#top .c-section.c-section--bg .c-section__heading {
  padding-left: 96px;
  padding-right: 96px;
}
body#top .c-section.c-section--bg .c-section__more {
  top: 12px;
  right: 14px;
}
@media (max-width: 768px) {
  body#top .c-section.c-section--bg .c-section__heading {
    font-size: 15px;
    padding-left: 74px;
    padding-right: 74px;
  }
  body#top .c-section.c-section--bg .c-section__more {
    top: 10px;
    right: 8px;
  }
}


/* 2026-07-29 小菅リクエストにより追加(色の見直し2回目・スマホの縦幅修正)
   1) ページ背景を #FFFEE8 から #FDF792 へ。#FFFEE8 は #FFFECC との差が小さすぎて
      かえって違和感が出たため、#FBEF58 と #FFFECC のちょうど中間の色に置き換える。
      結果、面(背景)より枠まわり(ヘッダー・メニュー・帯)のほうが明るいという関係になる。
   2) インフォメーションの題字が、スマホで「部門から探す」のバーより縦に長くなっていた問題の修正。
      原因は、部門バーが min-width:768px のときだけ 16px/余白10px の指定(.dept-header-bar)を受け、
      スマホでは13px/余白6px・行間2に戻るのに対し、題字側は 32px 固定の行間を指定していたため。
      スマホでは部門バーとまったく同じ 13px/行間2/上下余白6px に揃える。 */
body {
  background-color: #FDF792 !important;
}
.l-sub-footer,
.l-footer,
.c-section.p-footer-contact {
  background-color: #FDF792;
}
@media (max-width: 767px) {
  body#top .c-section.c-section--bg .c-section__heading {
    font-size: 13px;
    line-height: 2;
    padding: 6px 74px;
  }
  body#top .c-section.c-section--bg .c-section__more {
    top: 9px;
    right: 8px;
  }
}


/* 2026-07-29 小菅リクエストにより追加(前項の訂正): 適用先を逆にする。
   直前の対応では「背景を#FDF792、枠まわりを#FFFECC」としたが、本来の意図は逆で、
   背景は#FFFEE8のままにし、これまで#FFFECCを使っていた箇所(ヘッダー・メニュー・キャッチ帯)を
   #FDF792にするというもの。これにより、面(背景)より枠まわりのほうが濃いという関係に戻る。 */
body {
  background-color: #FFFEE8 !important;
}
.l-sub-footer,
.l-footer,
.c-section.p-footer-contact {
  background-color: #FFFEE8;
}
.js-header.l-header {
  background-color: rgba(253, 247, 146, 0.94);
}
.l-side nav,
.l-drawer {
  background-color: #FDF792;
}
body#top .p-top-brand .p-brand {
  background-color: #FDF792;
}


/* 2026-07-30 小菅リクエストにより追加: ロゴの黄色がヘッダーに埋もれる問題が軽度に再発したため、
   #FDF792 をもう少し薄くして #FEFAAA にする(#FDF792 から #FFFECC への道のりの四割ほどの位置)。
   さらに薄くしたい場合の次の候補は #FEFCC0 → #FFFECC 。 */
.js-header.l-header {
  background-color: rgba(254, 250, 170, 0.94);
}
.l-side nav,
.l-drawer {
  background-color: #FEFAAA;
}
body#top .p-top-brand .p-brand {
  background-color: #FEFAAA;
}


/* 2026-07-30 小菅リクエストにより追加: 全ページ共通のフッターナビの体裁。
   PCは3カラム、スマホは縦積み。見出しは下線(#E0A420)のみで、面の色は足さない。 */
.r-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  max-width: 1230px;
  margin: 0 auto;
  padding: 26px 15px 6px;
  text-align: left;
}
.r-footer-nav__group {
  flex: 1 1 200px;
  min-width: 170px;
}
.r-footer-nav__head {
  margin: 0 0 10px;
  padding: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #3A2B00;
  border-bottom: 2px solid #E0A420;
}
.r-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.r-footer-nav__list li {
  margin: 0 0 6px;
}
.r-footer-nav__list a {
  font-size: 13px;
  line-height: 1.7;
  color: #5A4400;
  text-decoration: none;
}
.r-footer-nav__list a::before {
  content: "・";
  color: #E0A420;
}
.r-footer-nav__list a:hover {
  color: #3A2B00;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .r-footer-nav {
    gap: 18px 0;
    padding: 20px 15px 4px;
  }
  .r-footer-nav__group {
    flex: 1 1 100%;
  }
}


/* 2026-07-30 小菅リクエストにより追加: フッター最下部のアクセスカウンター(today/yesterday/total)を非表示にする。
   テンプレートのHTMLは残したままCSSで隠しているだけなので、必要になれば戻せる。 */
.l-footer .counter_area {
  display: none !important;
}


/* 2026-07-30 小菅リクエストにより追加: スマホでキャッチコビー帯が固定ヘッダーに
   寄りすぎていたため、上に余白を取って少し下へ移動する。 */
@media (max-width: 768px) {
  body#top .p-top-brand {
    margin-top: 26px;
  }
}


/* 2026-07-30 小菅リクエストにより追加: キャッチコビーを明朝体にする。
   ウェブフォントは使わず、端末標準の明朝体(iPhone/Mac=ヒラギノ明朝、Windows=游明朝、Android=Noto Serif)を使うことで
   読み込みコストゼロ・表示の遅延なしにしている。ボタン・見出し・本文は角ゴシックのままで、
   キャッチコビーだけが「語りかけている言葉」として立つようにすることが目的。
   明朝体は線が細く小さく見えるため、字間と大きさを少し広げている。 */
body#top .p-top-brand .p-brand {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", YuMincho, "游明朝", "Noto Serif JP", "Noto Serif CJK JP", serif;
  -webkit-font-smoothing: antialiased;
}
body#top .p-top-brand .p-brand::before {
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #7A5E00;
}
body#top .p-top-brand .p-brand__description::before {
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 0.06em;
  color: #3A2B00;
}
@media (max-width: 768px) {
  body#top .p-top-brand .p-brand::before {
    font-size: 12px;
    letter-spacing: 0.18em;
  }
  body#top .p-top-brand .p-brand__description::before {
    font-size: 19px;
  }
}


/* 2026-07-30 小菅リクエストにより追加: スマホで「名古屋のペットショップ　リミックス」が
   横に入りきらず2行に折り返されていた問題の対策。
   全角17文字 × 19px × 字間0.06em = 約342px で、帯の内側の幅(390px端末で336px)をわずかに超えていた。
   文字を小さく固定するのでなく、画面幅に応じて入る大きさまで自動で縮む式(min関数)にし、
   さらに nowrap で必ず1行に収まることを保証する。字間も0.06em→0.02emに縮めて余裕を作る。
   検算: 320px端末でも収まる(必要255px / 使える266px)。 */
@media (max-width: 768px) {
  body#top .p-top-brand .p-brand__description::before {
    font-size: 17px;
    font-size: min(19px, 4.6vw);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}


/* 2026-07-30 小菅リクエストにより追加: 「もっと見る」の位置をスマホでもPCと同じ題字バーの中へ。
   原因は、テンプレート側で .c-section__more に position:absolute が当たるのが
   @media (min-width: 769px) の中だけで、スマホでは通常の流れの要素(margin-top:30px)として
   セクションの一番下に置かれていたため。(43)で top/right を指定していたが position が static のため効いていなかった。
   スマホでも absolute にし、上下の余白指定も打ち消す。あわせて題字の左右余白を92pxに広げ、
   中央揃えの題字がリンク(幅80px+右8px)にぶつからないようにする。 */
@media (max-width: 768px) {
  body#top .c-section.c-section--bg .c-section__heading {
    padding-left: 92px;
    padding-right: 92px;
  }
  body#top .c-section.c-section--bg .c-section__more {
    position: absolute;
    top: 10px;
    right: 8px;
    margin: 0;
  }
}


/* 2026-07-30 小菅リクエストにより追加(前項の補正): スマホの「もっと見る」が題字バーから上と右へ
   はみ出していた問題の修正。
   原因は、位置の基準がセクション(.c-section--bg)であり、そのセクションがスマホでは padding:16px 15px を
   持っているため。題字バーはその内側にあり、上に16px・右に15pxずれた位置から座標を数えていた。
   iframeを390px幅にして実測した値(セクション上端250px / 題字266〜304px / もっと見る高さ19px)から、
   上=16+(38-19)/2=26px、右=15+10=25px と算出して指定する。 */
@media (max-width: 768px) {
  body#top .c-section.c-section--bg .c-section__more {
    top: 26px;
    right: 25px;
  }
}


/* ============================================================
   2026-07-30 小菅リクエストにより追加: トップページ下部の共通カードモジュール
   仕様書: Web戦略策定/260730_トップページ下部カード共通仕様.md
   ・写真/アイコン枠は 2:1 に固定。元画像の縦横比に関係なく枠は崩れない
   ・文字帯は高さ固定(スマホ36px / PC44px)。見出し1行のみ。はみ出しは「…」で省略
   ・カード幅は auto-fill で固定(スマホ約175px=2列 / PC約210px=4列)。枚数で伸び縮みしない
   ・結果としてカード外形は約1:1.41=白銀比に収まる
   ============================================================ */
.r-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 12px;
}
.r-card {
  display: block;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: #3A2B00 !important;
}
.r-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.r-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* アイコン型・ロゴ型: 枠を塗って中央に配置する。高さだけ指定するので縦横比が違っても崩れない */
.r-card__media--tile {
  display: flex;
  align-items: center;
  justify-content: center;
}
.r-card__media--tile img {
  width: auto;
  height: 58%;
  object-fit: contain;
}
.r-card__body {
  display: block;
  height: 36px;
  padding: 0 8px;
  overflow: hidden;
}
.r-card__title {
  display: block;
  color: #3A2B00 !important;
  font-size: 13px;
  font-weight: bold;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 769px) {
  .r-grid { grid-template-columns: repeat(auto-fill, 210px); }
  .r-card__body { height: 44px; padding: 0 10px; }
  .r-card__title { font-size: 14px; line-height: 44px; }
}

/* === フリーページ共通 読みやすさ部品 v1 (2026-07-30) === */
/* 全ページ共通の基準。スマホで文字がのっぺりしないための部品。
   r-photo  横幅いっぱいの写真 / r-title・r-subtitle  ページ先頭の見出し
   r-bar    セクション見出しバー / r-lead  リード文(中央揃え)
   r-dl     定義表(項目名+内容の2列。スマホでも2列を維持)
   r-list   箇条書き / r-note  注記ボックス / r-dept  部門カラーのブロック
   r-tel    電話番号(タップで発信) / r-linkout  外部リンク            */
.l-main .wysiwyg :is(p,h2,h3,h4), .l-main .wysiwyg li { line-height: 1.9; }
.wysiwyg img.r-photo { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 10px; margin: 0 0 14px; }
.wysiwyg p.r-title { text-align: center; font-size: 19px; font-weight: bold; letter-spacing: 0.06em; line-height: 1.5; color: #3A2B00; margin: 16px 0 4px; }
.wysiwyg p.r-subtitle { text-align: center; font-size: 13px; letter-spacing: 0.06em; line-height: 1.7; color: #7A5E00; margin: 0 0 18px; }
.wysiwyg p.r-lead { text-align: center; font-size: 15px; line-height: 2; color: #3A2B00; margin: 0 0 18px; }
.wysiwyg :is(p,h3).r-bar { background-color: #E0A420; color: #3A2B00; font-size: 14px; font-weight: bold; letter-spacing: 0.06em; line-height: 1.5; padding: 7px 12px; border-radius: 6px; margin: 26px 0 12px; }
.wysiwyg table.r-dl { width: 100%; max-width: 640px; margin: 0 0 16px; border-collapse: collapse; border-top: 1px solid #EBDC96; }
.wysiwyg .r-dl th { width: 84px; background-color: #FEFAAA; color: #3A2B00; font-size: 13px; font-weight: bold; text-align: left; vertical-align: top; line-height: 1.6; white-space: normal; padding: 9px 8px; border-bottom: 1px solid #EBDC96; }
.wysiwyg .r-dl td { background-color: #ffffff; color: #3A2B00; font-size: 14px; line-height: 1.8; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid #EBDC96; }
.wysiwyg .r-dl--wide th { width: 116px; }
.wysiwyg ul.r-list { list-style: none; padding: 0; margin: 0 0 16px; }
.wysiwyg ul.r-list li { position: relative; list-style: none; padding: 0 0 0 20px; margin: 0 0 8px; font-size: 14px; line-height: 1.8; }
.wysiwyg ul.r-list li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background-color: #E0A420; }
.wysiwyg p.r-note { background-color: #FEFAAA; border-left: 4px solid #E0A420; color: #5A4400; font-size: 13px; line-height: 1.8; padding: 10px 12px; margin: 0 0 16px; border-radius: 0 6px 6px 0; }
.wysiwyg p.r-note--alert { background-color: #FFDEDE; border-left-color: #BF3C3C; color: #7A2222; }
.wysiwyg p.r-dept { border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; font-size: 13px; line-height: 1.8; color: #3A2B00; }
.wysiwyg p.r-dept strong { font-size: 14px; letter-spacing: 0.04em; }
.wysiwyg p.r-dept--aqua { background-color: #DAF9CD; }
.wysiwyg p.r-dept--marin { background-color: #CCD7FF; }
.wysiwyg p.r-dept--peponi { background-color: #FFEACC; }
.wysiwyg p.r-dept--peqet { background-color: #FFDEDE; }
/* 部門をまたぐ内容には部門色を使わず、うすい黄にする */
.wysiwyg p.r-dept--all { background-color: #FEFAAA; }
.wysiwyg a.r-tel { display: inline-block; background-color: #FEFAAA; border: 1px solid #E0A420; border-radius: 5px; color: #3A2B00; font-size: 15px; font-weight: bold; letter-spacing: 0.02em; text-decoration: none; padding: 3px 10px; margin: 2px 0; }
.wysiwyg a.r-linkout { display: inline-block; font-size: 13px; color: #5A4400; text-decoration: underline; margin: 0 0 4px; }
.wysiwyg p.r-map { margin: 0 0 8px; }
.wysiwyg p.r-map iframe { display: block; width: 100%; max-width: 640px; height: 320px; border: 0; border-radius: 10px; }
@media (min-width: 769px) {
  .wysiwyg p.r-title { font-size: 22px; }
  .wysiwyg p.r-subtitle { font-size: 14px; }
  .wysiwyg :is(p,h3).r-bar { font-size: 15px; padding: 8px 14px; }
  .wysiwyg .r-dl th { width: 130px; font-size: 14px; padding: 11px 12px; }
  .wysiwyg .r-dl td { font-size: 15px; padding: 11px 14px; }
  .wysiwyg .r-dl--wide th { width: 170px; }
  .wysiwyg ul.r-list li { font-size: 15px; }
  .wysiwyg p.r-dept { font-size: 14px; }
  .wysiwyg p.r-dept strong { font-size: 15px; }
  .wysiwyg p.r-title, .wysiwyg p.r-subtitle, .wysiwyg p.r-lead, .wysiwyg :is(p,h3).r-bar, .wysiwyg p.r-note, .wysiwyg p.r-dept, .wysiwyg ul.r-list { max-width: 640px; }
}

/* === お問い合わせページ v1 (2026-07-30) === */
body#contact .l-main .p-form, body#contact .r-contact-guide { max-width: 640px; }
body#contact .r-contact-guide { margin: 0 0 30px; }
body#contact .p-form__message { font-size: 14px; line-height: 1.9; color: #3A2B00; }
body#contact .contact_area { margin: 0 0 16px; }
body#contact .contact_area > br { display: none; }
body#contact .contact_area label { display: block; font-size: 14px; font-weight: bold; letter-spacing: 0.04em; color: #3A2B00; margin: 0 0 5px; }
body#contact .contact_area label .requier { font-size: 0; letter-spacing: 0; }
body#contact .contact_area label .requier::after { content: "（必須）"; font-size: 12px; font-weight: bold; letter-spacing: 0.04em; color: #BF3C3C; }
body#contact .contact_area input[type="text"], body#contact .contact_area input[type="email"], body#contact .contact_area input[type="tel"], body#contact .contact_area select, body#contact .contact_area textarea {
  width: 100%; max-width: 640px; box-sizing: border-box; background-color: #ffffff; border: 1px solid #EBDC96; border-radius: 6px;
  color: #3A2B00; font-size: 16px; line-height: 1.6; padding: 10px 12px; }
body#contact .contact_area textarea { min-height: 180px; }
/* selectの幅はインラインで指定されるため上書きする */
body#contact .contact_area select.frm_text, body#contact .contact_area input.frm_text, body#contact .contact_area input[class^="contact_"] { width: 100% !important; }
body#contact .p-form__actions { text-align: center; max-width: 640px; }
body#contact .p-form__actions .c-button { background-color: #E0A420; border-color: #E0A420; color: #3A2B00; font-weight: bold; letter-spacing: 0.06em; }
body#contact .p-form__note { background-color: #FEFAAA; border-radius: 8px; padding: 14px 16px; margin-top: 26px; max-width: 640px; }
body#contact .p-form__note h3 { font-size: 14px; font-weight: bold; color: #3A2B00; margin: 0 0 6px; }
body#contact .p-form__note p { font-size: 13px; line-height: 1.8; color: #5A4400; }

/* === 読みやすさ部品 追加 v2 (2026-07-30) 小見出し・手順・ボタン === */
.wysiwyg :is(p,h4).r-sub { max-width: 640px; font-size: 14px; font-weight: bold; letter-spacing: 0.04em; color: #3A2B00; border-bottom: 2px solid #FBEF58; padding: 0 0 5px; margin: 20px 0 10px; }
.wysiwyg ol.r-steps { list-style: none; padding: 0; margin: 0 0 16px; max-width: 640px; counter-reset: rstep; }
.wysiwyg ol.r-steps li { position: relative; list-style: none; counter-increment: rstep; padding: 0 0 0 32px; margin: 0 0 10px; font-size: 14px; line-height: 1.8; }
.wysiwyg ol.r-steps li::before { content: counter(rstep); position: absolute; left: 0; top: 0.18em; width: 22px; height: 22px; border-radius: 50%; background-color: #E0A420; color: #3A2B00; font-size: 12px; font-weight: bold; line-height: 22px; text-align: center; }
.wysiwyg a.r-btn { display: block; max-width: 640px; background-color: #E0A420; color: #3A2B00; font-size: 15px; font-weight: bold; letter-spacing: 0.06em; text-align: center; text-decoration: none; padding: 14px 12px; border-radius: 8px; margin: 0 0 14px; }
@media (min-width: 769px) {
  .wysiwyg :is(p,h4).r-sub { font-size: 15px; }
  .wysiwyg ol.r-steps li { font-size: 15px; }
  .wysiwyg a.r-btn { font-size: 16px; }
}

/* === 各ページ最上部の余白と題名 v1 (2026-07-30) === */
/* 固定ヘッダーは半透明だと本文が透けて題名が読みにくいので不透明にする */
.js-header.l-header { background-color: #FEFAAA; }
/* トップページ以外は本文の頭に余白を取り、ページ題名を見出しとして整える */
body:not(#top) .l-main .c-section { padding-top: 26px; }
body:not(#top) .l-main .c-section__heading {
  max-width: 640px; color: #3A2B00; font-size: 20px; font-weight: bold; letter-spacing: 0.06em; line-height: 1.5;
  text-align: center; padding: 0 0 12px; margin: 0 0 22px; border-bottom: 1px solid #EBDC96; }
@media (min-width: 769px) {
  body:not(#top) .l-main .c-section { padding-top: 40px; }
  body:not(#top) .l-main .c-section__heading { font-size: 26px; }
}

/* === リンク・ボタン・ページャの色をそろえる v1 (2026-07-30) === */
/* テンプレート既定の水色(#8DC5C6)とブラウザ既定の青、灰色を、サイトの配色に置き換える */
a { color: #5A4400; }
a:hover { color: #8A6A00; }
.wysiwyg a { color: #5A4400; }
.wysiwyg a:hover { color: #8A6A00; }
/* 記事タイトルのリンクは見出しとして扱う */
.c-chapter__heading a, .p-top-info-list__link, .p-calendar-list__link, .p-minne-item__title, .p-reservation-header__tel a { color: #3A2B00; }
.c-chapter__heading a:hover, .p-top-info-list__link:hover, .p-calendar-list__link:hover, .p-minne-item__title:hover { color: #8A6A00; }
.c-chapter__heading a::after { background-color: #E0A420; }
/* ボタン */
.c-button, .p-form__actions input[type="submit"] { background-color: #E0A420; color: #3A2B00; }
.c-button:hover, .p-form__actions input[type="submit"]:hover { background-color: #FFDA00; color: #3A2B00; }
/* ページャ */
.p-pager a { color: #5A4400; }
.p-pager a.chk { color: #3A2B00; font-weight: bold; }
.p-pager a:hover { border-color: #E0A420; color: #3A2B00; }
/* 入力中の枠と選択済みの丸 */
.p-form input[type="text"]:focus, .p-form input[type="tel"]:focus, .p-form input[type="email"]:focus, .p-form input[type="password"]:focus, .p-form input[type="number"]:focus, .p-form textarea:focus, .p-form select:focus { border-color: #E0A420; -webkit-box-shadow: inset 0 -2px 0 #E0A420; box-shadow: inset 0 -2px 0 #E0A420; }
.p-form .radio input:checked + label::before, .p-form .checkbox input:checked + label::before { border-color: transparent; background-color: #E0A420; }
/* カレンダーのラベル */
.p-calendar-label { background-color: #E0A420; color: #3A2B00; }

/* === 本文の文字色から灰色をなくす v1 (2026-07-30) === */
/* テンプレート既定の #777(灰色)をこい茶色に置き換える。お知らせ本文・ブログ本文・フリーページ本文が対象 */
.c-article__content { color: #3A2B00; }
.p-photo-list__title { color: #3A2B00; }
.p-top-slider__text { color: #3A2B00; }
.p-about__table th { color: #3A2B00; }
.p-calendar-list__date { color: #5A4400; }
.p-coupon__detail dt { color: #5A4400; }
.p-print-link { color: #5A4400; }
.p-form .contact_area > label, .p-form .reservation_area > label { color: #3A2B00; }
.p-form .radio label, .p-form .checkbox label { color: #3A2B00; }
.p-form__message { color: #3A2B00; }
.p-form__note { color: #5A4400; }

/* === ボタンの色を見出しバーと区別する v1 (2026-07-30) === */
/* 見出しバーと同じ #E0A420 だと題字と区別できないため、ボタンはこい茶色の面に明るい黄の文字にする */
.wysiwyg a.r-btn { background-color: #3A2B00; color: #FFDA00; }
.wysiwyg a.r-btn::after { content: " \2192"; }
.wysiwyg a.r-btn:hover { background-color: #5A4400; color: #FFDA00; }
.c-button, .p-form__actions input[type="submit"], body#contact .p-form__actions .c-button { background-color: #3A2B00; color: #FFDA00; }
.c-button:hover, .p-form__actions input[type="submit"]:hover, body#contact .p-form__actions .c-button:hover { background-color: #5A4400; color: #FFDA00; }

/* === ブログ・SNSアイコン: ラベル付き(縦長)の指定 v1 (2026-07-30) === */
/* 用品・生体・水草のラベルが付いたアイコンは縦長。正方形アイコンと同じ行で中央にそろえる */
.dept-icons { align-items: center !important; flex-wrap: wrap !important; }
.dept-icon-tall { width: 30px; height: 42px; display: block; object-fit: contain; }
@media (min-width: 768px) {
  .dept-icon-tall { width: 36px !important; height: 50px !important; }
}

/* 文中のリンクは行の途中で自然に折り返す */
.wysiwyg li a.r-linkout, .wysiwyg p.r-note a.r-linkout { display: inline; margin: 0; }

/* === 注意事項(些末な但し書き)をページ末尾にまとめる部品 v1 (2026-07-30) === */
/* 判断に関わらない細かい但し書きは、本文から抜いてページの最後にこの形でまとめる */
.wysiwyg p.r-fine-head { max-width: 640px; font-size: 13px; font-weight: bold; letter-spacing: 0.04em; color: #5A4400; border-top: 1px solid #EBDC96; padding: 14px 0 0; margin: 30px 0 8px; }
.wysiwyg ul.r-fine { max-width: 640px; list-style: none; padding: 0; margin: 0 0 10px; }
.wysiwyg ul.r-fine li { position: relative; list-style: none; padding: 0 0 0 17px; margin: 0 0 6px; font-size: 12.5px; line-height: 1.8; color: #5A4400; }
.wysiwyg ul.r-fine li::before { content: "\203B"; position: absolute; left: 0; top: 0.1em; color: #8A7330; }
@media (min-width: 769px) {
  .wysiwyg ul.r-fine li { font-size: 13px; }
}

/* === 規約類の小さなリンク行(トップページ最下部) v1 (2026-07-30) === */
/* 見る人が極端に少ない規約類は、サイドバーもフッターも使わず、トップページの最下部にごく小さく置く */
.wysiwyg p.r-policy-row { border-top: 1px solid #EBDC96; text-align: center; font-size: 11px; line-height: 2.1; letter-spacing: 0.02em; color: #8A7330; padding: 12px 0 0; margin: 30px 0 0; }
.wysiwyg p.r-policy-row a { color: #8A7330; text-decoration: none; }
.wysiwyg p.r-policy-row a:hover { color: #5A4400; text-decoration: underline; }
@media (min-width: 769px) { .wysiwyg p.r-policy-row { font-size: 12px; } }

/* === メニューを8項目に絞る v1 (2026-07-30) === */
/* トップページはロゴを押せば戻れるため不要。RSSフィードとモバイルサイト(QR)も出さない */
.p-global-nav li.navi_top { display: none !important; }
.p-global-nav li.shop_rss { display: none !important; }
.p-global-nav li.p-global-nav__qr { display: none !important; }
ul.p-global-nav + ul.p-global-nav { display: none !important; }
/* メニュー末尾の区切り線(2番目のリストとの境目)も不要になるので消す */
.l-side nav ul.p-global-nav::after, .l-drawer ul.p-global-nav::after { display: none !important; }

/* === フッターは通信販売とお問い合わせの2ボタンだけにする v1 (2026-07-30) === */
.r-footer-btns { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1230px; margin: 0 auto; padding: 26px 15px 8px; }
.r-footer-btns a { flex: 1 1 240px; background-color: #3A2B00; color: #FFDA00; font-size: 15px; font-weight: bold; letter-spacing: 0.06em; text-align: center; text-decoration: none; padding: 14px 12px; border-radius: 8px; }
.r-footer-btns a:hover { background-color: #5A4400; color: #FFDA00; }
.r-footer-btns a::after { content: " \2192"; }
@media (min-width: 769px) { .r-footer-btns { max-width: 700px; } .r-footer-btns a { font-size: 16px; } }

/* 長い語句や記号の連続で横スクロールが出ないようにする */
.wysiwyg li, .wysiwyg .r-dl th, .wysiwyg .r-dl td { overflow-wrap: anywhere; }
/* フリーページの部品は幅が上限つきなので、和文の禁則で数px出る分の横スクロールは出さない(ブログ・お知らせは対象外) */
body#free .wysiwyg { overflow-x: hidden; }

/* === 研究機器販売事業(MEITO system)専用の配色 v1 (2026-07-30) === */
/* 小売とは客層がまったく異なるため、この事業のページだけ白と青を基調にする。
   青はMEITO systemのロゴの青(#3030D0)を起点に、暗/メイン/淡/最淡の4段階を新設した。
   ページ本文を <div class="r-sci"> で包むと、そのページ全体が白と青に切り替わる。 */
/* --- ページ全体(ヘッダー・サイドバー・フッター) --- */
body:has(.r-sci) { background-color: #ffffff !important; }
body:has(.r-sci) .js-header.l-header { background-color: rgba(237,238,252,0.95); }
body:has(.r-sci) .l-side nav, body:has(.r-sci) .l-drawer { background-color: #EDEEFC; color: #1A2032; }
body:has(.r-sci) .p-global-nav__item { color: #1E2382; }
body:has(.r-sci) .l-sub-footer, body:has(.r-sci) .l-footer, body:has(.r-sci) .c-section.p-footer-contact { background-color: #ffffff; }
body:has(.r-sci) .l-footer, body:has(.r-sci) .l-footer p, body:has(.r-sci) .l-footer a { color: #45507A; }
body:has(.r-sci) .l-footer__pagetop a { background-color: #E6E7FB; color: #1E2382; }
body:has(.r-sci) .r-footer-btns a { background-color: #1E2382; color: #ffffff; }
body:has(.r-sci) .r-footer-btns a:hover { background-color: #3030D0; color: #ffffff; }
body:has(.r-sci) .c-section__heading { color: #1A2032; }
body:has(.r-sci) .c-article__content { color: #1A2032; }
/* --- 本文の部品 --- */
.r-sci, .r-sci p, .r-sci li, .r-sci td, .r-sci th { color: #1A2032; }
.r-sci p.r-lead { color: #1A2032; }
.r-sci p.r-title { color: #1A2032; }
.r-sci p.r-subtitle { color: #45507A; }
.r-sci :is(p,h3).r-bar { background-color: #3030D0; color: #ffffff; }
.r-sci :is(p,h4).r-sub { color: #1E2382; border-bottom-color: #9FA3E6; }
.r-sci table.r-dl { border-top-color: #C7CAF0; }
.r-sci .r-dl th { background-color: #E6E7FB; color: #1E2382; border-bottom-color: #C7CAF0; }
.r-sci .r-dl td { background-color: #ffffff; color: #1A2032; border-bottom-color: #C7CAF0; }
.r-sci ul.r-list li::before { background-color: #3030D0; }
.r-sci ol.r-steps li::before { background-color: #3030D0; color: #ffffff; }
.r-sci p.r-note { background-color: #E6E7FB; border-left-color: #3030D0; color: #1E2382; }
.r-sci p.r-note--alert { background-color: #FDE7E7; border-left-color: #C0392B; color: #8E2A20; }
.r-sci a { color: #2A3391; }
.r-sci a:hover { color: #1E2382; }
.r-sci a.r-linkout { color: #2A3391; }
.r-sci a.r-btn { background-color: #1E2382; color: #ffffff; }
.r-sci a.r-btn:hover { background-color: #3030D0; color: #ffffff; }
.r-sci a.r-tel { background-color: #E6E7FB; border-color: #3030D0; color: #1E2382; }
.r-sci p.r-fine-head { color: #45507A; border-top-color: #C7CAF0; }
.r-sci ul.r-fine li { color: #45507A; }
.r-sci ul.r-fine li::before { color: #6B76A8; }
.r-sci img.r-photo { border: 1px solid #C7CAF0; }


/* === MEITO system 配色の取りこぼし修正 v1 (2026-07-30) === */
body:has(.r-sci) h2.c-section__heading { color:#1A2032 !important; border-bottom-color:#C7CAF0 !important; }
body:has(.r-sci) .l-footer__inner,
body:has(.r-sci) .l-footer__pagetop,
body:has(.r-sci) .counter_area,
body:has(.r-sci) .p-counter,
body:has(.r-sci) .p-counter__unit,
body:has(.r-sci) .p-counter__label,
body:has(.r-sci) .p-counter__value,
body:has(.r-sci) .p-top-info-list__link { color:#45507A !important; }

/* === MEITO system 内の目次 v1 (2026-07-30) === */
.wysiwyg ul.r-sci-nav { display:flex; flex-wrap:wrap; gap:6px; max-width:640px; list-style:none; padding:0; margin:0 0 22px; }
.wysiwyg ul.r-sci-nav li { list-style:none; margin:0; padding:0; }
.wysiwyg ul.r-sci-nav li::before { content:none; display:none; }
.wysiwyg ul.r-sci-nav a, .wysiwyg ul.r-sci-nav strong { display:block; border-radius:999px; font-size:12.5px; font-weight:bold; line-height:1.4; text-decoration:none; padding:6px 12px; }
.wysiwyg ul.r-sci-nav a { background-color:#E6E7FB; border:1px solid #C7CAF0; color:#1E2382; }
.wysiwyg ul.r-sci-nav a:hover { background-color:#D6D8F7; color:#1E2382; }
.wysiwyg ul.r-sci-nav strong { background-color:#1E2382; border:1px solid #1E2382; color:#ffffff; }
@media (min-width:769px){ .wysiwyg ul.r-sci-nav a, .wysiwyg ul.r-sci-nav strong { font-size:13.5px; padding:7px 15px; } }

/* === 価格表の品名 v1 (2026-07-30) === */
.wysiwyg p.r-item { max-width:640px; font-size:14px; font-weight:bold; letter-spacing:.02em; line-height:1.6; color:#3A2B00; margin:18px 0 6px; }
.wysiwyg p.r-item + table.r-dl { margin-bottom:6px; }
.wysiwyg p.r-itemnote { max-width:640px; font-size:12.5px; line-height:1.8; color:#5A4400; margin:0 0 6px; }
.r-sci p.r-item { color:#1E2382; }
.r-sci p.r-itemnote { color:#45507A; }
@media (min-width:769px){ .wysiwyg p.r-item { font-size:15px } .wysiwyg p.r-itemnote { font-size:13px } }

/* === ロゴ画像・小さめ写真 v1 (2026-07-30) === */
.wysiwyg img.r-logo { display:block; width:100%; max-width:280px; height:auto; margin:2px auto 12px; }
.wysiwyg img.r-photo--sm { max-width:500px; }
.wysiwyg p.r-caption { max-width:640px; font-size:12.5px; line-height:1.7; color:#5A4400; margin:-8px 0 16px; }
.r-sci p.r-caption { color:#45507A; }
@media (min-width:769px){ .wysiwyg img.r-logo { max-width:320px } }

/* === 価格が数字の途中で折れないようにする v1 (2026-07-30) === */
.wysiwyg .r-dl th, .wysiwyg .r-dl td { overflow-wrap: break-word; }
.wysiwyg .r-dl td { word-break: normal; }

/* === MEITO system: 単独サイト風レイアウト v1 (2026-07-30) === */
.r-sci-head, .r-sci-back { display:none; }
body:has(.r-sci) .l-header__brand,
body:has(.r-sci) .l-header-button,
body:has(.r-sci) .l-header-social,
body:has(.r-sci) .l-drawer,
body:has(.r-sci) .l-side,
body:has(.r-sci) .l-sub-footer .r-footer-btns,
body:has(.r-sci) .l-sub-footer .js-append-contact,
body:has(.r-sci) .counter_area,
body:has(.r-sci) .l-footer__pagetop { display:none !important; }
body:has(.r-sci) .r-sci-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; padding:4px 0; }
body:has(.r-sci) .r-sci-head__logo { display:block; line-height:0; }
body:has(.r-sci) .r-sci-head__logo img { display:block; width:auto; height:26px; }
body:has(.r-sci) .r-sci-head__sub { font-size:12px; letter-spacing:.04em; color:#45507A; }
body:has(.r-sci) .js-header.l-header { background-color:#ffffff; border-bottom:1px solid #C7CAF0; }
body:has(.r-sci) .l-header__inner { padding-top:10px; padding-bottom:10px; }
@media (min-width:769px){ body:has(.r-sci) .r-sci-head__logo img { height:32px } body:has(.r-sci) .r-sci-head__sub { font-size:13px } }
body:has(.r-sci) .c-container--flex { display:block; }
body:has(.r-sci) .l-main { width:100%; max-width:900px; margin:0 auto; }
@media (min-width:769px){
  body:has(.r-sci) .wysiwyg p.r-title, body:has(.r-sci) .wysiwyg p.r-subtitle,
  body:has(.r-sci) .wysiwyg p.r-lead, body:has(.r-sci) .wysiwyg :is(p,h3).r-bar,
  body:has(.r-sci) .wysiwyg :is(p,h4).r-sub, body:has(.r-sci) .wysiwyg p.r-note,
  body:has(.r-sci) .wysiwyg p.r-item, body:has(.r-sci) .wysiwyg p.r-itemnote,
  body:has(.r-sci) .wysiwyg p.r-caption, body:has(.r-sci) .wysiwyg p.r-fine-head,
  body:has(.r-sci) .wysiwyg ul.r-list, body:has(.r-sci) .wysiwyg ul.r-fine,
  body:has(.r-sci) .wysiwyg ul.r-sci-nav, body:has(.r-sci) .wysiwyg ol.r-steps,
  body:has(.r-sci) .wysiwyg table.r-dl, body:has(.r-sci) .wysiwyg a.r-btn { max-width:900px; }
  body:has(.r-sci) .wysiwyg .r-dl--wide th { width:210px; }
}
body:has(.r-sci) .r-sci-back { display:block; text-align:center; padding:22px 15px 4px; }
body:has(.r-sci) .r-sci-back a { font-size:12px; line-height:1.9; color:#45507A; text-decoration:underline; }
body:has(.r-sci) .l-footer__inner { padding-top:10px; }
body:has(.r-sci) .copyright, body:has(.r-sci) .powered { font-size:11px; color:#8A93B5; }

/* === MEITO: フッター周りの余白を詰める v1 === */
body:has(.r-sci) .l-sub-footer { padding:6px 0 0 !important; }
body:has(.r-sci) .l-main { margin-bottom:10px; }

/* === MEITO: PCでの読みやすさ調整 v1 (2026-07-30) === */
@media (min-width:769px){
  /* 価格表は幅を絞る。右側が間のびするため */
  body:has(.r-sci) .wysiwyg table.r-dl { max-width:560px; }
  body:has(.r-sci) .wysiwyg table.r-dl--wide { max-width:900px; }
  /* 900px幅でも一行が長くなりすぎないよう、文字を少し大きく */
  body:has(.r-sci) .wysiwyg :is(p,h2,h3,h4), body:has(.r-sci) .wysiwyg li { font-size:16px; line-height:2.05; }
  body:has(.r-sci) .wysiwyg p.r-itemnote { font-size:14px; line-height:1.95; }
  body:has(.r-sci) .wysiwyg p.r-caption { font-size:13.5px; }
  body:has(.r-sci) .wysiwyg ul.r-fine li { font-size:13.5px; }
  body:has(.r-sci) .wysiwyg ul.r-sci-nav a, body:has(.r-sci) .wysiwyg ul.r-sci-nav strong { font-size:14px; }
  body:has(.r-sci) .wysiwyg :is(p,h3).r-bar { font-size:16px; }
  body:has(.r-sci) .wysiwyg :is(p,h4).r-sub { font-size:15px; }
}

/* === MEITO: 目次をヘッダーに固定する v1 (2026-07-30) === */
/* ヘッダーは常に見えるようにする（headroom の退避を止める） */
body:has(.r-sci) .js-header.l-header { transform:none !important; position:sticky; top:0; z-index:100; }
body:has(.r-sci) .r-sci-head { display:block; width:100%; padding:8px 0 9px; }
body:has(.r-sci) .r-sci-head__brand { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 8px; }
body:has(.r-sci) .r-sci-head__logo { display:block; line-height:0; }
body:has(.r-sci) .r-sci-head__logo img { display:block; width:auto; height:24px; }
body:has(.r-sci) .r-sci-head__sub { font-size:12px; letter-spacing:.04em; color:#45507A; }
/* ヘッダー内の目次チップ */
body:has(.r-sci) ul.r-sci-nav--head { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
body:has(.r-sci) ul.r-sci-nav--head li { list-style:none; margin:0; padding:0; }
body:has(.r-sci) ul.r-sci-nav--head li::before { content:none; }
body:has(.r-sci) ul.r-sci-nav--head a { display:block; background-color:#E6E7FB; border:1px solid #C7CAF0; border-radius:999px; color:#1E2382; font-size:12px; font-weight:bold; line-height:1.4; text-decoration:none; white-space:nowrap; padding:5px 11px; }
body:has(.r-sci) ul.r-sci-nav--head a:hover { background-color:#D6D8F7; color:#1E2382; }
body:has(.r-sci) ul.r-sci-nav--head a.is-current { background-color:#1E2382; border-color:#1E2382; color:#ffffff; }
/* スマホはチップを1行にして横スワイプ。ヘッダーの高さを抑える */
@media (max-width:768px){
  body:has(.r-sci) .r-sci-head__sub { display:none; }
  body:has(.r-sci) .r-sci-head__brand { margin:0 0 7px; }
  body:has(.r-sci) .r-sci-head__logo img { height:20px; }
  body:has(.r-sci) ul.r-sci-nav--head { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  body:has(.r-sci) ul.r-sci-nav--head::-webkit-scrollbar { display:none; }
  body:has(.r-sci) ul.r-sci-nav--head li { flex:0 0 auto; }
}
@media (min-width:769px){
  body:has(.r-sci) .r-sci-head__logo img { height:28px; }
  body:has(.r-sci) .r-sci-head__sub { font-size:13px; }
  body:has(.r-sci) ul.r-sci-nav--head a { font-size:13px; padding:6px 14px; }
}
/* ページ本文の目次はヘッダーに移したので隠す */
body:has(.r-sci) .wysiwyg ul.r-sci-nav { display:none !important; }

/* === MEITO: ヘッダーの左右を本文(900px)にそろえる v1 (2026-07-30) === */
body:has(.r-sci) .l-header__inner { max-width:900px; margin-left:auto; margin-right:auto; }
body:has(.r-sci) .r-sci-back, body:has(.r-sci) .l-footer__inner { max-width:900px; margin-left:auto; margin-right:auto; }

/* === MEITO: PCでヘッダー内側の余白をなくして本文と正確にそろえる v1 === */
@media (min-width:769px){ body:has(.r-sci) .l-header__inner { padding-left:0; padding-right:0; } }

/* ===== MEITO 配色テスト v2（チラシ基準・研究者の方へ のみ） 2026-07-31 ===== */
/* サイトの枠 */
body:has(.r-sci--v2) .js-header.l-header { border-bottom-color:#B9DCF0; }
body:has(.r-sci--v2) .r-sci-head__sub { color:#3F6E8C; }
body:has(.r-sci--v2) ul.r-sci-nav--head a { background-color:#DCEEF9; border-color:#B9DCF0; color:#0D568C; }
body:has(.r-sci--v2) ul.r-sci-nav--head a:hover { background-color:#C8E6F5; color:#0D568C; }
body:has(.r-sci--v2) ul.r-sci-nav--head a.is-current { background-color:#0D568C; border-color:#0D568C; color:#ffffff; }
body:has(.r-sci--v2) h2.c-section__heading { color:#12303F !important; border-bottom-color:#B9DCF0 !important; }
body:has(.r-sci--v2) .r-sci-back a { color:#3F6E8C; }
body:has(.r-sci--v2) .l-footer, body:has(.r-sci--v2) .l-footer p, body:has(.r-sci--v2) .l-footer a { color:#3F6E8C; }
body:has(.r-sci--v2) .copyright, body:has(.r-sci--v2) .powered { color:#7D9AAE; }
/* 本文の部品 */
.r-sci--v2, .r-sci--v2 p, .r-sci--v2 li, .r-sci--v2 td, .r-sci--v2 th { color:#12303F; }
.r-sci--v2 :is(p,h3).r-bar { background-color:#1173BB; color:#ffffff; }
.r-sci--v2 :is(p,h4).r-sub { color:#0D568C; border-bottom-color:#8FC4E4; }
.r-sci--v2 p.r-item { color:#0D568C; }
.r-sci--v2 p.r-itemnote, .r-sci--v2 p.r-caption { color:#3F6E8C; }
.r-sci--v2 table.r-dl { border-top-color:#B9DCF0; }
.r-sci--v2 .r-dl th { background-color:#DCEEF9; color:#0D568C; border-bottom-color:#B9DCF0; }
.r-sci--v2 .r-dl td { background-color:transparent; color:#12303F; border-bottom-color:#B9DCF0; }
.r-sci--v2 ul.r-list li::before { background-color:#1173BB; }
.r-sci--v2 ol.r-steps li::before { background-color:#1173BB; color:#ffffff; }
.r-sci--v2 p.r-note { background-color:#DCEEF9; border-left-color:#1173BB; color:#0D568C; }
.r-sci--v2 p.r-note--alert { background-color:#FDE7E7; border-left-color:#C0392B; color:#8E2A20; }
.r-sci--v2 a { color:#0D568C; }
.r-sci--v2 a.r-btn { background-color:#0D568C; color:#ffffff; }
.r-sci--v2 a.r-btn:hover { background-color:#1173BB; color:#ffffff; }
.r-sci--v2 a.r-tel { background-color:#DCEEF9; border-color:#1173BB; color:#0D568C; }
.r-sci--v2 p.r-fine-head { color:#3F6E8C; border-top-color:#B9DCF0; }
.r-sci--v2 ul.r-fine li { color:#3F6E8C; }
.r-sci--v2 ul.r-fine li::before { color:#7D9AAE; }
.r-sci--v2 img.r-photo { border-color:#B9DCF0; }
/* 見出しバーに小さな魚 */
.r-sci--v2 :is(p,h3).r-bar { background-image:url(https://cdn.goope.jp/224013/260731055129-6a6bb95188642_l.png); background-repeat:no-repeat; background-position:14px center; background-size:26px auto; padding-left:50px; }
/* 冒頭の帯（チラシの波） */
.r-sci--v2 .r-hero { position:relative; background-color:#1173BB; border-radius:10px 10px 0 0; overflow:hidden; padding:24px 22px 56px; margin:0 0 24px; }
.r-sci--v2 .r-hero::before { content:""; position:absolute; right:-3%; top:8%; width:58%; height:64%; background-image:url(https://cdn.goope.jp/224013/260731055129-6a6bb95188642_l.png); background-repeat:no-repeat; background-position:right top; background-size:contain; opacity:.15; pointer-events:none; }
.r-sci--v2 .r-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C130,44 250,4 390,15 C530,26 640,44 780,32 C900,22 1060,2 1200,16 L1200,44 L0,44 Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:100% 100%; }
.r-sci--v2 .r-hero p { position:relative; z-index:1; color:#ffffff; margin-bottom:12px; }
.r-sci--v2 .r-hero p:last-child { margin-bottom:0; }
.r-sci--v2 .r-hero p.r-lead { color:#ffffff; }
/* 締めの帯 */
.r-sci--v2 .r-endband { position:relative; background-color:#DCEEF9; border-radius:0 0 10px 10px; margin:40px 0 0; padding:56px 20px 26px; }
.r-sci--v2 .r-endband::before { content:""; position:absolute; left:0; right:0; top:-1px; height:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C140,0 260,34 400,26 C540,18 660,0 800,10 C930,19 1060,36 1200,22 L1200,0 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:100% 100%; }
.r-sci--v2 .r-endband > *:first-child { position:relative; z-index:1; }
.r-sci--v2 .r-endband .r-dl td { background-color:transparent; }
.r-sci--v2 .r-endband p.r-fine-head { border-top-color:#A9CFE6; }
@media (min-width:769px){
  .r-sci--v2 .r-hero { padding:30px 30px 64px; }
  .r-sci--v2 .r-endband { padding:64px 30px 30px; }
  .r-sci--v2 :is(p,h3).r-bar { background-size:30px auto; padding-left:56px; }
}

/* v2: ヘッダーのロゴもチラシの青に */
body:has(.r-sci--v2) .r-sci-head__logo img { content:url(https://cdn.goope.jp/224013/260731055602-6a6bba624f656_l.png); }

/* === 価格表: 写真を左に置いた行 v1 (2026-07-31) === */
.wysiwyg .r-prow { display:flex; align-items:stretch; gap:10px; max-width:900px; margin:0 0 14px; }
.wysiwyg .r-prow img.r-pimg { flex:0 0 auto; width:52px; align-self:stretch; height:auto; min-height:0; object-fit:contain; background-color:#ffffff; border:1px solid #B9DCF0; border-radius:5px; }
.wysiwyg .r-prow table.r-dl { flex:1 1 auto; max-width:none; margin:0; }
/* 行の高さを最小限に */
.wysiwyg .r-prow .r-dl th, .wysiwyg .r-prow .r-dl td { padding:5px 8px; font-size:13px; line-height:1.5; }
.wysiwyg .r-prow .r-dl th { width:96px; }
.wysiwyg .r-prow .r-dl.r-dl--wide th { width:150px; }
.wysiwyg p.r-item { margin:14px 0 5px; }
@media (min-width:769px){
  .wysiwyg .r-prow img.r-pimg { width:60px; }
  .wysiwyg .r-prow .r-dl th, .wysiwyg .r-prow .r-dl td { font-size:14px; padding:6px 10px; }
  .wysiwyg .r-prow .r-dl th { width:130px; }
  .wysiwyg .r-prow .r-dl.r-dl--wide th { width:210px; }
  body:has(.r-sci) .wysiwyg .r-prow table.r-dl { max-width:none; }
  .wysiwyg p.r-item { margin:16px 0 6px; }
}

/* 写真のない商品も表の左端をそろえる */
.wysiwyg .r-prow:not(:has(img.r-pimg))::before { content:""; flex:0 0 52px; }
@media (min-width:769px){ .wysiwyg .r-prow:not(:has(img.r-pimg))::before { flex-basis:60px; } }

/* 商品名を見出し列にした表は見出しを広めに */
@media (min-width:769px){ .wysiwyg .r-prow .r-dl.r-dl--wide th { width:255px; } }

/* === MEITO: 設置例の写真は原寸どまり（引き伸ばさない） v1 (2026-07-31) === */
.wysiwyg .r-sci--v2 img.r-photo { width:auto; max-width:100%; }
@media (min-width:769px){ .wysiwyg .r-sci--v2 img.r-photo { max-width:460px; } }

/* === MEITO: ページ見出しの幅を本文にそろえる v1 (2026-07-31) === */
body:has(.r-sci) h2.c-section__heading { max-width:none !important; width:auto !important; }
@media (min-width:769px){ body:has(.r-sci) h2.c-section__heading { max-width:900px !important; } }

/* === 設置例: 写真を半分にして右に表を置く v1 (2026-07-31) === */
.wysiwyg .r-frow { display:flex; align-items:flex-start; gap:10px; max-width:900px; margin:0 0 18px; }
.wysiwyg .r-frow > p { margin:0; flex:0 0 auto; }
.wysiwyg .r-frow img.r-photo { display:block; width:150px; max-width:none; margin:0; }
.wysiwyg .r-frow table.r-dl { flex:1 1 auto; margin:0; max-width:none; }
.wysiwyg .r-frow .r-dl th { width:64px; font-size:12px; padding:5px 6px; }
.wysiwyg .r-frow .r-dl td { font-size:12.5px; padding:5px 7px; line-height:1.6; }
/* 表のない写真も半分に */
.wysiwyg .r-photo--half { width:150px !important; max-width:none !important; }
@media (min-width:769px){
  .wysiwyg .r-frow { gap:16px; }
  .wysiwyg .r-frow img.r-photo { width:230px; }
  .wysiwyg .r-frow .r-dl th { width:100px; font-size:13.5px; padding:6px 9px; }
  .wysiwyg .r-frow .r-dl td { font-size:14px; padding:6px 10px; }
  .wysiwyg .r-photo--half { width:230px !important; }
}

/* 設置例の表は間のびしないよう幅を抑える */
@media (min-width:769px){ .wysiwyg .r-frow table.r-dl { max-width:430px !important; } .wysiwyg .r-frow { justify-content:flex-start; } }

/* === TOPの見せ場: ゼブラフィッシュの写真＋波 v1 (2026-07-31) === */
/* この帯があるページはグーペのページ見出しを隠す */
body:has(.r-hero--photo) h2.c-section__heading { display:none !important; }
.r-sci--v2 .r-hero--photo { position:relative; overflow:hidden; background-color:#1173BB; background-image:url(https://cdn.goope.jp/224013/260731112801-6a6c0831ca494_l.png); background-repeat:no-repeat; background-position:right -30px bottom -14px; background-size:auto 100%; min-height:210px; display:flex; flex-direction:column; justify-content:center; padding:24px 20px 58px; }
/* 既定の魚シルエットを消して、青のかぶせに置き換える */
.r-sci--v2 .r-hero--photo::before { content:""; position:absolute; left:0; right:0; top:0; bottom:0; width:auto; height:auto; opacity:1; background-image:linear-gradient(92deg, rgba(13,86,140,.97) 0%, rgba(13,86,140,.90) 30%, rgba(17,115,187,.55) 62%, rgba(17,115,187,.06) 100%); }
.r-sci--v2 .r-hero--photo p { position:relative; z-index:1; }
.r-sci--v2 .r-hero--photo p.r-lead { text-align:left; color:#ffffff; margin:0; text-shadow:0 1px 3px rgba(0,32,64,.35); }
@media (max-width:768px){
  .r-sci--v2 .r-hero--photo { justify-content:flex-start; background-position:right -26px bottom 8px; background-size:auto 60%; min-height:290px; padding:22px 18px 60px; }
  .r-sci--v2 .r-hero--photo::before { background-image:linear-gradient(168deg, rgba(13,86,140,.97) 0%, rgba(13,86,140,.93) 38%, rgba(17,115,187,.34) 74%, rgba(17,115,187,0) 100%); }
  .r-sci--v2 .r-hero--photo p.r-lead { font-size:14.5px; line-height:1.95; }
  /* この行にあった .wysiwyg .r-dl--wide th{white-space:nowrap} は 2026-08-04 に撤去。(134)を参照 */
}
@media (min-width:769px){
  .r-sci--v2 .r-hero--photo { min-height:290px; padding:34px 32px 66px; }
  .r-sci--v2 .r-hero--photo p.r-lead { max-width:520px; font-size:17px; line-height:2.0; }
}

/* === インフォメーション: 1件ずつカードにする v1 (2026-07-31) === */
body#info .autopagerize_page_element { max-width:640px; }
body#info .c-chapter { background-color:#ffffff; border:1px solid #EBDC96; border-radius:10px; padding:14px 16px 16px !important; margin:0 0 16px !important; }
body#info .c-chapter__header { font-size:12px !important; letter-spacing:.04em; color:#8A7330; margin:0 !important; }
body#info .c-chapter__heading { font-size:17px !important; line-height:1.55 !important; margin:5px 0 0 !important; }
body#info .c-chapter__heading a { color:#3A2B00; text-decoration:none; }
body#info .c-chapter__heading a:hover { color:#8A6A00; }
body#info .c-article { display:flex; align-items:flex-start; gap:12px; margin:11px 0 0 !important; }
body#info .c-article__image { flex:0 0 auto; margin:0 !important; }
body#info .c-article__image:empty { display:none; }
body#info .c-article__image img { display:block; width:110px !important; height:auto !important; margin:0 !important; border:1px solid #EBDC96; border-radius:6px; }
body#info .c-article__content { flex:1 1 auto; font-size:13.5px !important; line-height:1.9 !important; color:#3A2B00; }
@media (min-width:769px){
  body#info .autopagerize_page_element { max-width:640px; }
  body#info .c-chapter { padding:18px 20px 20px !important; margin:0 0 20px !important; }
  body#info .c-chapter__heading { font-size:19px !important; }
  body#info .c-article { gap:16px; }
  body#info .c-article__image img { width:170px !important; }
  body#info .c-article__content { font-size:14.5px !important; }
}

/* インフォメーション: 見出しの幅をそろえ、写真のない記事の左端も合わせる */
body#info h2.c-section__heading { max-width:640px !important; }
body#info .c-article__image:not(:has(img)) { display:none; }
body#info .c-article__content > *:first-child { margin-top:0; }
body#info .p-pager-wrapper { max-width:640px; }
body#info .p-pager { max-width:640px; margin-left:0 !important; margin-right:0 !important; justify-content:center; }

/* === フリーページ: 部品以外の段落・表も本文の幅にそろえる v1 (2026-07-31) === */
/* 見出しバーなどは640pxで止まるのに、素の段落・表・地図だけ890pxまで伸びて右にはみ出していた */
@media (min-width:769px){
  body#free .wysiwyg > p,
  body#free .wysiwyg > ul,
  body#free .wysiwyg > ol,
  body#free .wysiwyg > dl,
  body#free .wysiwyg > table,
  body#free .wysiwyg > blockquote,
  body#free .wysiwyg > h1,
  body#free .wysiwyg > h2,
  body#free .wysiwyg > h3,
  body#free .wysiwyg > h4,
  body#free .wysiwyg > div.wysiwyg-table { max-width:640px !important; }
}


/* (106) トップページ: Informationの幅をブログ・SNS(ウェルカムメッセージ)にそろえる */
@media (min-width:768px){
  body#top .c-section--bg { max-width:760px !important; margin-left:auto !important; margin-right:auto !important; }
}


/* (107) PC: 全体の枠を1230→1100にして、メニューと本文のすき間を詰める */
@media (min-width:961px){
  .c-container { max-width:1100px !important; }
}

/* (107) 維持: MEITOのヘッダー帯は900pxのまま（上の!importantを上書き）*/
body:has(.r-sci) .l-header__inner { max-width:900px !important; }

/* (108) トップの帯（シルエットの帯）も本文の幅にそろえる */
@media (min-width:961px){
  .p-top-brand { max-width:1100px !important; }
}

/* (109) ヘッダーの黄色も本文の幅にそろえる（外側は地の色）*/
@media (min-width:961px){
  body:not(:has(.r-sci)) .l-header { background-color:#FFFEE8 !important; box-shadow:none !important; }
  body:not(:has(.r-sci)) .l-header__inner { max-width:1070px !important; padding-left:0 !important; padding-right:0 !important; background-color:#FEFAAA; box-shadow:0 1px 2px rgba(0,0,0,.15); }
}


/* (110) PC: トップの帯をヘッダーにまとめる */
.r-head-retail, .r-head-contact { display:none; }
@media (min-width:961px){
  body:not(:has(.r-sci)) .p-top-brand { display:none !important; }
  body:not(:has(.r-sci)) .l-header__inner { position:relative; padding-top:8px !important; padding-bottom:32px !important; transition:padding-bottom .18s ease; }
  body:not(:has(.r-sci)) .l-header__inner::after { content:""; position:absolute; left:0; right:0; bottom:0; height:30px; background-image:url(https://cdn.goope.jp/224013/260729210842-6a69ed4af0909.png); background-repeat:repeat-x; background-position:50% 100%; background-size:auto 30px; opacity:.55; pointer-events:none; transition:opacity .18s ease, height .18s ease; }
  body:not(:has(.r-sci)) .l-header__brand { order:1; }
  body:not(:has(.r-sci)) .l-header__brand img { width:100px !important; height:auto !important; transition:width .18s ease; }
  body:not(:has(.r-sci)) .r-head-retail { order:2; display:flex; flex-direction:column; justify-content:center; margin-right:auto; padding-left:16px; line-height:1.4; }
  .r-head-retail__catch { font-size:11px; letter-spacing:.2em; color:#8A6A00; }
  .r-head-retail__name { font-size:17px; font-weight:bold; color:#3A2B00; letter-spacing:.04em; }
  body:not(:has(.r-sci)) .r-head-contact { order:3; display:inline-block; font-size:12.5px; font-weight:bold; color:#FFDA00 !important; background-color:#3A2B00; border-radius:999px; padding:7px 18px; text-decoration:none; white-space:nowrap; }
  body:not(:has(.r-sci)) .r-head-contact:hover { background-color:#5A4400; color:#FFDA00 !important; }
  body:not(:has(.r-sci)) .l-header.headroom--not-top .l-header__inner { padding-bottom:8px !important; }
  body:not(:has(.r-sci)) .l-header.headroom--not-top .l-header__inner::after { opacity:0; height:0; }
  body:not(:has(.r-sci)) .l-header.headroom--not-top .l-header__brand img { width:78px !important; }
}

/* (110) 修正: body#top の指定に勝つよう強めて帯を消す */
@media (min-width:961px){
  body#top:not(:has(.r-sci)) .p-top-brand { display:none !important; }
}

/* (110) 微調整: シルエットを少し大きく、ロゴも少し大きく */
@media (min-width:961px){
  body:not(:has(.r-sci)) .l-header__inner { padding-top:6px !important; padding-bottom:38px !important; }
  body:not(:has(.r-sci)) .l-header__inner::after { height:38px; background-size:auto 38px; opacity:.6; }
  body:not(:has(.r-sci)) .l-header__brand img { width:104px !important; }
  body:not(:has(.r-sci)) .l-header.headroom--not-top .l-header__inner { padding-top:7px !important; padding-bottom:7px !important; }
}


/* (112) トップページ: Information まわりの余白を他の隔間とそろえる（16px）*/
body#top .c-section--bg { margin-bottom:16px !important; }
body#top .p-top-message { margin-top:16px !important; }
@media (max-width:960px){
  body#top .c-section--bg { margin-top:16px !important; padding-top:0 !important; padding-bottom:0 !important; }
}


/* (114) 小売のページ: 写真＋表の行（r-frow）も本文の幅にそろえる */
@media (min-width:769px){
  body#free .wysiwyg > div.r-frow { max-width:640px !important; }
  body#free .wysiwyg .r-frow img.r-photo { width:200px; }
  body#free .wysiwyg .r-frow table.r-dl { max-width:none !important; }
  body#free .wysiwyg .r-frow .r-dl th { width:56px; font-size:13px; }
}


/* (116) 写真を並べる格子（r-gal）*/
.wysiwyg .r-gal { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0 0 18px; }
.wysiwyg .r-gal img { display:block; width:100%; height:auto; margin:0; border-radius:6px; border:1px solid #EBDC96; }
@media (min-width:769px){
  body#free .wysiwyg > div.r-gal { max-width:640px !important; }
  .wysiwyg .r-gal { grid-template-columns:repeat(3,1fr); gap:10px; }
}
.wysiwyg img.r-hero { display:block; width:100%; max-width:640px; height:auto; border-radius:10px; margin:0 0 18px; }


/* (121) ページ内の目次（r-toc）*/
.wysiwyg .r-toc { background:#FFFCEF; border:1px solid #EBDC96; border-radius:10px; padding:14px 18px; margin:0 0 22px; }
.wysiwyg .r-toc__head { font-weight:700; font-size:14px; margin:0 0 6px; color:#8A6D1F; letter-spacing:.04em; }
.wysiwyg .r-toc__head + .r-toc__list { margin-top:0; }
.wysiwyg .r-toc__list { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.wysiwyg .r-toc__list:last-child { margin-bottom:0; }
.wysiwyg .r-toc__list li { margin:0; padding:0 0 0 14px; position:relative; font-size:14px; line-height:1.9; }
.wysiwyg .r-toc__list li::before { content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-right:1.5px solid #D4A017; border-bottom:1.5px solid #D4A017; transform:rotate(45deg); }
.wysiwyg .r-toc__list a { text-decoration:none; border-bottom:1px solid rgba(212,160,23,.45); }
.wysiwyg .r-bar[id] { scroll-margin-top:90px; }
@media (min-width:769px){ body#free .wysiwyg > div.r-toc { max-width:640px !important; } }


/* (123) トップページ ご案内バナーとサイト内リンク */
.wysiwyg .t-bans{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 12px}
.wysiwyg .t-ban{display:block;text-decoration:none;color:inherit;border:2px solid #EBDC96;border-radius:10px;overflow:hidden;background:#fff;transition:transform .15s}
.wysiwyg .t-ban:hover{transform:translateY(-2px)}
.wysiwyg .t-ban img{display:block;width:100%;height:auto;margin:0}
.wysiwyg .t-ban span{display:block;padding:6px 8px;text-align:center;font-weight:700;font-size:14px;line-height:1.3}
.wysiwyg .t-note{font-size:12px;color:#6A6A6A;margin:0 0 16px;text-align:center;line-height:1.5}
.wysiwyg .t-links{margin:0 0 16px;padding:12px 14px;background:#FFFCEF;border:1px solid #EBDC96;border-radius:10px;display:flex;flex-wrap:wrap;gap:2px 0}
.wysiwyg .t-links a{display:inline-block;padding:3px 12px;font-size:14px;line-height:1.5;border-left:3px solid #E8CE7A;margin:0 4px 2px 0;text-decoration:none}
.wysiwyg .t-links a:hover{text-decoration:underline}
@media (min-width:769px){ .wysiwyg .t-bans{grid-template-columns:repeat(3,1fr)} .wysiwyg .t-ban span{font-size:15px} }


/* (124) トップページの見出しバーをCSSでも揃える */
.wysiwyg .dept-header-bar{background:#E0A420;color:#3A2B00;text-align:center;font-weight:bold;padding:5px 0;border-radius:6px;margin:18px 0 10px;font-size:14px !important;letter-spacing:.04em}


/* (125) リユースバナーの下の3ボタン */
.wysiwyg .t-ban span.t-sub{display:flex;gap:4px;padding:6px;font-size:inherit}
.wysiwyg .t-ban span.t-sub a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.25;font-weight:700;padding:5px 2px;background:#FFF6D6;border:1px solid #E8CE7A;border-radius:6px;text-decoration:none;color:#3A2B00;min-height:38px}
.wysiwyg .t-ban span.t-sub a:hover{background:#F6E7B0}
@media (min-width:769px){ .wysiwyg .t-ban span.t-sub a{font-size:12px} }


/* (126) どうぶつ健保の2枚は小さめに、サイトのご案内の下へ */
.wysiwyg .t-bans--small{grid-template-columns:repeat(2,1fr);max-width:66%;margin:0 auto 16px;gap:8px}
@media (min-width:769px){ .wysiwyg .t-bans--small{max-width:44%} }


/* (126b) どうぶつ健保の2枚の大きさをそろえる（画像は無加工。アニコムの「そのまま使う」条件） */
/* 新ロゴは 緑「どうぶつ健保」300x91（3.297対1）と ピンク「はっぴぃ」250x118（2.119対1）で縦横比が大きく違う。 */
/* 幅をそろえると高さが42.5pxと66pxになりピンクだけ1.5倍に見えるため、高さを決めてcontainで収める。 */
/* 数字の根拠：画像の内側の幅はPC140px・スマホ95px。緑は幅いっぱい、ピンクは高さいっぱいになる。 */
/* 中身の高さは「見た目の面積がそろう値」から出した。PC54px（緑140x42.5＝5950／ピンク114x54＝6156）、 */
/* スマホ36px（緑95x28.8＝2736／ピンク76x36＝2736でほぼ一致）。上下の余白4pxを足した値をheightに入れている。 */
/* 枠線と白地は(123)の.t-banが既に持っているので、ここでは作らない。 */
.wysiwyg .t-bans--small .t-ban img{height:62px;object-fit:contain;padding:4px;box-sizing:border-box}
@media (max-width:768px){ .wysiwyg .t-bans--small .t-ban img{height:44px} }


/* (127) リユースバナーの3ボタンを画像ボタンに */
.wysiwyg .t-ban span.t-sub a.t-sub-img{padding:0;background:#fff;border:1px solid #E8CE7A;border-radius:6px;min-height:0;overflow:hidden;display:block}
.wysiwyg .t-ban span.t-sub a.t-sub-img img{display:block;width:100%;height:auto;margin:0;border-radius:0}
.wysiwyg .t-ban span.t-sub a.t-sub-img:hover{background:#fff;border-color:#D4A017}


/* (128) 2026-08-04 小菅リクエストにより追加:
   スマホで、インフォメーション題字バーの横にある「もっと見る」が
   バーの下へはみ出していた問題の修正。
   2026-07-30 の対応では、位置の基準になるセクション(.c-section--bg)に
   padding-top:16px があるものとして top:26px を出していたが、
   その後の題字まわりの調整でセクション上端と題字バーの上端が
   そろったため、16px ぶん下へずれるようになった。
   iframeを390px幅にして実測(題字バー 高さ38px / もっと見る 高さ19.2px)し、
   上 = (38-19.2)/2 = 9px に付け直す。右は現状のままで題字バーの内側10px。 */
@media (max-width:768px){
  body#top .c-section.c-section--bg .c-section__more{top:9px;right:25px}
}


/* (131) 2026-08-04 小菅リクエストにより追加: ブログ・SNSの一番下の「リユース情報」の行。
   ジモティーとメルカリのボタンは中に店名の文字が入っているため、
   ほかのSNSアイコンの30pxでは読めない。少しだけ大きくする。 */
.reuse-tile{width:40px !important;height:40px !important;object-fit:contain}
@media (min-width:768px){ .reuse-tile{width:48px !important;height:48px !important} }


/* (132) 2026-08-05 小菅リクエストにより追加(同日修正): ブログ・SNSのアイコンボタンを1.3倍へ。
   スマホのみ 30px→39px。ラベル付き(縦長)も同じ比率で 30x42→39x55 に拡大する。
   PCは当初47pxまで拡大したが、アイコンが折り返してカードが崩れたため当日中に取りやめ、
   36px(縦長は36x50)の元の指定に戻した。
   リユース情報の行(reuse-tile)は(131)のとおりスマホ40px/PC48pxを維持する。
   このブロックは(131)より後ろにあり、同じ強さだと後ろが勝つため、ここで書き直しておく。
   リユース行のXが小さく見えていた件は、トップページのHTML側で
   X の img に reuse-tile クラスを付けて解決している。 */
.dept-icon-btn{width:39px !important;height:39px !important}
.dept-icon-tall{width:39px !important;height:55px !important}
.reuse-tile{width:40px !important;height:40px !important;object-fit:contain}
@media (min-width:768px){
  .dept-icon-btn{width:36px !important;height:36px !important}
  .dept-icon-tall{width:36px !important;height:50px !important}
  .reuse-tile{width:48px !important;height:48px !important}
}


/* 2026-08-22 お知らせの詳細ページは画像を上に置く。
   一覧は .c-chapter が複数あるので当たらず、これまでどおり左に小さく出る。
   スマホで本文が細くなりすぎて読みにくい、という指摘への対処。 */
body#info .autopagerize_page_element > .c-chapter:only-child .c-article {
  display: block;
}
body#info .autopagerize_page_element > .c-chapter:only-child .c-article__image {
  width: 100% !important;
  max-width: 260px;
  margin: 0 auto 20px !important;
}
body#info .autopagerize_page_element > .c-chapter:only-child .c-article__image img {
  width: 100% !important;
  height: auto;
  margin: 0 !important;
  border-radius: 10px;
}
body#info .autopagerize_page_element > .c-chapter:only-child .c-article__content {
  width: 100% !important;
  max-width: 640px;
  margin: 0 auto !important;
}


/* 2026-08-22 ブログのページにだけ、ブログアーカイブへの案内を出す。
   グーペのテンプレートにブログ専用のブロックが無いため、共通のフッターへ置いて
   body#diary のときだけ見せる形にした。 */
.r-diary-archive { display: none; }
body#diary .r-diary-archive { display: block; margin: 0 0 20px; }
body#diary .r-diary-archive p {
  max-width: 640px;
  margin: 0 auto 10px !important;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #5A4400;
}
body#diary .r-diary-archive .r-btn { margin: 0 auto; }


/* (133) 2026-08-22 見出しバーと小見出しを、段落だけでなく見出しタグでも同じ見た目にした。
   SEOとAI検索のため、本文の見出しを本物の見出しタグ(h3・h4)にする作業の下準備。
   直したのは4種類17か所。見出しバーの選択子9か所と小見出しの選択子6か所に is() で見出しタグを追加し、
   本文共通の指定とMEITO用の指定にも h3,h4 を足した(各1か所)。
   後ろの2つは行間を決めている指定で、足さないと小見出しが4px、MEITOの見出しバーが9px縮む。
   一行説明(subtitle)の5か所は対象外。 */

/* (133b) 2026-08-22 トップページのセクションの題を <h2 class="dept-header-bar"> にしたため、
   本文共通の指定に h2 も加えた（行間が1px伸びるのを防ぐ）。 */


/* (134) 2026-08-22 トップページのカードに、小さい文字の説明を1行入れる。
   小菅の指示。トップページは入口の一覧として保ちたいので、冒頭に長い文章は置かず、
   選ぶときに必要な情報だけをカードの中に小さく出す。 */
.wysiwyg .dept-desc{ margin:2px 0 8px; font-size:12px; line-height:1.6; color:#5A4400; }
.wysiwyg .r-card__note{ display:block; margin-top:3px; font-size:11.5px; line-height:1.5; color:#5A4400; font-weight:normal; }
/* .t-ban span が (0,2,1) で勝つため、こちらも span を付けて specificity をそろえる（後ろにあるので勝つ） */
.wysiwyg .t-ban span.t-ban__note{ display:block; margin-top:2px; padding:0 8px 6px; font-size:11px; line-height:1.45; color:#5A4400; font-weight:normal; }
/* 店舗カードの中身は高さ44pxで固定され、はみ出した分が切り取られる作りなので、説明を入れるときは自動にする */
.wysiwyg .r-card:has(.r-card__note) .r-card__body{ height:auto !important; min-height:44px; overflow:visible !important; padding-bottom:8px; }
@media (min-width:768px){
  .wysiwyg .dept-desc{ font-size:12.5px; }
  .wysiwyg .r-card__note{ font-size:12px; }
  .wysiwyg .t-ban span.t-ban__note{ font-size:11.5px; }
}


/* (135) 2026-08-22 トップページ最下部の会社紹介 t-about。
   トップページには「アクアリウム」「観賞魚」「エキゾチックアニマル」「生物多様性」など、
   会社を表す概念の語が1つも出ていなかったため、規約行の上に小さく1段落だけ置く。
   押す場所より下なので、入口の一覧としての潔さは壊さない。 */
.wysiwyg p.t-about{
  max-width:640px; margin:14px auto 4px;
  font-size:11px; line-height:1.9; color:#5A4400; text-align:center; /* 11px＝105文字が2行に収まる大きさ。すぐ下の規約行と同じ大きさでもある。11.5pxだと3行になる（2026-08-22実測） */
}
/* パソコンでも12pxのまま。12.5pxにすると4行になり、下が間延びするため（2026-08-22実測） */

/* (136) 2026-08-23 ブログ一覧を見出しの一覧にする。記事の全文が縦に並ぶのをやめ、日付・売場・見出し・冒頭2行・写真1枚の行にする。組み立てはテンプレート末尾のJavaScript */
.r-dlist .p-diary__unit{padding:0;margin:0;border:0}
.r-dlist .p-diary__date,
.r-dlist .p-diary__title,
.r-dlist .p-diary__category,
.r-dlist .p-diary__body{display:none}
.r-dcard{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;padding:14px 4px;border-bottom:1px solid #e6e6e6;text-decoration:none;color:inherit}
.r-dcard:hover{background:#fafafa}
.r-dcard__thumb{width:96px;height:96px;object-fit:cover;background:#f1f1f1;border-radius:3px}
.r-dcard__meta{font-size:11.5px;color:#888;letter-spacing:.02em}
.r-dcard__title{font-size:15px;font-weight:700;line-height:1.5;margin:3px 0 5px}
.r-dcard__ex{font-size:12.5px;color:#666;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media screen and (max-width:480px){
  .r-dcard{grid-template-columns:76px 1fr;gap:10px}
  .r-dcard__thumb{width:76px;height:76px}
  .r-dcard__title{font-size:14px}
}


/* ============================================================
   (137) 売場スタッフが書く記事の「素のタグ」を受け止める
   2026-08-27作成 ／ 2026-09-10 リッチエディタの見え方に合わせて全面改訂
   ------------------------------------------------------------
   ■ 考え方(2026-09-10・小菅の指示)
     グーペにはプレビューが無い。書き手が見られるのはエディタの表示だけ。
     だから「エディタで打っている感覚」と「本番の見た目」を一致させる。

   ■ エディタの実測(2026-09-10・TinyMCEのiframeで計測)
     本文13px を1として、h1=2.0倍 h2=1.5倍 h3=1.17倍
     h4=1.0倍 h5=0.83倍 h6=0.67倍(いずれも太字)。
     ブラウザの既定そのもの。

   ■ したがって、サイト側も同じ倍率で組む(px指定ではなくem)
     サイトの本文は16px、エディタは13pxで、基準の大きさが違う。
     px でそろえると h4 が本文より小さくなり「変化なし」にならない。
     倍率でそろえれば、画面の幅が変わっても比が保たれる。

   ■ 割り当て
       h1 = 見出しバー        1.5em (本番24px)
       h2 = 生体名の行        1.17em(本番18.7px)
       h3 = 小見出し          1em   (本番16px)
       h4 = 変化なし・太字だけ 1em   (本番16px＝本文と同じ)
       h5 = 小さく添える文字   0.83em(本番13.3px)
       h6 = さらに小さい文字   0.67em(本番10.7px)

   ■ 効かせる範囲
     ブログ(body#diary)とお知らせ(body#info)、
     それに雛形置き場(body.id_510456)だけ。
     雛形置き場は「型を実物で見せる場所」なので、同じ飾りを出す(2026-09-10追加)。
     ほかのフリーページには効かせない。

   ■ 既存の部品を壊さない仕掛け
     すべて :not([class]) で囲ってある。
     .r-bar / .r-sub / .r-list / .r-dl / .r-note と、
     テンプレートが出す .p-diary__title には当たらない。

   ■ 売場の色 → 260827_売場の色を付けるJS.js
   ============================================================ */

/* --- 売場の色。付いていなければ既定の黄 --- */
body#diary, body#info, body.id_510456 {
  --dept: #E0A420;
  --dept-on: #3A2B00;
  --dept-pale: #FEFAAA;
  --dept-line: #FBEF58;
}
body#diary.dept-aqua   { --dept:#298959; --dept-on:#ffffff; --dept-pale:#DAF9CD; --dept-line:#8FD9AE; }
body#diary.dept-marine { --dept:#226089; --dept-on:#ffffff; --dept-pale:#CCD7FF; --dept-line:#9DB4E8; }
body#diary.dept-peponi { --dept:#C46506; --dept-on:#ffffff; --dept-pale:#FFEACC; --dept-line:#F5C489; }
body#diary.dept-peqet  { --dept:#BF3C3C; --dept-on:#ffffff; --dept-pale:#FFDEDE; --dept-line:#F0A6A6; }

/* --- h1 → 見出しバー(1.5em) --- */
body:is(#diary,#info,.id_510456) .wysiwyg h1:not([class]) {
  max-width: 640px;
  background-color: var(--dept);
  color: var(--dept-on);
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 0.42em 0.62em;
  border-radius: 6px;
  margin: 1.1em 0 0.5em;
}

/* --- h2 → 生体名の行(1.17em) --- */
body:is(#diary,#info,.id_510456) .wysiwyg h2:not([class]) {
  max-width: 640px;
  font-size: 1.17em;
  font-weight: bold;
  color: #3A2B00;
  line-height: 1.5;
  border-left: 4px solid var(--dept);
  background: linear-gradient(to right, var(--dept-pale), transparent 70%);
  padding: 0.28em 0.5em;
  border-radius: 0 4px 4px 0;
  margin: 1em 0 0.35em;
}

/* --- h3 → 小見出し(1em) --- */
body:is(#diary,#info,.id_510456) .wysiwyg h3:not([class]) {
  max-width: 640px;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #3A2B00;
  border-bottom: 2px solid var(--dept-line);
  padding: 0 0 0.28em;
  margin: 1.1em 0 0.5em;
}

/* --- h4 → 変化なし。太字だけ(1em) ---
   エディタでも本文と同じ大きさの太字で見えるため、それをそのまま出す。 */
body:is(#diary,#info,.id_510456) .wysiwyg h4:not([class]) {
  max-width: 640px;
  font-size: 1em;
  font-weight: bold;
  color: inherit;
  line-height: 1.8;
  letter-spacing: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 1.1em 0 0.4em;
}

/* --- h5・h6 → 小さく添える文字 --- */
body:is(#diary,#info,.id_510456) .wysiwyg h5:not([class]),
body:is(#diary,#info,.id_510456) .wysiwyg h6:not([class]) {
  max-width: 640px;
  font-weight: bold;
  color: #6B6152;
  line-height: 1.7;
  letter-spacing: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 1em 0 0.4em;
}
body:is(#diary,#info,.id_510456) .wysiwyg h5:not([class]) { font-size: 0.83em; }
body:is(#diary,#info,.id_510456) .wysiwyg h6:not([class]) { font-size: 0.67em; }

/* --- 箇条書き --- */
body:is(#diary,#info,.id_510456) .wysiwyg ul:not([class]) {
  list-style: none; padding: 0; margin: 0 0 16px; max-width: 640px;
}
body:is(#diary,#info,.id_510456) .wysiwyg ul:not([class]) > li {
  position: relative; list-style: none;
  padding: 0 0 0 20px; margin: 0 0 8px;
  font-size: 14px; line-height: 1.8; overflow-wrap: anywhere;
}
body:is(#diary,#info,.id_510456) .wysiwyg ul:not([class]) > li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background-color: var(--dept);
}

/* --- 番号つき --- */
body:is(#diary,#info,.id_510456) .wysiwyg ol:not([class]) {
  max-width: 640px; padding-left: 1.4em; margin: 0 0 16px;
}
body:is(#diary,#info,.id_510456) .wysiwyg ol:not([class]) > li {
  font-size: 14px; line-height: 1.8; margin: 0 0 8px;
  padding-left: 4px; overflow-wrap: anywhere;
}

/* --- 表 --- */
body:is(#diary,#info,.id_510456) .wysiwyg table:not([class]) {
  display: table; width: 100%; max-width: 640px; margin: 0 0 16px;
  border-collapse: collapse; border-top: 1px solid #EBDC96;
}
body:is(#diary,#info,.id_510456) .wysiwyg table:not([class]) :is(th,td) {
  color: #3A2B00; font-size: 14px; line-height: 1.8;
  text-align: left; vertical-align: top;
  padding: 9px 10px; border: 0; border-bottom: 1px solid #EBDC96;
  overflow-wrap: anywhere;
}
body:is(#diary,#info,.id_510456) .wysiwyg table:not([class]) th {
  background-color: var(--dept-pale); font-weight: bold;
}
body:is(#diary,#info,.id_510456) .wysiwyg table:not([class]) td { background-color: #ffffff; }

/* --- 引用 → 注目枠 --- */
body:is(#diary,#info,.id_510456) .wysiwyg blockquote:not([class]) {
  max-width: 640px;
  background-color: var(--dept-pale);
  border-left: 4px solid var(--dept);
  color: #3A2B00;
  font-size: 13px; line-height: 1.8;
  padding: 10px 12px; margin: 0 0 16px;
  border-radius: 0 6px 6px 0;
}
body:is(#diary,#info,.id_510456) .wysiwyg blockquote:not([class]) > p { margin: 0; font-size: 13px; }

/* --- パソコン表示(既存の部品と同じ 769px で切り替える) ---
   見出しは em で組んであるため、ここでは上書きしない。 */
@media (min-width: 769px) {
  body:is(#diary,#info,.id_510456) .wysiwyg ul:not([class]) > li,
  body:is(#diary,#info,.id_510456) .wysiwyg ol:not([class]) > li { font-size: 15px; }
  body:is(#diary,#info,.id_510456) .wysiwyg table:not([class]) :is(th,td) { font-size: 15px; padding: 11px 14px; }
}


/* ============================================================
   (138) 雛形置き場の「型」を薄い枠で囲む   2026-09-10
   ------------------------------------------------------------
   対象は雛形置き場(body.id_510456)の .tmpl と .tmpl-cap だけ。
   ページ本文には 2026-08-27 から div.tmpl が入っていたが、
   受け止めるCSSが無く、枠が1つも出ていなかった。
   本文の「点線の枠の中をなぞって選ぶ」という案内も宙に浮いていた。
   枠の中が「記事へ貼り付ける中身」であることを見て分かるようにする。
   「▼ ここから下をコピー」は枠の外・すぐ上に置く(2026-09-10)。
   枠の中はそのまま貼り付ける中身だけにするため。
   ============================================================ */

body.id_510456 .wysiwyg .tmpl {
  max-width: 672px;
  background-color: #ffffff;
  border: 1px dashed #C9B67A;
  border-radius: 8px;
  padding: 12px 16px 16px;
  margin: 0 0 24px;
}
body.id_510456 .wysiwyg .tmpl-cap {
  max-width: 672px;
  font-size: 12px;
  font-weight: bold;
  color: #8A7B4E;
  letter-spacing: 0.04em;
  margin: 0 0 5px;
}
/* 枠の中のいちばん上の余白を詰める。(137)の見出しより詳細度を上げる必要があるので body#free を足している */
body#free.id_510456 .wysiwyg .tmpl > :first-child {
  margin-top: 0;
}


/* ============================================================
   (139) ブログの売場カード .rf を作り直す        2026-09-10
   ------------------------------------------------------------
   ■ なぜ作り直したか
     2026-08-27に入れた共通フッターのCSS(108)が、いまの style.css に
     1行も残っていなかった（2026-09-10に実測。".rf" で0件）。
     記事ページで .rf の箱は出ているが、背景も枠も付いていなかった。
     正本＝ホームページ運用/260910_共通フッターCSS_再作成.css

   ■ 効く場所は2つ（クラス名は同じものを使う）
     ①記事ページの本文直後（JS 107 が差し込む）
     ②売場ブログの先頭（JS 107c が差し込む・2026-09-10 追加）

   ■ 色は (137) が持っている変数をそのまま使う
     --dept / --dept-on / --dept-pale / --dept-line
   ============================================================ */

.rf { margin: 18px 0 22px; }

.rf__u {
  max-width: 640px;
  background: var(--dept-pale, #FEFAAA);
  border: 1px solid var(--dept-line, #FBEF58);
  border-left: 5px solid var(--dept, #E0A420);
  border-radius: 8px;
  padding: 13px 16px 15px;
}

/* 売場のロゴと売場名の行（2026-09-10 追加） */
.rf__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.rf__logo {
  display: block;
  width: 88px;   /* 原寸500×251の約2対1。高さ44pxに合わせた幅 */
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}
.rf__name {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--dept, #3A2B00);
  letter-spacing: 0.04em;
}
/* 記事ページのフッター(107)にはロゴの行が無く、売場名が直接ぶら下がる。
   そのときだけ下の余白を付ける（ロゴの行の中では 0 のまま） */
.rf__u > .rf__name { margin: 0 0 4px; }

/* 取扱品目の行（2026-09-10 追加。文はトップページの dept-desc と同じもの） */
.rf__items {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.75;
  color: #5A4400;
}

/* 電話の行 */
.rf__telrow {
  margin: 0 0 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.rf__tel {
  font-size: 23px;
  font-weight: bold;
  color: var(--dept, #3A2B00);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.rf__telnote { font-size: 12px; color: #5A4400; }

/* SNSのアイコン */
.rf__icons {
  margin: 0 0 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rf__icons img { display: block; width: 36px; height: 36px; }

/* 店舗ページへの行 */
.rf__storerow { margin: 0; }
.rf__link { font-size: 13px; color: #5A4400; }

/* スマホ */
@media screen and (max-width: 480px) {
  .rf__u { padding: 12px 13px 14px; }
  .rf__tel { font-size: 21px; }
  .rf__logo { width: 76px; height: 38px; }
}


/* ============================================================
   (140) 店舗ページの売場カードに、ブログとSNSのボタンを横に並べる
   2026-09-10
   ------------------------------------------------------------
   トップページの .dept-icons は「横に並べる」指定がトップページ側の
   ブロックにしか無く、フリーページに置くと縦に積み上がる。
   店舗ページ（inter-store / minato-store）の .r-dept の中に限って
   同じ並びにする。画像のクラス（.dept-icon-btn / .dept-icon-tall）は
   全体で効いているので、大きさはトップページとそろう。
   正本＝ホームページ運用/260910_店舗ページの売場ボタンCSS.css
   ============================================================ */
.wysiwyg .r-dept .dept-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}


/* ============================================================
   (141) 余白の調整（2026-09-13）

   ① フッターの上が空きすぎる（全ページ共通）
      サブフッターの上の余白 60px → 20px。
      本文の下の余白 40px と足して 100px 空いていた。
      この下には帯の絵（44px）が入るので、詰めても寂しくならない。

   ② パソコン表示で、サイト内検索の白枠がヘッダーに接している
      枠の上に 24px の余白を入れる。スマホは触らない。
      form に padding で入れること。margin だと親へ抜けて効かない（マージンの相殺）。
   ============================================================ */

.l-sub-footer{
  padding-top: 20px;
}

@media (min-width: 768px){
  .l-main form[action*="google.com/search"]{
    padding-top: 24px;
  }
}


/* ============================================================
   (142) お問い合わせページの電話の表に、売場の色を付ける（2026-09-13）
   売場名のセルを売場の淡い色で塗り、左に濃色の帯を立てる。
   色は 情シス/CLAUDE.md の「ロゴの使い方」の淡色・濃色から。
   お問い合わせページの中だけに効かせる（.r-contact-guide で囲ってある）。
   ============================================================ */

.wysiwyg.r-contact-guide .r-dl th{
  border-left: 4px solid transparent;
}
.wysiwyg.r-contact-guide .r-uriba--aqua th{
  background-color: #DAF9CD;
  border-left-color: #298959;
}
.wysiwyg.r-contact-guide .r-uriba--marin th{
  background-color: #CCD7FF;
  border-left-color: #226089;
}
.wysiwyg.r-contact-guide .r-uriba--peponi th{
  background-color: #FFEACC;
  border-left-color: #C46506;
}
.wysiwyg.r-contact-guide .r-uriba--peqet th{
  background-color: #FFDEDE;
  border-left-color: #BF3C3C;
}


/* ============================================================
   (143) お問い合わせページを、入力欄まで短くする（2026-09-13）
   表の行の上下の余白を詰め、売場名の欄を広げて折り返しをなくし、
   見出しまわりの余白を少しずつ削る。
   これだけで、案内のかたまりが 1285px → 1113px（172px 短く）。
   お問い合わせページの中だけに効かせる。
   ============================================================ */

.wysiwyg.r-contact-guide .r-dl th,
.wysiwyg.r-contact-guide .r-dl td{
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 売場名を1行に収める。「ペポニ（爬虫類・両生類）」が2行になって行が高くなっていた */
@media (min-width: 768px){
  .wysiwyg.r-contact-guide .r-dl--wide th{
    width: 210px;
  }
}

.wysiwyg.r-contact-guide .r-bar{ margin-top: 18px; margin-bottom: 8px; }
.wysiwyg.r-contact-guide .r-sub{ margin-top: 14px; margin-bottom: 6px; }
.wysiwyg.r-contact-guide .r-lead{ margin-bottom: 12px; }
.wysiwyg.r-contact-guide .r-note{ margin-bottom: 12px; }
.wysiwyg.r-contact-guide .r-dl{ margin-bottom: 12px; }
.wysiwyg.r-contact-guide .r-list{ margin-bottom: 12px; }
.wysiwyg.r-contact-guide .r-list li{ margin-bottom: 4px; }