* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  color: #292929;
  background: #ffffff;
  line-height: 1.7;
}

img {
  width: 100%;
  display: block;
}

button,
a {
  font: inherit;
}

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


/* ==================================================
   HEADER
================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-inner {
  max-width: 1200px;
  height: 72px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.desktop-nav {
  display: flex;
  gap: 28px;
}

.desktop-nav a {
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: opacity 0.3s ease;
}

.desktop-nav a:hover {
  opacity: 0.5;
}

.desktop-nav .current-page {
  font-weight: 700;
}

.menu-button {
  display: none;
  border: 0;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
}

@keyframes watercolorAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    filter: blur(8px);
  }

  55% {
    opacity: 0.72;
  }

  100% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}


/* ==================================================
   BUTTON
================================================== */

.main-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-size: 14px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.main-button:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}


/* ==================================================
   SECTION
================================================== */

.section {
  padding: 120px 28px;
}

.section h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.3;
}


/* ==================================================
   ABOUT DOG PROFILES
================================================== */

.dog-profiles {
  display: flex;
  justify-content: center;
  gap: 90px;
  margin-top: 55px;
}

.dog-profile {
  width: 270px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.dog-profile-image {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.35s ease;
}

.dog-profile-sui .dog-profile-image {
  border: 4px solid rgba(104, 190, 220, 0.65);
}

.dog-profile-on .dog-profile-image {
  border: 4px solid rgba(224, 100, 80, 0.65);
}

.dog-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  display: block;
}

.dog-profile:hover .dog-profile-image {
  transform: translateY(-5px) scale(1.03);
}

.dog-profile h3 {
  margin-top: 22px;
  margin-bottom: 4px;
  font-size: 25px;
}

.dog-profile p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
}

.dog-blog-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.blog-card {
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07);
}

.blog-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.04);
}

.blog-content {
  padding: 25px;
}

.blog-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  font-size: 11px;
  color: #999;
}

.blog-content h3 {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.5;
}

.blog-content p {
  margin-bottom: 22px;
  font-size: 14px;
  color: #666;
}

.blog-link {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid #333;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.blog-ref-header {
  position: relative;
}

/* ==================================================
   PAGE UPDATE NOTE
================================================== */

.page-update-note {
  position: absolute;

  top: 105px;
  right: 4%;

  width: 155px;
  min-height: 118px;

  padding: 24px 18px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  transform: rotate(3deg);

  box-shadow:
    0 5px 12px
    rgba(41, 41, 41, .08);

  z-index: 2;
}


/* 付箋の上のテープっぽい部分 */

.page-update-note::before {
  content: "";

  position: absolute;

  top: -8px;
  left: 50%;

  width: 58px;
  height: 17px;

  background:
    rgba(255, 255, 255, .58);

  transform:
    translateX(-50%)
    rotate(-3deg);
}


/* EVERY */

.page-update-note-small {
  margin-bottom: 2px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .22em;

  color: #777066;
}


/* TUESDAY */

.page-update-note strong {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 27px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: .03em;

  color: #292929;
}


/* 毎週 火曜日 更新 */

.page-update-note-ja {
  margin-top: 10px;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: .08em;

  color: #777066;
}


/* BLOGだけ少しオレンジの落書き */

.page-update-note-blog::after {
  content: "●";

  position: absolute;

  right: 13px;
  bottom: 9px;

  font-size: 8px;

  color: #e47a4e;
}

/* ==================================================
   UPDATE NOTE COLORS
================================================== */

/* BLOG */

.page-update-note-blog {
  background: #f2c4a8;
}


/* GUIDE */

.page-update-note-guide {
  background: #b9d9df;
}


/* COMIC */

.page-update-note-comic {
  background: #f1dda2;
}

/* COMIC */

.page-update-note-event {
  background: #d2f9d4;
}

.page-update-note-about {
  background: #9e8ef6;
}

.page-update-note-about::after {
  content: "●";

  position: absolute;
  right: 13px;
  bottom: 9px;

  font-size: 8px;

  color: #97aef5;
}

/* COMIC */

.page-update-note-items {
  background: #f4deee;
}
.page-update-note-blog::after,
.page-update-note-guide::after,
.page-update-note-comic::after,
.page-update-note-event::after,
.page-update-note-items::after {
  content: "●";

  position: absolute;

  right: 13px;
  bottom: 9px;

  font-size: 8px;
}


/* BLOG */

.page-update-note-blog::after {
  color: #e47a4e;
}


/* GUIDE */

.page-update-note-guide::after {
  color: #62a8bd;
}


/* COMIC */

.page-update-note-comic::after {
  color: #d4a83d;
}
/* COMIC */

.page-update-note-event::after {
  color:#9cd69f;
}

.page-update-note-items::after {
  color:#e0a2cf;
}
/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

  .page-update-note {
    position: relative;

    top: auto;
    right: auto;

    width: 138px;
    min-height: 100px;

    margin:
      28px 0
      0 auto;

    padding: 20px 15px 17px;

    transform: rotate(2deg);
  }


  .page-update-note strong {
    font-size: 24px;
  }

}


/* ==================================================
   BLOG PAGE
================================================== */

.blog-page {
  padding-top: 72px;
}

.blog-filter {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: white;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border 0.25s ease;
}

.blog-filter:hover {
  border-color: #222;
}

.blog-filter.active {
  background: #222;
  border-color: #222;
  color: white;
}

.no-blog-post {
  grid-column: 1 / -1;
  padding: 80px 20px;
  text-align: center;
  color: #999;
}




/* ==================================================
   BLOG ARTICLE
================================================== */

.article-page {
  padding-top: 72px;
}

.article {
  padding: 90px 24px 120px;
}

.article-header {
  max-width: 850px;
  margin: 0 auto 55px;
}

.back-to-blog {
  display: inline-block;
  margin-bottom: 45px;
  color: #888;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.article-header h1 {
  max-width: 800px;
  margin-bottom: 25px;
  font-size: clamp(36px, 6vw, 65px);
  line-height: 1.35;
}

.article-lead {
  max-width: 680px;
  color: #666;
  font-size: 17px;
  line-height: 2;
}

.article-body {
  max-width: 760px;
  margin: 0 auto;
}

.article-body > p {
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 2.15;
}

.article-body > h2 {
  margin: 75px 0 28px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.5;
}

.article-body figure {
  margin: 65px 0;
}

.article-body figure img {
  width: 100%;
  border-radius: 18px;
}

.article-body figcaption {
  margin-top: 10px;
  color: #999;
  font-size: 11px;
  text-align: center;
}

.article-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
}

.article-photo-grid figure {
  margin: 0;
}

.article-photo-grid img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.article-products {
  margin-top: 100px;
  padding-top: 55px;
  border-top: 1px solid #e5e5e5;
}

.article-products-label {
  margin-bottom: 8px !important;
  color: #999;
  font-size: 10px !important;
  letter-spacing: 0.2em;
}

.article-products > h2 {
  margin: 0 0 30px;
}

.article-product-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px;
  border-radius: 20px;
  background: #f8f7f5;
}

.article-product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}

.article-product-info > span {
  color: #999;
  font-size: 11px;
}

.article-product-info h3 {
  margin: 5px 0 10px;
  font-size: 20px;
}

.article-product-info p {
  margin-bottom: 15px;
  color: #666;
  font-size: 13px;
  line-height: 1.8;
}

.article-product-info a {
  display: inline-block;
  border-bottom: 1px solid #333;
  font-size: 12px;
}

.article-footer {
  max-width: 760px;
  margin: 100px auto 0;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.article-footer a {
  font-size: 13px;
}


.home-page #homeBlogList > article:first-child > a {
  display: block;
}


.home-page #homeBlogList > article:first-child .blog-image {
  width: 100%;
  height: 330px;
  padding: 7px;
  overflow: hidden;

  background: #fffdf8;

  border:
    1px solid
    rgba(41, 39, 36, 0.12);

  border-radius: 8px;

  box-shadow:
    4px 5px 0
    rgba(41, 39, 36, 0.05);

  transform: rotate(-0.5deg);
}


.home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center 32% !important;

  border-radius: 4px !important;
}


.home-page #homeBlogList > article:first-child .blog-content {
  padding: 18px 2px 0;
}


.home-page #homeBlogList > article:first-child .blog-meta {
  margin-bottom: 12px;
  font-size: 11px;
}


.home-page #homeBlogList > article:first-child .blog-content h3 {
  margin-bottom: 12px;
  font-size: 23px;
  line-height: 1.5;
}


.home-page #homeBlogList > article:first-child .blog-content p {
  display: block;
  margin-bottom: 20px;

  overflow: visible;

  font-size: 13px;
  line-height: 1.9;
  color: var(--home-muted);
}


.home-page #homeBlogList > article:first-child .blog-link {
  display: inline-block;

  padding-bottom: 4px;

  border-bottom:
    1px solid
    var(--home-ink);

  font-size: 10px;
  letter-spacing: 0.1em;
}


.home-page #homeBlogList > article:nth-child(2) > a,
.home-page #homeBlogList > article:nth-child(3) > a {
  display: grid;

  grid-template-columns:
    180px
    minmax(0, 1fr);

  gap: 18px;

  align-items: center;

  width: 100%;
}


.home-page #homeBlogList > article:nth-child(2) .blog-image,
.home-page #homeBlogList > article:nth-child(3) .blog-image {
  width: 180px;
  height: 145px;

  padding: 6px;

  overflow: hidden;

  background: #fffdf8;

  border:
    1px solid
    rgba(41, 39, 36, 0.12);

  border-radius: 8px;

  box-shadow:
    3px 4px 0
    rgba(41, 39, 36, 0.05);
}


.home-page #homeBlogList > article:nth-child(2) .blog-image img,
.home-page #homeBlogList > article:nth-child(3) .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 4px;
}


.home-page #homeBlogList > article:nth-child(2) .blog-meta,
.home-page #homeBlogList > article:nth-child(3) .blog-meta {
  margin-bottom: 8px;

  font-size: 10px;
  line-height: 1.4;
}


.home-page #homeBlogList > article:nth-child(2) .blog-content h3,
.home-page #homeBlogList > article:nth-child(3) .blog-content h3 {
  margin: 0;

  font-size: 16px;
  line-height: 1.55;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {


  .home-page #homeBlogList > article:nth-child(2) > a,
  .home-page #homeBlogList > article:nth-child(3) > a {
    grid-template-columns:
      150px
      minmax(0, 1fr);
  }


  .home-page #homeBlogList > article:nth-child(2) .blog-image,
  .home-page #homeBlogList > article:nth-child(3) .blog-image {
    width: 150px;
    height: 125px;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 800px) {


  .home-page #homeBlogList > article:first-child .blog-image {
    height: 300px;
  }


  .home-page #homeBlogList > article:nth-child(2) > a,
  .home-page #homeBlogList > article:nth-child(3) > a {
    grid-template-columns:
      120px
      minmax(0, 1fr);

    gap: 14px;
  }


  .home-page #homeBlogList > article:nth-child(2) .blog-image,
  .home-page #homeBlogList > article:nth-child(3) .blog-image {
    width: 120px;
    height: 105px;
  }

}


/* ==================================================
   ARTICLE PRODUCT LINK
================================================== */

.article-product-link {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 18px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

a.article-product-link:hover {
  transform: translateY(-2px);
  border-color: #d8d8d8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.article-product-link img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 12px;
  background: #fafafa;
}

.article-product-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.article-product-number {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #999;
}

.article-product-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.article-product-sub {
  font-size: 12px;
  line-height: 1.6;
  color: #777;
}

.article-product-arrow {
  margin-left: auto;
  padding-left: 10px;
  font-size: 18px;
  color: #aaa;
}


/* ==================================================
   CALENDAR
================================================== */

.calendar {
  max-width: 1000px;
  margin: 55px auto 0;
  padding: 35px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.calendar-header h3 {
  font-size: 24px;
  letter-spacing: 0.15em;
  font-weight: 500;
}

.calendar-button {
  width: 44px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  font-size: 25px;
  cursor: pointer;
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}

.calendar-week div {
  padding: 10px 0;
  text-align: center;
  color: #999;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.calendar-week div:first-child {
  color: #c98787;
}

.calendar-week div:last-child {
  color: #7e91ae;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}

.calendar-day {
  position: relative;
  min-height: 115px;
  padding: 12px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.calendar-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.calendar-day.today .calendar-date {
  border-radius: 50%;
  background: #222;
  color: #fff;
}

.calendar-day.empty {
  background: #fafafa;
}

.calendar-event {
  margin-top: 7px;
}

.calendar-event-link {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f5f3f0;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.calendar-event-link:hover {
  transform: translateY(-2px);
  background: #eeeae5;
}

.calendar-event-title {
  display: block;
  font-size: 10px;
  line-height: 1.4;
}

.calendar-event-place {
  display: block;
  margin-top: 2px;
  color: #999;
  font-size: 9px;
}

.calendar-blog {
  display: block;
  margin-top: 6px;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.calendar-blog:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
}

.calendar-blog-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.15em;
  opacity: 0.55;
}

.calendar-blog-title {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
}

.guide-filter {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border 0.25s ease;
}

.guide-filter:hover {
  border-color: #222;
}

.guide-filter.active {
  background: #222;
  border-color: #222;
  color: #fff;
}

.guide-note {
  margin: 55px 0;
  padding: 24px;
  border-radius: 18px;
  background: #f8f7f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.guide-note strong {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #777;
}

.guide-note p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.9;
}

.article-body ul {
  margin: 25px 0 40px 24px;
}

.article-body li {
  margin-bottom: 10px;
  line-height: 1.9;
}

.home-guide-card {
  min-width: 0;
}

.home-guide-card > a {
  display: block;
}

.home-guide-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 18px;
  background: #f3f3f3;
}

.home-guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-guide-card:hover .home-guide-image img {
  transform: scale(1.035);
}

.new-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ef765f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.home-guide-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
  color: #999;
  font-size: 11px;
}

.home-guide-meta span {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
}

.home-guide-card h3 {
  margin-bottom: 10px;
  font-size: 19px;
  line-height: 1.55;
}

.home-guide-card p {
  color: #666;
  font-size: 13px;
  line-height: 1.8;
}

.home-guide-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
}


/* ==================================================
   ITEMS
================================================== */

.items-page {
  padding-top: 72px;
  background: #ffffff;
}

.item-dog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.item-dog-sui {
  color: #477f91;
  background: #e6f3f6;
}

.item-dog-on {
  color: #b75b4e;
  background: #fae8e2;
}

.item-dog-both {
  color: #666;
  background: #eeeeeb;
}

.home-item-card {
  min-width: 0;
}

.home-item-image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7f7f5;
  border-radius: 4px;
}

.home-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.home-item-image:hover img {
  transform: scale(1.035);
  opacity: 0.9;
}

.home-item-info {
  padding-top: 12px;
}

.home-item-meta {
  margin-bottom: 8px;
}

.home-item-info h3 {
  margin: 0 0 7px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
}

.home-item-price {
  margin: 0 0 9px;
  font-size: 12px;
  color: #666;
}

.home-item-link {
  display: inline-block;
  padding-bottom: 2px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #bbb;
}

.home-item-link:hover {
  opacity: 0.55;
}

.items-filter-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.items-filter-button{
  appearance: none;
  flex-shrink: 0;
  border: 1px solid #ddd;
  background: #ffffff;
  border-radius: 100px;
  padding: 7px 15px;
  color: #777;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.items-filter-button:hover{
  border-color: #aaa;
  color: #222;
}

.items-filter-button.active{
  background: #333;
  border-color: #333;
  color: #ffffff;
}

.items-filter-button.filter-sui.active {
  background: #dceff4;
  border-color: #b7dce5;
  color: #477f91;
}

.items-filter-button.filter-on.active {
  background: #fae3dc;
  border-color: #efc4b7;
  color: #b75b4e;
}

.item-new {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ef765f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
/* ==================================================
   ITEMS CATEGORY ILLUSTRATION FILTER
================================================== */

.items-ref-category-row {
  align-items: flex-start;
}

.items-category-buttons {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.items-category-button {
  width: 88px;
  min-height: 88px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 10px 8px;

  border: 1px solid transparent;
  border-radius: 8px;

  background: transparent;

  color: #68625c;

  transition:
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.items-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size: 28px;
  line-height: 1;

  color: #8c837a;
}

.items-category-text {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .06em;
}

.items-category-button:hover {
  transform: translateY(-3px);
  color: #292929;
}

.items-category-button.active {
  background: #fffdf8;

  border-color:
    rgba(41,41,41,.18);

  color: #292929;

  box-shadow:
    3px 4px 0
    rgba(41,41,41,.05);
}

.items-category-button.active
.items-category-icon {
  color: #e47a4e;
}


/* MOBILE */

@media (max-width: 760px) {

  .items-category-buttons {
    flex-wrap: nowrap;
    overflow-x: auto;

    padding-bottom: 8px;

    -webkit-overflow-scrolling: touch;
  }

  .items-category-button {
    flex: 0 0 78px;

    width: 78px;
    min-height: 80px;

    padding: 8px 6px;
  }

  .items-category-icon {
    width: 34px;
    height: 34px;

    font-size: 24px;
  }

}

/* ==================================================
   EVENT
================================================== */

.event-page {
  padding-top: 72px;
}

.event-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.event-type-button,
.event-region-button {
  appearance: none;
  flex-shrink: 0;
  padding: 7px 15px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}

.event-type-button:hover,
.event-region-button:hover {
  border-color: #222;
  color: #222;
}

.event-type-button.active,
.event-region-button.active {
  background: #222;
  border-color: #222;
  color: #fff;
}

.event-card {
  overflow: hidden;
  border: 1px solid #eee9e3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(70, 60, 50, 0.045);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 35px rgba(70, 60, 50, 0.075);
}

.event-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f5f2ed;
}

.event-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.event-card-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf4f3;
}

.event-card-no-image span {
  color: #8ca7a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.event-card-no-image.event-type-adoption {
  background: #f8eee9;
}

.event-card-no-image.event-type-adoption span {
  color: #bc8c7d;
}

.event-card-content {
  padding: 23px 24px 25px;
}

.event-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 15px;
}

.event-type-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
}

.event-type-label.event-type-normal {
  background: #e8f2f1;
  color: #638a86;
}

.event-type-label.event-type-adoption {
  background: #f8e9e4;
  color: #a96f60;
}

.event-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.event-status-cancelled {
  background: #eee;
  color: #777;
}

.event-status-postponed {
  background: #fff0d9;
  color: #a9783f;
}

.event-card-date {
  margin: 0 0 8px;
  color: #9b9289;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.event-date-separator {
  margin: 0 4px;
  color: #c4bdb6;
}

.event-card-title {
  margin: 0 0 12px;
  color: #403c38;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.event-card-place {
  margin: 0 0 5px;
  color: #706a64;
  font-size: 12px;
  line-height: 1.7;
}

.event-card-place::before {
  content: "○";
  margin-right: 6px;
  color: #b9ada3;
  font-size: 8px;
}

.event-card-address {
  margin: 0;
  color: #aaa29b;
  font-size: 10px;
  line-height: 1.7;
}

.event-card-description {
  margin: 17px 0 0;
  padding-top: 15px;
  border-top: 1px solid #f0ece7;
  color: #77716b;
  font-size: 12px;
  line-height: 1.9;
}

.event-detail-link {
  display: inline-block;
  margin-top: 18px;
  color: #625c57;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.event-detail-link:hover {
  opacity: 0.6;
  transform: translateX(2px);
}

.events-empty {
  grid-column: 1 / -1;
  padding: 75px 20px;
  text-align: center;
  color: #aaa39b;
  font-size: 12px;
  line-height: 2;
}

.event-detail-back {
  margin-bottom: 42px;
}

.event-detail-back a {
  color: #99918a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.event-detail-back a:hover {
  opacity: 0.55;
}

.event-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.event-detail-date {
  margin: 0 0 10px;
  color: #9d958e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.event-detail-title {
  max-width: 850px;
  margin: 0;
  color: #403c38;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.035em;
}

.event-detail-location {
  margin: 18px 0 0;
  color: #77716b;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.event-detail-image-section {
  padding: 55px 0 10px;
  background: #fff;
}

.event-detail-image {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
  background: #f4f1ed;
}

.event-detail-image img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

.event-detail-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 8;
  background: #edf4f3;
}

.event-detail-no-image span {
  color: #8ca7a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.event-detail-no-image.event-type-adoption {
  background: #f8eee9;
}

.event-detail-no-image.event-type-adoption span {
  color: #bc8c7d;
}

.event-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.75fr);
  gap: 80px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.event-detail-main {
  min-width: 0;
}

.event-detail-content {
  color: #625d58;
  font-size: 14px;
  line-height: 2.15;
}

.event-detail-content p {
  margin: 0 0 28px;
}

.event-detail-content h2 {
  margin: 58px 0 22px;
  color: #45413d;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.event-detail-content h2:first-child {
  margin-top: 0;
}

.event-detail-content img {
  display: block;
  width: 100%;
  margin: 35px 0;
  border-radius: 18px;
}

.event-detail-info {
  position: sticky;
  top: 110px;
  padding: 27px 25px;
  border: 1px solid #eee8e2;
  border-radius: 20px;
  background: #fcfaf7;
}

.event-detail-info-label {
  margin: 0 0 22px;
  color: #a49c94;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.event-info-row {
  padding: 17px 0;
  border-top: 1px solid #eee9e4;
}

.event-info-row:first-of-type {
  border-top: 0;
}

.event-info-title {
  margin: 0 0 7px;
  color: #aaa29a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.event-info-value {
  color: #5f5954;
  font-size: 12px;
  line-height: 1.8;
}

.event-info-value p {
  margin: 0;
}

.event-info-value span {
  display: block;
  margin-top: 2px;
  color: #9c948d;
  font-size: 10px;
}

.event-info-link {
  display: inline-block;
  color: #67605a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.event-info-link:hover {
  opacity: 0.55;
  transform: translateX(2px);
}

.comic-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 45px 32px;
  margin-top: 35px;
}

.comic-list-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border-radius: 18px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

a.comic-list-card:hover {
  transform: translateY(-4px);
}

.comic-list-image {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: #f7f3ef;
}

.comic-list-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-position: top center;
  transform: none;
}

.comic-list-info {
  padding: 22px 24px 26px;
}

.comic-list-info > span {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.comic-list-info h2 {
  margin: 0 0 12px;
  color: #3f3b38;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
}

.comic-list-info p {
  margin: 0 0 18px;
  color: #6f6964;
  font-size: 13px;
  line-height: 1.9;
}

.comic-list-info strong {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid #aaa;
  color: #4f4a46;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.comic-coming-soon {
  cursor: default;
  opacity: 0.65;
}

.comic-coming-image {
  width: 100%;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px dashed rgba(70, 60, 55, 0.18);
  border-radius: 18px 18px 0 0;
  background: #f4efe9;
}

.comic-coming-image strong {
  color: #716963;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.comic-coming-image small{
  color: #aaa29a;
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* ==================================================
   EVENT RETURN
================================================== */

.event-return-section {
  width: min(760px, calc(100% - 48px));
  margin: 70px auto 0;
  padding: 72px 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #222;
}

.event-return-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 184px;

  padding: 15px 28px;

  border-radius: 999px;

  background: #fff;

  color: #292929;
  text-decoration: none;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.event-return-button:hover {
  transform: translateY(-2px);
  opacity: .88;
}

@media (max-width: 700px) {

  .event-return-section {
    width: calc(100% - 32px);
    margin-top: 50px;
    padding: 55px 20px;
  }

  .event-return-button {
    min-width: 170px;
    padding: 14px 24px;
  }

}


/* ==================================================
   COMIC SERIES PAGE
================================================== */

.comic-series-page {
  padding: 120px 24px 100px;
}

.comic-series-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.comic-series-header {
  max-width: 620px;
  margin: 0 auto 45px;
  text-align: center;
}

.comic-series-header h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.35;
}

.comic-series-lead {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 2;
}

.comic-series-list {
  width: 100%;
}

.comic-series-item {
  width: 100%;
  max-width: 620px;
  margin: 0 auto 85px;
}

.comic-series-number {
  margin-bottom: 7px;
  color: #999;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.comic-series-read {
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid #aaa;
  color: #555;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.comic-series-coming {
  max-width: 620px;
  margin: 0 auto 60px;
  padding: 38px 20px;
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.comic-series-coming span {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.comic-series-coming small {
  display: block;
  color: #aaa;
  font-size: 9px;
  letter-spacing: 0.18em;
}

.comic-series-coming p {
  margin: 16px 0 0;
  color: #888;
  font-size: 12px;
}

.comic-series-back {
  margin-top: 45px;
  text-align: center;
}
/* ==================================================
   COMIC SERIES - COMING SOON IMAGE
================================================== */

.comic-series-coming-image {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f5eee2 0%,
      #fbf8f1 100%
    );

  border: 1px solid rgba(41, 41, 41, .12);

  text-align: center;
}


/* 鉛筆マーク */

.comic-series-coming-doodle {
  position: absolute;

  top: 18%;
  left: 19%;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 25px;

  color: #62a8bd;

  transform: rotate(-12deg);
}


/* COMING SOON */

.comic-series-coming-image strong {
  display: block;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;

  line-height: .82;

  letter-spacing: .02em;

  color: #5bfffc;

  transform: rotate(-3deg);
}


/* NEXT EPISODE */

.comic-series-coming-image small {
  display: block;

  margin-top: 8px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .18em;

  color: #8c837a;
}


/* 紙っぽい飾り */

.comic-series-coming-image::before {
  content: "";

  position: absolute;

  width: 46px;
  height: 10px;

  top: 15px;
  left: 50%;

  background: rgba(255, 255, 255, .7);

  transform:
    translateX(-50%)
    rotate(-4deg);
}


/* 小さい落書き */

.comic-series-coming-image::after {
  content: "・・・";

  position: absolute;

  right: 16%;
  bottom: 15%;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 20px;

  letter-spacing: .12em;

  color: #e47a4e;

  transform: rotate(7deg);
}


/* ==================================================
   COMING SOON CARD
================================================== */

.comic-series-item-coming {
  opacity: .88;
}

.comic-series-item-coming
.comic-series-coming-label {
  color: #e47a4e;
}

.comic-series-item-coming
.comic-series-preview-info h2 {
  color: #55504b;
}

.comic-series-preparing {
  display: inline-block;

  margin-top: 12px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .08em;

  color: #99918a;
}


/* MOBILE */

@media (max-width: 700px) {

  .comic-series-coming-image strong {
    font-size: 40px;
  }

  .comic-series-coming-doodle {
    font-size: 22px;
  }

}

/* ==================================================
   COMIC DETAIL
================================================== */

.comic-detail-page {
  padding: 120px 24px 100px;
}

.comic-detail-inner {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.comic-detail-header {
  max-width: 600px;
  margin: 0 auto 30px;
  text-align: center;
}

.comic-detail-header h1 {
  margin: 0;
  color: #403c38;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.45;
}

.comic-detail-image {
  width: 100%;
  max-width: 560px;
  margin: 32px auto;
  overflow: hidden;
  border-radius: 15px;
  background: #f7f3ef;
}

.comic-detail-image img {
  display: block;
  width: 100%;
  height: auto;
}

.comic-detail-navigation {
  width: 100%;
  max-width: 560px;
  margin: 50px auto 0;
  padding-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(70, 60, 55, 0.1);
}

.comic-detail-navigation a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.comic-detail-navigation a:hover {
  opacity: 0.55;
}

.about-instagram-button {
  width: min(100%, 360px);
  margin: 40px auto 0;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(70, 60, 55, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #403c38;
  font-size: 12px;
  letter-spacing: 0.1em;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.about-instagram-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.7);
}


/* ==================================================
   LIKE
================================================== */

.article-like {
  max-width: 760px;
  margin: 85px auto 0;
  padding: 42px 20px;
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.article-like-text {
  margin: 0 0 18px;
  color: #777;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.article-like-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 105px;
  padding: 12px 20px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #444;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.article-like-button:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.22);
  background: #faf8f5;
}

.article-like-heart {
  font-size: 20px;
  line-height: 1;
}

.article-like-count {
  font-size: 13px;
}

.article-like-button.liked {
  background: #f8eee9;
  border-color: #ead1c8;
}

.article-like-button.liked .article-like-heart {
  color: #c96f62;
}

.article-like-button:disabled {
  cursor: default;
  opacity: 0.75;
}


/* ==================================================
   ARTICLE NAVIGATION
================================================== */

.article-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 760px;
  margin: 45px auto 0;
  padding: 35px 0;
  border-bottom: 1px solid #eee;
}

.article-navigation-item {
  min-width: 0;
}

.article-navigation-next {
  text-align: right;
}

.article-navigation-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.article-navigation-link:hover {
  opacity: 0.55;
}

.article-navigation-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #999;
}

.article-navigation-title {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
}


/* ==================================================
   ITEM LIKE
================================================== */

.item-like {
  margin-top: 18px;
}

.item-like-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.item-like-button:hover {
  transform: translateY(-1px);
  background: #faf8f5;
}

.item-like-heart {
  font-size: 17px;
  line-height: 1;
}

.item-like-count {
  font-size: 12px;
}

.item-like-button.liked {
  background: #f8eee9;
  border-color: #ead1c8;
}

.item-like-button.liked .item-like-heart {
  color: #c96f62;
}

.item-like-button:disabled {
  cursor: default;
  opacity: .7;
}


/* ==================================================
   FOOTER
================================================== */

footer {
  padding: 40px;
  text-align: center;
  background: #222;
  color: white;
  font-size: 12px;
}

.site-footer {
  background: #222;
  padding: 80px 28px 24px;
  color: #fffdf8;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: 60px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-logo {
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #fffdf8;
}

.footer-copy {
  color: rgba(255, 253, 248, 0.62);
  font-size: 14px;
  line-height: 1.8;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 14px 32px;
}

.footer-nav a {
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  color: #fffdf8;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-nav a:hover {
  opacity: 0.55;
}

.footer-social {
  text-align: right;
}

.footer-social a {
  color: #fffdf8;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.2s ease;
}

.footer-social a:hover {
  opacity: 0.55;
}

.footer-bottom {
  max-width: 1100px;
  margin: 60px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-bottom p {
  color: rgba(255,253,248,.45);
  font-size: 11px;
  letter-spacing: .08em;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1100px) {
}

@media (max-width: 1000px) {
}

@media (max-width: 900px) {
  .comic-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-detail-layout {
    gap: 45px;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  }
}

@media (max-width: 850px) {

  .home-ranking {
    padding: 24px 18px 32px;
    margin-bottom: 20px;
  }
}

@media (max-width: 800px) {
  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-nav {
    flex-direction: column;
    padding: 14px 28px 24px;
    gap: 15px;
  }

  .mobile-nav.active {
    display: flex;
  }

  .section {
    padding: 90px 20px;
  }

  .article {
    padding: 65px 20px 90px;
  }

  .article-header {
    margin-bottom: 40px;
  }

  .back-to-blog {
    margin-bottom: 35px;
  }

  .article-product-card {
    grid-template-columns: 1fr;
  }

  .article-product-image {
    max-width: 220px;
  }

  .calendar {
    padding: 18px;
    border-radius: 18px;
  }

  .calendar-header h3 {
    font-size: 18px;
  }

  .calendar-day {
    min-height: 70px;
    padding: 6px;
  }

  .calendar-date {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .calendar-event-link {
    padding: 4px;
  }

  .calendar-event-title {
    font-size: 8px;
  }

  .calendar-event-place {
    display: none;
  }

  .site-footer {
    padding: 60px 24px 22px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .footer-logo {
    font-size: 24px;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
  }

  .footer-social {
    text-align: left;
  }

  .footer-bottom {
    margin-top: 48px;
  }
}

@media (max-width: 700px) {
  .dog-profiles {
    gap: 20px;
  }

  .dog-profile {
    width: 46%;
  }

  .dog-profile-image {
    width: 130px;
    height: 130px;
    padding: 5px;
  }

  .event-card {
    border-radius: 18px;
  }

  .event-card-content {
    padding: 20px 19px 22px;
  }

  .event-card-title {
    font-size: 16px;
  }

  .event-detail-back {
    margin-bottom: 30px;
  }

  .event-detail-title {
    font-size: 27px;
    line-height: 1.45;
  }

  .event-detail-image-section {
    padding: 28px 0 0;
  }

  .event-detail-image {
    border-radius: 16px;
  }

  .event-detail-image img {
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .event-detail-no-image {
    aspect-ratio: 4 / 3;
  }

  .event-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .event-detail-content {
    font-size: 13px;
    line-height: 2;
  }

  .event-detail-info {
    position: static;
    width: 100%;
    padding: 23px 20px;
    border-radius: 17px;
  }

  .article-like {
    margin-top: 65px;
    padding: 35px 15px;
  }

  .article-navigation {
    gap: 18px;
    padding: 30px 15px;
  }

  .article-navigation-title {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .article-photo-grid {
    gap: 6px;
  }

  .article-photo-grid img {
    height: 150px;
  }

  .article-product-link {
    gap: 12px;
    margin: 24px 0 16px;
    padding: 12px;
  }

  .article-product-link img {
    width: 72px;
    height: 72px;
  }

  .article-product-name {
    font-size: 14px;
  }

  .article-product-sub {
    font-size: 11px;
  }

  .article-product-arrow {
    font-size: 16px;
  }

  .item-new {
    top: 7px;
    left: 7px;
    padding: 4px 7px;
    font-size: 8px;
  }

  .comic-list {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 30px;
  }

  .comic-list-image,
  .comic-coming-image {
    height: 235px;
  }

  .comic-list-info {
    padding: 18px 18px 22px;
  }

  .comic-list-info h2 {
    font-size: 19px;
  }

  .comic-series-page {
    padding: 100px 16px 70px;
  }

  .comic-series-header {
    margin-bottom: 35px;
  }

  .comic-series-item {
    margin-bottom: 65px;
  }

  .comic-detail-page {
    padding: 100px 15px 70px;
  }

  .comic-detail-header {
    margin-bottom: 24px;
  }

  .comic-detail-image {
    max-width: 100%;
    margin: 24px auto;
    border-radius: 12px;
  }

  .comic-detail-navigation {
    gap: 10px;
    margin-top: 40px;
  }
}

@media (max-width: 480px) {
}


/* ==================================================
   HOME FINAL CLEAN
   reference-image direction + ranking
   2026-09-01
================================================== */

.home-page {
  --home-paper: #f4efe6;
  --home-paper-light: #fbf8f2;
  --home-ink: #292724;
  --home-muted: #746f68;
  --home-blue: #74a9c3;
  --home-blue-light: #dcebf2;
  --home-orange: #df7b56;
  --home-orange-light: #f5dfd4;
  --home-yellow: #e5c96f;
  --home-line: rgba(41,39,36,.18);

  overflow-x: hidden;
  background: var(--home-paper);
  color: var(--home-ink);
  font-family: "Noto Sans JP", sans-serif;
}

.home-page .logo-main,
.home-page .home-hero-big-title,
.home-page .home-hero-jp,
.home-page .home-popular-heading h2,
.home-page .home-about-heading h2,
.home-page .home-ending-big,
.home-page .home-ranking-number,
.home-page .home-event-day {
  font-family: "Darumadrop One", sans-serif;
  font-weight: 400;
}

.home-page .home-section-en,
.home-page .home-popular-small,
.home-page .home-category-name,
.home-page .home-ending-small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

/* ==================================================
   HEADER
================================================== */

.home-page .site-header {
  background: rgba(244,239,230,.94);
  border-bottom: 1px solid var(--home-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.home-page .header-inner {
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 38px;
}

.home-page .home-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .8;
}

.home-page .logo-main {
  font-size: 34px;
}

.home-page .logo-small {
  margin-top: 6px;
  margin-left: 4px;
  font-family: "Darumadrop One", sans-serif;
  font-size: 13px;
  color: var(--home-blue);
}

.home-page .desktop-nav {
  gap: 26px;
}

.home-page .desktop-nav a {
  position: relative;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .12em;
}

.home-page .desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  background: var(--home-orange);
  transition: width .25s ease;
}

.home-page .desktop-nav a:hover::after{
  width: 100%;
}

/* ==================================================
   HERO
================================================== */

.home-page .home-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  padding: 145px 38px 68px;
  background: var(--home-paper);
}

.home-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(rgba(41,39,36,.22) .7px, transparent .7px);
  background-size: 9px 9px;
}

.home-page .home-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px,.9fr) minmax(420px,1.15fr) minmax(270px,.8fr);
  gap: 26px;
  align-items: center;
  max-width: 1450px;
  min-height: 520px;
  margin: 0 auto;
}

.home-page .home-hero-big-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(135px,14vw,220px);
  line-height: .53;
  letter-spacing: -.045em;
  transform: rotate(-2deg);
}

.home-page .home-hero-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
}

.home-page .home-hero-name-on {
  margin-left: 14%;
}

.home-page .home-hero-sui {
  color: var(--home-blue);
}

.home-page .home-hero-on {
  color: var(--home-orange);
}

.home-page .home-hero-jp {
  margin-top: 18px;
  margin-left: 12px;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .15em;
  color: var(--home-ink);
}

.home-page .home-hero-and {
  margin: 22px 0 15px 55%;
  font-size: .31em;
}

.home-page .home-hero-visual {
  position: relative;
  z-index: 3;
  min-height: 550px;
}

.home-page .home-hero-photo-main {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(470px,90%);
  margin: 0;
  padding: 13px 13px 38px;
  background: #fffdf8;
  box-shadow: 13px 16px 0 rgba(41,39,36,.07);
  transform: translate(-50%,-50%) rotate(-3deg);
}

.home-page .home-hero-photo-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-page .home-hero-dog {
  position: absolute;
  z-index: 5;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 25px rgba(41,39,36,.12);
}

.home-page .home-hero-dog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-page .home-hero-dog-sui {
  top: 18px;
  right: -10px;
  width: 145px;
  height: 145px;
  border: 5px solid var(--home-blue-light);
  transform: rotate(7deg);
}

.home-page .home-hero-dog-on {
  left: -25px;
  bottom: 28px;
  width: 158px;
  height: 158px;
  border: 5px solid var(--home-orange-light);
  transform: rotate(-6deg);
}

.home-page .home-hero-tape {
  position: absolute;
  z-index: 6;
  display: block;
  height: 28px;
  background: rgba(221,203,159,.74);
}

.home-page .home-hero-tape-one {
  top: 50px;
  left: 28%;
  width: 110px;
  transform: rotate(-8deg);
}

.home-page .home-hero-tape-two {
  right: 8%;
  bottom: 42px;
  width: 88px;
  transform: rotate(9deg);
}

.home-page .home-hero-mark {
  position: absolute;
  z-index: 7;
  font-family: "Darumadrop One", sans-serif;
  font-size: 50px;
}

.home-page .home-hero-mark-one {
  top: 4%;
  left: 5%;
  color: var(--home-orange);
}

.home-page .home-hero-mark-two {
  right: 0;
  bottom: 7%;
  color: var(--home-blue);
}

.home-page .home-hero-paw {
  position: absolute;
  z-index: 7;
  right: 10%;
  bottom: 25%;
  font-size: 28px;
  opacity: .42;
}

.home-page .home-hero-message {
  position: relative;
  z-index: 5;
  padding-left: 20px;
}

.home-page .home-hero-english-copy {
  margin: 0;
  font-family: "Darumadrop One", sans-serif;
  font-size: clamp(42px,4vw,64px);
  line-height: .94;
}

.home-page .home-hero-description {
  max-width: 300px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--home-line);
  font-size: 12px;
  line-height: 2;
  color: var(--home-muted);
}

.home-page .home-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}

/* ==================================================
   CATEGORY
================================================== */

.home-page .home-category-nav {
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  background: var(--home-paper-light);
}

.home-page .home-category-inner {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  max-width: 1450px;
  margin: 0 auto;
}

.home-page .home-category-inner a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 102px;
  padding: 18px 22px;
  border-right: 1px solid var(--home-line);
}

.home-page .home-category-inner a:first-child {
  border-left: 1px solid var(--home-line);
}

.home-page .home-category-number {
  flex-shrink: 0;
  font-family: "Darumadrop One", sans-serif;
  font-size: 34px;
  color: var(--home-orange);
}

.home-page .home-category-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.home-page .home-category-copy {
  color: var(--home-muted);
  font-size: 10px;
  line-height: 1.6;
}

/* ==================================================
   RANKING
   category strip の直下に追加
================================================== */

.home-page .home-popular-section {
  padding: 62px 38px 70px;
  background: var(--home-paper);
}

.home-page .home-popular-inner {
  max-width: 1450px;
  margin: 0 auto;
}

.home-page .home-popular-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}

.home-page .home-popular-title {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.home-page .home-popular-small {
  margin-bottom: 7px;
  color: var(--home-orange);
}

.home-page .home-popular-heading h2 {
  margin: 0;
  font-size: clamp(54px,5.4vw,82px);
  line-height: .82;
}

.home-page .home-popular-heading > p {
  margin-bottom: 6px;
  color: var(--home-muted);
  font-size: 11px;
}

.home-page .home-ranking-horizontal {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
}

.home-page .home-ranking-item {
  display: grid;
  grid-template-columns: 34px 74px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 102px;
  padding: 14px 15px;
  border-right: 1px solid var(--home-line);
}

.home-page .home-ranking-item:first-child {
  border-left: 1px solid var(--home-line);
}

.home-page .home-ranking-number {
  font-size: 31px;
  color: var(--home-blue);
}

.home-page .home-ranking-image {
  width: 74px;
  height: 70px;
  padding: 4px;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid rgba(41,39,36,.12);
  border-radius: 7px;
  transform: rotate(-1deg);
}

.home-page .home-ranking-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.home-page .home-ranking-content {
  min-width: 0;
}

.home-page .home-ranking-type {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 6px;
  border: 1px solid var(--home-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-page .home-ranking-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.home-page .home-ranking-likes {
  display: block;
  margin-top: 5px;
  color: var(--home-orange);
  font-size: 9px;
}

.home-page #homeBlogList > article > a {
  display: block;
  width: 100%;
}

.home-page #homeBlogList .blog-image {
  position: relative;
  width: 100%;
  padding: 7px;
  overflow: hidden;
  aspect-ratio: auto;
  background: #fffdf8;
  border: 1px solid rgba(41,39,36,.12);
  border-radius: 8px;
  box-shadow: 4px 5px 0 rgba(41,39,36,.05);
}

.home-page #homeBlogList .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.home-page #homeBlogList > article:first-child .blog-image,
.home-page #homeBlogList > article:first-child .blog-image img {
  height: 300px;
  max-height: 300px;
}

.home-page #homeBlogList > article:first-child .blog-image {
  transform: rotate(-.5deg);
}

.home-page #homeBlogList > article:first-child .blog-content {
  padding: 16px 2px 0;
}

.home-page #homeBlogList > article:first-child .blog-content p {
  display: block;
  overflow: visible;
}
.home-page #homeBlogList > article:nth-child(2) > a,
.home-page #homeBlogList > article:nth-child(3) > a {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 12px;
  align-items: center;
}

.home-page #homeBlogList > article:nth-child(2) .blog-image,
.home-page #homeBlogList > article:nth-child(3) .blog-image,
.home-page #homeBlogList > article:nth-child(2) .blog-image img,
.home-page #homeBlogList > article:nth-child(3) .blog-image img {
  width: 92px;
  height: 92px;
  max-height: 92px;
}

.home-page #homeBlogList > article:nth-child(2) .blog-content,
.home-page #homeBlogList > article:nth-child(3) .blog-content {
  padding: 0;
}

.home-page #homeBlogList > article:nth-child(2) .blog-content p,
.home-page #homeBlogList > article:nth-child(3) .blog-content p,
.home-page #homeBlogList > article:nth-child(2) .blog-link,
.home-page #homeBlogList > article:nth-child(3) .blog-link {
  display: none;
}

.home-page #homeBlogList > article:nth-child(2) .blog-content h3,
.home-page #homeBlogList > article:nth-child(3) .blog-content h3 {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.55;
}

.home-page #homeBlogList > article:nth-child(2) .blog-meta,
.home-page #homeBlogList > article:nth-child(3) .blog-meta {
  margin-bottom: 6px;
  font-size: 9px;
}

.home-page .home-section-more {
  margin-top: 24px;
  text-align: right;
}

.home-page .home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--home-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.home-page .home-comic-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.home-page .home-comic-subtitle {
  margin: 0 0 4px;
  color: var(--home-blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.home-page .home-comic-header h2 {
  margin: 0;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
}

.home-page .home-comic-new {
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--home-orange);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.home-page .home-comic-card {
  display: block;
  padding: 10px 10px 15px;
  background: #fffdf8;
  border: 1px solid rgba(41,39,36,.12);
  border-radius: 8px;
  box-shadow: 7px 8px 0 rgba(41,39,36,.06);
  transform: rotate(.6deg);
}

.home-page .home-comic-image-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 5px;
  background: #f7f3ef;
}

.home-page .home-comic-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-page .home-comic-info {
  padding: 14px 4px 2px;
}

.home-page .home-comic-number {
  display: block;
  margin-bottom: 5px;
  color: var(--home-muted);
  font-size: 9px;
  letter-spacing: .08em;
}

.home-page .home-comic-info h3 {
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 1.45;
}

.home-page .home-comic-info p {
  margin: 0;
  color: var(--home-muted);
  font-size: 10px;
  line-height: 1.75;
}

.home-page .home-comic-read {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--home-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-page .home-comic-continue {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 16px;
  color: var(--home-muted);
}

.home-page .home-comic-continue span {
  font-size: 10px;
}

.home-page .home-comic-continue small {
  font-size: 8px;
  letter-spacing: .12em;
}

.home-page .home-comic-footer {
  margin-top: 15px;
  text-align: right;
}

.home-page .home-comic-archive {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--home-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-page #homeGuideList {
  display: block;
  margin: 0;
}

.home-page #homeGuideList .home-guide-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 220px;
  margin-bottom: 12px;
  padding: 5px;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid rgba(39,37,34,.1);
  border-radius: 7px;
}

.home-page #homeGuideList .home-guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.home-page #homeGuideList .home-guide-card p {
  font-size: 11px;
  line-height: 1.7;
}

.home-page #homeItemsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 0;
}

.home-page #homeItemsList .home-item-image {
  aspect-ratio: 1 / 1;
  padding: 4px;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid rgba(39,37,34,.1);
  border-radius: 7px;
}

.home-page #homeItemsList .home-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.home-page #homeItemsList .home-item-info h3 {
  font-size: 12px;
}

.home-page .home-event-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.home-page .home-event-card {
  border-top: 1px solid var(--home-line);
}

.home-page .home-event-card:last-child {
  border-bottom: 1px solid var(--home-line);
}

.home-page .home-event-card > a {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 2px;
}

.home-page .home-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--home-orange-light);
  border-radius: 50%;
}

.home-page .home-event-month {
  font-size: 7px;
  font-weight: 700;
}

.home-page .home-event-day {
  margin-top: -2px;
  font-size: 25px;
}

.home-page .home-event-label {
  color: var(--home-blue);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
}

.home-page .home-event-content h3 {
  margin: 3px 0;
  font-size: 12px;
  line-height: 1.45;
}

.home-page .home-event-place {
  color: var(--home-muted);
  font-size: 9px;
}

.home-page .home-event-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 8px;
}

/* ==================================================
   ABOUT
   COMPACT PROFILE BAND
================================================== */

.home-page .home-about-section {
  position: relative;
  overflow: hidden;
  padding: 34px 38px 36px;
  background: var(--home-paper-light);
  border-top: 1px solid var(--home-line);
}

.home-page .home-about-section::before {
  content: none;
}

.home-page .home-about-inner {
  display: grid;
  grid-template-columns: .7fr 1.3fr auto;
  gap: 40px;
  align-items: center;
  max-width: 1450px;
  margin: 0 auto;
}

.home-page .home-about-heading h2 {
  margin: 4px 0 12px;
  font-size: clamp(42px, 4vw, 62px);
  line-height: .86;
}

.home-page .home-about-copy {
  color: var(--home-muted);
  font-size: 10px;
  line-height: 1.8;
}

.home-page .home-dog-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 26px;
  margin-top: 0;
}

.home-page .home-dog-profiles .dog-profile {
  width: auto;
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 16px;
  align-items: center;
  text-align: left;
}

.home-page .home-dog-profiles .dog-profile-image {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 5px;
  border-radius: 50%;
  background: #fff;
}

.home-page .home-dog-profiles .dog-profile-sui .dog-profile-image {
  border: 5px solid var(--home-blue);
}

.home-page .home-dog-profiles .dog-profile-on .dog-profile-image {
  border: 5px solid var(--home-orange);
}

.home-page .home-profile-number {
  margin: 0;
  font-size: 19px;
  color: var(--home-orange);
}

.home-page .home-dog-profiles h3 {
  margin: -2px 0 0;
  font-family: "Darumadrop One",sans-serif;
  font-size: 28px;
  font-weight: 400;
}

.home-page .home-dog-profiles p {
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.home-page .home-dog-profiles .dog-blog-link {
  margin-top: 5px;
  font-size: 8px;
}

.home-page .home-about-more {
  grid-column: 3;
  margin-top: 0;
  white-space: nowrap;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

  .home-page .home-about-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-page .home-about-more {
    grid-column: auto;
    text-align: right;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 800px) {

  .home-page #homeBlogList > article:nth-child(2) > a,
  .home-page #homeBlogList > article:nth-child(3) > a {
    grid-template-columns: 110px minmax(0,1fr);
  }

  .home-page #homeBlogList > article:nth-child(2) .blog-image,
  .home-page #homeBlogList > article:nth-child(3) .blog-image,
  .home-page #homeBlogList > article:nth-child(2) .blog-image img,
  .home-page #homeBlogList > article:nth-child(3) .blog-image img {
    width: 110px;
    height: 110px;
    max-height: 110px;
  }

  .home-page .home-about-section {
    padding: 48px 20px 50px;
  }

  .home-page .home-about-inner {
    display: block;
  }

  .home-page .home-about-heading {
    margin-bottom: 30px;
  }

  .home-page .home-dog-profiles {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-page .home-about-more {
    margin-top: 28px;
  }
}
/* ==================================================
   END + FOOTER
================================================== */

.home-page .home-ending {
  padding: 82px 30px;
  overflow: hidden;
  text-align: center;
  background: var(--home-orange);
}

.home-page .home-ending-small {
  margin-bottom: 10px;
  color: rgba(255,255,255,.78);
}

.home-page .home-ending-big {
  margin: 0;
  font-size: clamp(82px,11vw,170px);
  line-height: .75;
  color: #fff;
  transform: rotate(-2deg);
}

.home-page .home-ending-jp {
  margin-top: 30px;
  color: rgba(255,255,255,.85);
  font-size: 11px;
}

.home-page .site-footer {
  border-top: 0;
  background: var(--home-ink);
  color: #fffdf8;
}

.home-page .site-footer a {
  color: #fffdf8;
}

.home-page .site-footer .footer-copy {
  color: rgba(255,253,248,.62);
}

.home-page .site-footer .footer-bottom p {
  color: rgba(255,253,248,.45);
}

/* ==================================================
   TABLET
================================================== */

@media (max-width:1100px) {
  .home-page .home-hero {
    min-height: auto;
    padding-top: 130px;
  }

  .home-page .home-hero-inner {
    grid-template-columns: .85fr 1.15fr;
    row-gap: 40px;
  }

  .home-page .home-hero-message {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-left: 0;
  }

  .home-page .home-ranking-horizontal {
    grid-template-columns: repeat(5,270px);
    overflow-x: auto;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width:800px) {
  .home-page .header-inner {
    padding: 0 20px;
  }

  .home-page .logo-main {
    font-size: 28px;
  }

  .home-page .home-hero {
    padding: 115px 20px 55px;
  }

  .home-page .home-hero-inner {
    display: block;
    min-height: auto;
  }

  .home-page .home-hero-big-title {
    font-size: clamp(110px,31vw,165px);
  }

  .home-page .home-hero-visual {
    min-height: 470px;
  }

  .home-page .home-hero-photo-main {
    width: min(390px,86%);
  }

  .home-page .home-hero-message {
    display: block;
    margin-top: 15px;
  }

  .home-page .home-category-inner {
    display: flex;
    overflow-x: auto;
  }

  .home-page .home-category-inner a {
    flex: 0 0 200px;
  }

  .home-page .home-popular-section {
    padding: 58px 20px 66px;
  }

  .home-page .home-popular-heading {
    display: block;
  }

  .home-page .home-popular-heading > p {
    margin-top: 16px;
  }

  .home-page .home-ranking-horizontal {
    margin-right: -20px;
    grid-template-columns: repeat(5,270px);
  }

  .home-page #homeBlogList > article:first-child > a {
    display: block;
  }

  .home-page #homeBlogList > article:first-child .blog-image,
  .home-page #homeBlogList > article:first-child .blog-image img {
    height: 300px;
    max-height: 300px;
  }

  .home-page #homeBlogList > article:nth-child(2) .blog-image,
  .home-page #homeBlogList > article:nth-child(3) .blog-image,
  .home-page #homeBlogList > article:nth-child(2) .blog-image img,
  .home-page #homeBlogList > article:nth-child(3) .blog-image img {
    width: 110px;
    height: 110px;
    max-height: 110px;
  }

  .home-page #homeGuideList,
  .home-page #homeItemsList,
  .home-page .home-event-list {
    max-width: 520px;
  }

  .home-page .home-about-section {
    padding: 82px 20px;
  }

  .home-page .home-about-inner {
    display: block;
  }

  .home-page .home-about-heading {
    margin-bottom: 50px;
  }

  .home-page .home-dog-profiles {
    gap: 22px;
  }

  .home-page .home-about-more {
    margin-top: 42px;
  }

  .home-page .home-ending {
    padding: 72px 20px;
  }
}

@media (max-width:520px) {
  .home-page .home-hero-big-title {
    font-size: 29vw;
  }

  .home-page .home-hero-visual {
    min-height: 400px;
  }

  .home-page #homeItemsList {
    gap: 12px;
  }

  .home-page .home-dog-profiles {
    grid-template-columns: 1fr;
  }

  .home-page .home-dog-profiles .dog-profile {
    max-width: 260px;
    margin: 0 auto;
  }
}
/* ==================================================
   HOME CENTER — REFERENCE LAYOUT
   このブロックを style.css の一番最後に追加
================================================== */

.home-page .home-ref-story,
.home-page .home-ref-three {
  --ref-paper: #f4efe6;
  --ref-paper-light: #fbf8f2;
  --ref-ink: #292724;
  --ref-muted: #746f68;
  --ref-blue: #74a9c3;
  --ref-orange: #df7b56;
  --ref-line: rgba(41, 39, 36, .18);
}


/* ==================================================
   01 BLOG + COMIC
================================================== */

.home-page .home-ref-story {
  padding: 54px 38px 68px;
  border-top: 1px solid var(--ref-line);
  background: var(--ref-paper-light);
}

.home-page .home-ref-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(290px, .78fr);
  gap: 42px;
  align-items: stretch;
  max-width: 1450px;
  margin: 0 auto;
}

.home-page .home-ref-blog {
  min-width: 0;
}

.home-page .home-ref-heading {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 14px;
}

.home-page .home-ref-number {
  flex: 0 0 auto;
  font-family: "Darumadrop One", sans-serif;
  font-size: 50px;
  line-height: .95;
  color: var(--ref-blue);
}

.home-page .home-ref-en {
  margin: 0 0 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.home-page .home-ref-heading h2,
.home-page .home-ref-column-heading h2 {
  margin: 0;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.home-page .home-ref-heading h2 {
  font-size: clamp(48px, 4.7vw, 72px);
  line-height: .82;
}

.home-page .home-ref-lead {
  margin: 18px 0 26px 64px;
  color: var(--ref-muted);
  font-size: 11px;
  line-height: 1.9;
}


/* BLOG LIST
   1件目＝大
   2・3件目＝右側に縦積み
*/

.home-page #homeBlogList.home-ref-blog-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(390px, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px 30px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article > a {
  width: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
}


/* MAIN BLOG */

.home-page #homeBlogList.home-ref-blog-list > article:first-child > a {
  display: block !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-image {
  position: relative !important;
  width: 100% !important;
  height: 360px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 7px !important;
  overflow: hidden !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(41,39,36,.12) !important;
  border-radius: 8px !important;
  box-shadow: 5px 6px 0 rgba(41,39,36,.05) !important;
  transform: rotate(-.45deg) !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-content {
  padding: 18px 2px 0 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-meta {
  margin-bottom: 11px !important;
  font-size: 10px !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child h3 {
  margin: 0 0 11px !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child p {
  display: block !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: var(--ref-muted) !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-link {
  display: inline-block !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid var(--ref-ink) !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
}


/* SIDE BLOG 02 / 03 */

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) > a,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) > a {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-image,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-image {
  position: relative !important;
  width: 230px !important;
  height: 175px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 6px !important;
  overflow: hidden !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(41,39,36,.12) !important;
  border-radius: 8px !important;
  box-shadow: 4px 5px 0 rgba(41,39,36,.045) !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-image img,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-content,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-content {
  padding: 0 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-meta,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-meta {
  margin: 0 0 8px !important;
  font-size: 9px !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) h3,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) p,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) p,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-link,
.home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-link {
  display: none !important;
}


/* COMIC */

.home-page .home-ref-comic {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 34px;
  border-left: 1px solid var(--ref-line);
}

.home-page .home-ref-comic-body {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.home-page .home-ref-comic .home-comic-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

.home-page .home-ref-comic .home-comic-subtitle {
  margin: 0 0 4px !important;
  color: var(--ref-blue) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}

.home-page .home-ref-comic .home-comic-header h2 {
  margin: 0 !important;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

.home-page .home-ref-comic .home-comic-card {
  display: block !important;
  padding: 10px 10px 15px !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(41,39,36,.12) !important;
  border-radius: 8px !important;
  box-shadow: 7px 8px 0 rgba(41,39,36,.06) !important;
  transform: rotate(.55deg) !important;
}

.home-page .home-ref-comic .home-comic-image-wrap {
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  border-radius: 5px !important;
}

.home-page .home-ref-comic .home-comic-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.home-page .home-ref-comic .home-comic-info {
  padding: 14px 4px 2px !important;
}

.home-page .home-ref-comic .home-comic-info h3 {
  margin: 0 0 7px !important;
  font-size: 18px !important;
}

.home-page .home-ref-comic .home-comic-info p {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.75 !important;
  color: var(--ref-muted) !important;
}

.home-page .home-ref-comic .home-comic-footer {
  display: none !important;
}


/* ALL links */

.home-page .home-ref-all {
  margin-top: auto;
  padding-top: 26px;
  text-align: right;
}

.home-page .home-ref-all-blog {
  margin-top: 28px;
}

.home-page .home-ref-all a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 98px;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ref-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}


/* ==================================================
   02 GUIDE / 03 ITEMS / 04 EVENT
================================================== */

.home-page .home-ref-three {
  padding: 0 38px 58px;
  background: var(--ref-paper);
}

.home-page .home-ref-three-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  max-width: 1450px;
  margin: 0 auto;
  border-top: 1px solid var(--ref-line);
  border-bottom: 1px solid var(--ref-line);
}

.home-page .home-ref-column {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 570px;
  padding: 30px 28px 28px;
  border-right: 1px solid var(--ref-line);
}

.home-page .home-ref-column:first-child {
  border-left: 1px solid var(--ref-line);
}

.home-page .home-ref-column-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 96px;
  margin-bottom: 8px;
}

.home-page .home-ref-column-heading .home-ref-number {
  font-size: 37px;
  color: var(--ref-orange);
}

.home-page .home-ref-column-heading h2 {
  margin-top: 4px;
  font-size: clamp(32px, 2.7vw, 46px);
  line-height: .86;
}

.home-page .home-ref-column-copy {
  margin: 0 0 17px;
  color: var(--ref-muted);
  font-size: 10px;
  line-height: 1.75;
}


/* GUIDE */

.home-page #homeGuideList.home-ref-guide-list {
  display: block !important;
  margin: 0 !important;
}

.home-page #homeGuideList.home-ref-guide-list .home-guide-card {
  width: 100% !important;
  margin: 0 !important;
}

.home-page #homeGuideList.home-ref-guide-list .home-guide-image {
  width: 100% !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 0 13px !important;
  padding: 5px !important;
  overflow: hidden !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(41,39,36,.1) !important;
  border-radius: 7px !important;
}

.home-page #homeGuideList.home-ref-guide-list .home-guide-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 3px !important;
}

.home-page #homeGuideList.home-ref-guide-list .home-guide-card h3 {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.home-page #homeGuideList.home-ref-guide-list .home-guide-card p {
  display: block !important;
  overflow: visible !important;
  font-size: 11px !important;
  line-height: 1.75 !important;
}


/* ITEMS */

.home-page #homeItemsList.home-ref-items-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

.home-page #homeItemsList.home-ref-items-list .home-item-card {
  min-width: 0 !important;
}

.home-page #homeItemsList.home-ref-items-list .home-item-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
  overflow: hidden !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(41,39,36,.1) !important;
  border-radius: 7px !important;
}

.home-page #homeItemsList.home-ref-items-list .home-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 3px !important;
}

.home-page #homeItemsList.home-ref-items-list .home-item-info h3 {
  font-size: 12px !important;
  line-height: 1.55 !important;
}


/* EVENT */

.home-page #homeEventList.home-ref-event-list {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.home-page #homeEventList.home-ref-event-list .home-event-card {
  border-top: 1px solid var(--ref-line) !important;
}

.home-page #homeEventList.home-ref-event-list .home-event-card:last-child {
  border-bottom: 1px solid var(--ref-line) !important;
}

.home-page #homeEventList.home-ref-event-list .home-event-card > a {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: center !important;
  padding: 15px 2px !important;
}

.home-page #homeEventList.home-ref-event-list .home-event-date {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
}

.home-page #homeEventList.home-ref-event-list .home-event-content h3 {
  margin: 3px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

  .home-page .home-ref-story-inner {
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr);
    gap: 32px;
  }

  .home-page #homeBlogList.home-ref-blog-list {
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, .9fr) !important;
  }

  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) > a,
  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) > a {
    grid-template-columns: 145px minmax(0, 1fr) !important;
  }

  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-image,
  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-image {
    width: 145px !important;
    height: 120px !important;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 800px) {

  .home-page .home-ref-story {
    padding: 52px 20px 60px;
  }

  .home-page .home-ref-story-inner {
    display: block;
  }

  .home-page .home-ref-lead {
    margin-left: 0;
  }

  .home-page #homeBlogList.home-ref-blog-list {
    display: block !important;
  }

  .home-page #homeBlogList.home-ref-blog-list > article {
    margin-bottom: 28px !important;
  }

  .home-page #homeBlogList.home-ref-blog-list > article:first-child .blog-image {
    height: 300px !important;
  }

  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) > a,
  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) > a {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(2) .blog-image,
  .home-page #homeBlogList.home-ref-blog-list > article:nth-child(3) .blog-image {
    width: 120px !important;
    height: 105px !important;
  }

  .home-page .home-ref-comic {
    margin-top: 54px;
    padding: 46px 0 0;
    border-top: 1px solid var(--ref-line);
    border-left: 0;
  }

  .home-page .home-ref-three {
    padding: 0 20px 50px;
  }

  .home-page .home-ref-three-inner {
    display: block;
    border: 0;
  }

  .home-page .home-ref-column {
    display: block;
    min-height: 0;
    padding: 38px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ref-line);
  }

  .home-page .home-ref-column:first-child {
    border-top: 1px solid var(--ref-line);
    border-left: 0;
  }

  .home-page .home-ref-column-heading {
    min-height: 0;
  }

  .home-page .home-ref-all {
    margin-top: 28px;
    padding-top: 0;
  }

}

@media (max-width: 520px) {

  .home-page #homeItemsList.home-ref-items-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}
/* ==================================================
   HOME 02 / 03 / 04
   COLUMN HOVER
================================================== */

.home-page .home-ref-column {
  position: relative;

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}


/* 02 GUIDE */

.home-page .home-ref-column:nth-child(1):hover {
  background-color: #aae0f1;
}


/* 03 ITEMS */

.home-page .home-ref-column:nth-child(2):hover {
  background-color: #f6edb4;
}


/* 04 EVENT */

.home-page .home-ref-column:nth-child(3):hover {
  background-color: #ffceb6;
}


/* 写真もちょっとだけ動かす */

.home-page .home-ref-column img {
  transition: transform 0.45s ease;
}

.home-page .home-ref-column:hover img {
  transform: scale(1.025);
}


/* ALL ○○ の矢印 */

.home-page .home-ref-column .home-ref-all span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.home-page .home-ref-column:hover .home-ref-all span {
  transform: translateX(5px);
}
/* ==================================================
   HOME ANCHOR SCROLL
================================================== */

html {
  scroll-behavior: smooth;
}


/* 固定ヘッダーにタイトルが隠れないようにする */

#home,
#ranking,
#blog,
#guide,
#items,
#event,
#comic,
#about {
  scroll-margin-top: 105px;
}

/* ==================================================
   BLOG REFERENCE DESIGN
================================================== */

.blog-page {
  background:
    #f6f0e5;
  color:
    #292929;
}


/* ==================================================
   TITLE
================================================== */

.blog-page .blog-ref-title-section {
  padding:
    110px 24px 42px;
}


.blog-page .blog-ref-title-inner {
  position:
    relative;

  width:
    min(1120px, 100%);

  margin:
    0 auto;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    28px;
}


.blog-page .blog-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px);

  line-height:
    .8;

  color:
    #e47a4e;
}


.blog-page .blog-ref-title {
  padding-top:
    5px;
}


.blog-page .blog-ref-en {
  margin:
    0 0 4px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px);

  line-height:
    .9;

  letter-spacing:
    .02em;
}


.blog-page .blog-ref-title h1 {
  margin:
    16px 0 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    14px;

  font-weight:
    500;

  letter-spacing:
    .08em;
}


.blog-page .blog-ref-paw {
  position:
    absolute;

  top:
    -18px;

  right:
    3%;

  font-size:
    42px;

  transform:
    rotate(16deg);

  opacity:
    .75;
}


/* ==================================================
   CATEGORY
================================================== */

.blog-page .blog-ref-category {
  padding:
    0 24px 42px;
}


.blog-page .blog-ref-category-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    rgba(41,41,41,.3);
}


.blog-page .blog-filter {
  appearance:
    none;

  border:
    1px solid
    rgba(41,41,41,.35);

  background:
    transparent;

  padding:
    8px 17px;

  border-radius:
    999px;

  color:
    #292929;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    11px;

  cursor:
    pointer;

  transition:
    .25s ease;
}


.blog-page .blog-filter:hover,
.blog-page .blog-filter.active {
  background:
    #292929;

  color:
    #fffdf8;

  border-color:
    #292929;
}


/* ==================================================
   CONTENT
================================================== */

.blog-page .blog-ref-content {
  padding:
    0 24px 100px;
}


.blog-page .blog-ref-list {
  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


/* ==================================================
   FEATURED ARTICLE
================================================== */

.blog-page .blog-ref-featured {
  padding:
    18px 0 70px;
}


.blog-page .blog-ref-featured-link {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, .75fr);

  gap:
    clamp(45px, 7vw, 100px);

  align-items:
    center;

  color:
    inherit;

  text-decoration:
    none;
}


.blog-page .blog-ref-featured-image {
  position:
    relative;

  padding:
    10px;

  background:
    #fffdf8;

  border:
    1px solid
    rgba(41,41,41,.18);

  box-shadow:
    0 12px 30px
    rgba(41,41,41,.08);

  transform:
    rotate(-1deg);
}


.blog-page .blog-ref-featured-image img {
  display:
    block;

  width:
    100%;

  height:
    430px;

  object-fit:
    cover;
}


.blog-page .blog-ref-tape {
  position:
    absolute;

  z-index:
    2;

  top:
    -18px;

  left:
    50%;

  width:
    115px;

  height:
    32px;

  background:
    rgba(221,205,171,.72);

  transform:
    translateX(-50%)
    rotate(-3deg);
}


.blog-page .blog-ref-featured-content {
  position:
    relative;

  padding:
    30px 0;
}


.blog-page .blog-ref-new {
  position:
    absolute;

  top:
    -40px;

  right:
    10px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    45px;

  color:
    #62a8bd;

  transform:
    rotate(8deg);
}


.blog-page .blog-ref-featured-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin-bottom:
    18px;

  font-size:
    11px;

  letter-spacing:
    .06em;

  color:
    #777;
}


.blog-page .blog-ref-featured-meta span {
  padding:
    3px 10px;

  border:
    1px solid
    rgba(41,41,41,.25);

  border-radius:
    999px;
}


.blog-page .blog-ref-featured-content h2 {
  margin:
    0 0 20px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(24px, 3vw, 38px);

  line-height:
    1.55;

  font-weight:
    600;

  letter-spacing:
    .02em;
}


.blog-page .blog-ref-featured-content p {
  margin:
    0;

  font-size:
    13px;

  line-height:
    2;

  color:
    #666;
}


.blog-page .blog-ref-read-more {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    18px;

  margin-top:
    30px;

  padding-bottom:
    5px;

  border-bottom:
    1px solid
    #292929;

  font-size:
    12px;
}


.blog-page .blog-ref-read-more span {
  transition:
    transform .3s ease;
}


.blog-page .blog-ref-featured-link:hover
.blog-ref-read-more span {
  transform:
    translateX(6px);
}


/* ==================================================
   ARCHIVE LIST
================================================== */

.blog-page .blog-ref-archive {
  width:
    min(760px, 100%);

  margin:
    0 auto;

  border-top:
    1px solid
    rgba(41,41,41,.28);
}


.blog-page .blog-ref-row {
  border-bottom:
    1px solid
    rgba(41,41,41,.28);
}


.blog-page .blog-ref-row-link {
  display:
    grid;

  grid-template-columns:
    135px
    minmax(0, 1fr)
    40px;

  gap:
    24px;

  align-items:
    center;

  padding:
    18px 0;

  color:
    inherit;

  text-decoration:
    none;
}


.blog-page .blog-ref-row-image {
  overflow:
    hidden;

  aspect-ratio:
    4 / 3;

  background:
    #eee7db;
}


.blog-page .blog-ref-row-image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .45s ease;
}


.blog-page .blog-ref-row-link:hover
.blog-ref-row-image img {
  transform:
    scale(1.04);
}


.blog-page .blog-ref-row-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    7px;

  font-size:
    10px;

  color:
    #777;
}


.blog-page .blog-ref-row-meta > span:not(.blog-ref-row-new) {
  padding:
    2px 8px;

  border:
    1px solid
    rgba(41,41,41,.22);

  border-radius:
    999px;
}


.blog-page .blog-ref-row-new {
  font-family:
    "Darumadrop One",
    sans-serif;

  color:
    #e47a4e;

  font-size:
    15px;
}


.blog-page .blog-ref-row-content h2 {
  margin:
    0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    15px;

  line-height:
    1.7;

  font-weight:
    500;
}


.blog-page .blog-ref-row-arrow {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    27px;

  transition:
    transform .3s ease;
}


.blog-page .blog-ref-row-link:hover
.blog-ref-row-arrow {
  transform:
    translateX(6px);
}


/* ==================================================
   EMPTY
================================================== */

.blog-page .no-blog-post {
  padding:
    80px 0;

  text-align:
    center;

  font-size:
    13px;
}


/* ==================================================
   BOTTOM
================================================== */

.blog-page .blog-ref-bottom {
  position:
    relative;

  width:
    min(1120px, calc(100% - 48px));

  height:
    80px;

  margin:
    -40px auto 60px;
}


.blog-page .blog-ref-bottom-line {
  position:
    absolute;

  top:
    30px;

  left:
    0;

  width:
    100%;

  border-top:
    1px dashed
    rgba(41,41,41,.25);
}


.blog-page .blog-ref-bottom-paw {
  position:
    absolute;

  top:
    4px;

  right:
    7%;

  padding:
    6px 12px;

  background:
    #f6f0e5;

  font-size:
    30px;

  transform:
    rotate(-15deg);
}


/* ==================================================
   MOBILE
================================================== */

@media
(max-width: 760px) {

  .blog-page .blog-ref-title-section {
    padding:
      85px 20px 30px;
  }


  .blog-page .blog-ref-title-inner {
    gap:
      15px;
  }


  .blog-page .blog-ref-number {
    font-size:
      65px;
  }


  .blog-page .blog-ref-en {
    font-size:
      52px;
  }


  .blog-page .blog-ref-paw {
    font-size:
      28px;
  }


  .blog-page .blog-ref-category {
    padding:
      0 20px 30px;
  }


  .blog-page .blog-ref-content {
    padding:
      0 20px 70px;
  }


  .blog-page .blog-ref-featured {
    padding:
      5px 0 50px;
  }


  .blog-page .blog-ref-featured-link {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .blog-page .blog-ref-featured-image img {
    height:
      auto;

    aspect-ratio:
      4 / 3;

    object-fit:
      cover;
  }


  .blog-page .blog-ref-featured-content {
    padding:
      15px 4px;
  }


  .blog-page .blog-ref-new {
    top:
      -22px;

    right:
      10px;

    font-size:
      35px;
  }


  .blog-page .blog-ref-featured-content h2 {
    font-size:
      23px;
  }


  .blog-page .blog-ref-row-link {
    grid-template-columns:
      92px
      minmax(0, 1fr)
      22px;

    gap:
      14px;

    padding:
      14px 0;
  }


  .blog-page .blog-ref-row-content h2 {
    font-size:
      13px;
  }


  .blog-page .blog-ref-row-arrow {
    font-size:
      20px;
  }

}
/* ==================================================
   GLOBAL HEADER FIX
================================================== */

.site-header {
  background: #f6f0e5;
  border-bottom: 1px solid rgba(41, 41, 41, 0.14);
}


.site-header .header-inner {
  width: min(1450px, calc(100% - 70px));
  margin: 0 auto;

  min-height: 80px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* LOGO */

.site-header .logo {
  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size: 31px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.02em;

  color: #292929;

  text-decoration: none;
}


/* DESKTOP NAV */

.site-header .desktop-nav {
  display: flex;
  align-items: center;

  gap: 34px;
}


.site-header .desktop-nav a {
  position: relative;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size: 15px;
  font-weight: 400;

  letter-spacing: 0.12em;

  color: #292929;

  text-decoration: none;
}


/* CURRENT PAGE */

.site-header .desktop-nav a.current-page::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -10px;

  height: 2px;

  background: #9dcbf0;
}


/* HOVER */

.site-header .desktop-nav a {
  transition: opacity 0.25s ease;
}


.site-header .desktop-nav a:hover {
  opacity: 0.55;
}


/* MOBILE BUTTON */

.site-header .menu-button {
  display: none;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 820px) {

  .site-header .header-inner {
    width: calc(100% - 36px);
    min-height: 68px;
  }


  .site-header .logo {
    font-size: 27px;
  }


  .site-header .desktop-nav {
    display: none;
  }


  .site-header .menu-button {
    display: block;

    border: 0;
    background: transparent;

    font-size: 26px;

    cursor: pointer;
  }

}
/* ==================================================
   ARTICLE REFERENCE DESIGN
================================================== */

body.article-page {
  margin: 0;
  background: #f6f0e5;
  color: #292929;
}


.article-page .article-ref-page {
  overflow: hidden;
}


/* ==================================================
   ARTICLE HEADER
================================================== */

.article-page .article-ref-header {
  padding: 105px 24px 55px;
}


.article-page .article-ref-header-inner {
  position: relative;

  width: min(900px, 100%);
  margin: 0 auto;
}


.article-page .article-ref-blog-label {
  display: flex;
  align-items: flex-end;
  gap: 14px;

  margin-bottom: 55px;
}


.article-page .article-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 64px;
  line-height: .75;

  color: #e47a4e;
}


.article-page .article-ref-blog {
  display: block;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 35px;
  line-height: .8;
}


.article-page .back-to-blog {
  display: inline-block;

  margin-top: 13px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 12px;
  letter-spacing: .08em;

  color: #777;

  text-decoration: none;
}


.article-page .back-to-blog:hover {
  color: #e47a4e;
}


/* META */

.article-page .article-ref-meta {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 22px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 11px;
  letter-spacing: .07em;

  color: #777;
}


.article-page .article-ref-meta span {
  padding: 4px 11px;

  border: 1px solid
    rgba(41,41,41,.28);

  border-radius: 999px;
}


/* TITLE */

.article-page .article-ref-header h1 {
  width: min(800px, 100%);

  margin: 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: clamp(34px, 5vw, 58px);
  font-weight: 600;

  line-height: 1.45;

  letter-spacing: .02em;
}


/* LEAD */

.article-page .article-ref-header .article-lead {
  width: min(680px, 100%);

  margin: 30px 0 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;

  line-height: 2;

  color: #666;
}


/* PAW */

.article-page .article-ref-paw {
  position: absolute;

  top: 35px;
  right: -40px;

  font-size: 37px;

  opacity: .55;

  transform: rotate(18deg);
}


/* ==================================================
   MAIN IMAGE
================================================== */

.article-page .article-ref-main-image {
  width: min(1060px, calc(100% - 48px));

  margin: 0 auto 100px;
}


.article-page .article-ref-photo-frame {
  position: relative;

  padding: 12px;

  background: #fffdf8;

  border: 1px solid
    rgba(41,41,41,.17);

  box-shadow:
    0 15px 35px
    rgba(41,41,41,.09);

  transform: rotate(-.45deg);
}


.article-page .article-ref-photo-frame img {
  display: block;

  width: 100%;

  max-height: 720px;

  object-fit: cover;
}


.article-page .article-ref-tape {
  position: absolute;

  z-index: 2;

  top: -20px;
  left: 50%;

  width: 130px;
  height: 34px;

  background:
    rgba(221,205,171,.72);

  transform:
    translateX(-50%)
    rotate(-3deg);
}


/* ==================================================
   ARTICLE BODY
================================================== */

.article-page .article-ref-body-wrap {
  width: min(720px, calc(100% - 48px));

  margin: 0 auto;
}


.article-page .article-body {
  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 15px;

  line-height: 2.25;

  color: #3d3d3d;
}


.article-page .article-body p {
  margin: 0 0 34px;
}


.article-page .article-body h2 {
  position: relative;

  margin:
    95px 0 35px;

  padding:
    0 0 14px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: clamp(22px, 3vw, 29px);

  font-weight: 600;

  line-height: 1.65;

  border-bottom:
    1px solid
    rgba(41,41,41,.28);
}


.article-page .article-body h2::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: -2px;

  width: 58px;
  height: 4px;

  background: #e47a4e;

  transform: rotate(-1deg);
}


/* ==================================================
   BODY PHOTOS
================================================== */

.article-page .article-body figure {
  margin:
    60px 0 70px;
}


.article-page .article-body figure img {
  display: block;

  width: 100%;
  height: auto;

  padding: 8px;

  box-sizing: border-box;

  background: #fffdf8;

  border: 1px solid
    rgba(41,41,41,.15);

  box-shadow:
    0 10px 25px
    rgba(41,41,41,.07);
}


.article-page .article-body figcaption {
  margin-top: 12px;

  text-align: center;

  font-size: 11px;

  color: #888;
}


/* ==================================================
   PHOTO GRID
================================================== */

.article-page .article-photo-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin:
    60px -80px 75px;
}


.article-page .article-photo-grid figure {
  margin: 0;
}


.article-page .article-photo-grid figure:nth-child(1) {
  transform: rotate(-1deg);
}


.article-page .article-photo-grid figure:nth-child(2) {
  transform: rotate(.7deg);
}


.article-page .article-photo-grid figure:nth-child(3) {
  transform: rotate(-.5deg);
}


.article-page .article-photo-grid img {
  width: 100%;
  height: 300px;

  object-fit: cover;
}


/* ==================================================
   PRODUCT LINKS INSIDE ARTICLE
================================================== */

.article-page .article-body .article-product-link {
  display: grid;

  grid-template-columns:
    115px minmax(0, 1fr) 35px;

  align-items: center;

  gap: 22px;

  margin: 35px 0;

  padding: 14px;

  background:
    rgba(255,253,248,.75);

  border-top:
    1px solid rgba(41,41,41,.2);

  border-bottom:
    1px solid rgba(41,41,41,.2);

  color: inherit;

  text-decoration: none;

  transition:
    transform .3s ease,
    background-color .3s ease;
}


.article-page .article-body .article-product-link:hover {
  transform: translateX(5px);

  background:
    #fffdf8;
}


.article-page .article-body .article-product-link img {
  width: 115px;
  height: 115px;

  padding: 0;

  object-fit: cover;

  border: 0;
  box-shadow: none;
}


.article-page .article-product-info {
  min-width: 0;
}


.article-page .article-product-number {
  display: block;

  margin-bottom: 5px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 13px;

  color: #e47a4e;
}


.article-page .article-product-name {
  display: block;

  font-size: 15px;
  font-weight: 600;
}


.article-page .article-product-sub {
  display: block;

  margin-top: 4px;

  font-size: 11px;

  color: #777;
}


.article-page .article-product-arrow {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 25px;
}


/* ==================================================
   RELATED PRODUCTS
================================================== */

.article-page .article-products {
  width: min(720px, calc(100% - 48px));

  margin:
    110px auto 0;

  padding:
    50px;

  box-sizing: border-box;

  background:
    rgba(255,253,248,.72);

  border:
    1px solid
    rgba(41,41,41,.17);
}


.article-page .article-products-label {
  margin: 0 0 5px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 18px;

  color: #e47a4e;
}


.article-page .article-products > h2 {
  margin:
    0 0 30px;

  font-size: 24px;
}


.article-page .article-product-card {
  display: grid;

  grid-template-columns:
    150px minmax(0,1fr);

  gap: 28px;

  align-items: center;

  padding:
    25px 0;

  border-top:
    1px solid
    rgba(41,41,41,.18);
}


.article-page .article-product-image img {
  display: block;

  width: 150px;
  height: 150px;

  object-fit: cover;
}


.article-page .article-product-info > span {
  font-size: 10px;

  color: #888;
}


.article-page .article-product-info h3 {
  margin:
    6px 0 10px;

  font-size: 17px;
}


.article-page .article-product-info p {
  margin:
    0 0 15px;

  font-size: 12px;

  line-height: 1.8;

  color: #666;
}


.article-page .article-product-info a {
  display: inline-block;

  color: #292929;

  font-size: 11px;

  text-decoration: none;

  border-bottom:
    1px solid #292929;
}


/* ==================================================
   LIKE
================================================== */

.article-page .article-like {
  width: min(720px, calc(100% - 48px));

  margin:
    110px auto 0;

  text-align: center;
}


.article-page .article-like-inner {
  padding:
    55px 20px;

  border-top:
    1px dashed
    rgba(41,41,41,.3);

  border-bottom:
    1px dashed
    rgba(41,41,41,.3);
}


.article-page .article-like-small {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 18px;

  color: #62a8bd;
}


.article-page .article-like-text {
  margin:
    5px 0 20px;

  font-size: 13px;
}


.article-page .article-like-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-width: 95px;

  padding:
    11px 20px;

  border:
    1px solid
    rgba(41,41,41,.3);

  border-radius:
    999px;

  background:
    #fffdf8;

  color:
    #292929;

  cursor: pointer;

  transition:
    transform .25s ease,
    background-color .25s ease;
}


.article-page .article-like-button:hover {
  transform:
    translateY(-2px);

  background:
    #f8e7df;
}


.article-page .article-like-heart {
  font-size:
    23px;

  color:
    #e47a4e;
}


/* ==================================================
   PREVIOUS / NEXT
================================================== */

.article-page .article-navigation {
  width: min(900px, calc(100% - 48px));

  margin:
    100px auto 0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid
    rgba(41,41,41,.25);

  border-bottom:
    1px solid
    rgba(41,41,41,.25);
}


.article-page .article-navigation-item {
  min-width: 0;
}


.article-page .article-navigation-prev {
  border-right:
    1px solid
    rgba(41,41,41,.25);
}


.article-page .article-navigation-link {
  display: flex;

  min-height: 125px;

  padding:
    25px 30px;

  box-sizing: border-box;

  flex-direction: column;

  justify-content: center;

  color:
    #292929;

  text-decoration:
    none;

  transition:
    background-color .3s ease;
}


.article-page .article-navigation-link:hover {
  background:
    rgba(255,253,248,.65);
}


.article-page .article-navigation-label {
  margin-bottom:
    10px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    16px;

  color:
    #e47a4e;
}


.article-page .article-navigation-title {
  font-size:
    13px;

  line-height:
    1.7;
}


.article-page .article-navigation-next
.article-navigation-link {
  text-align:
    right;

  align-items:
    flex-end;
}


/* ==================================================
   BACK TO BLOG
================================================== */

.article-page .article-footer {
  padding:
    65px 24px 30px;

  text-align:
    center;
}


.article-page .article-footer a {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    12px 25px;

  border:
    1px solid
    rgba(41,41,41,.35);

  border-radius:
    999px;

  color:
    #292929;

  text-decoration:
    none;

  font-size:
    12px;

  transition:
    background-color .25s ease,
    color .25s ease;
}


.article-page .article-footer a:hover {
  background:
    #292929;

  color:
    #fffdf8;
}


/* ==================================================
   ENDING
================================================== */

.article-page .article-ref-ending {
  width:
    min(900px, calc(100% - 48px));

  height:
    100px;

  margin:
    0 auto 50px;

  position:
    relative;
}


.article-page .article-ref-ending::before {
  content: "";

  position:
    absolute;

  top: 50px;
  left: 0;

  width: 100%;

  border-top:
    1px dashed
    rgba(41,41,41,.2);
}


.article-page .article-ref-ending span {
  position:
    absolute;

  z-index:
    1;

  top:
    24px;

  right:
    8%;

  padding:
    5px 13px;

  background:
    #f6f0e5;

  font-size:
    30px;

  transform:
    rotate(-13deg);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  .article-page .article-ref-header {
    padding:
      80px 20px 40px;
  }


  .article-page .article-ref-blog-label {
    margin-bottom:
      40px;
  }


  .article-page .article-ref-number {
    font-size:
      52px;
  }


  .article-page .article-ref-blog {
    font-size:
      29px;
  }


  .article-page .article-ref-header h1 {
    font-size:
      30px;

    line-height:
      1.5;
  }


  .article-page .article-ref-header .article-lead {
    font-size:
      13px;
  }


  .article-page .article-ref-paw {
    display:
      none;
  }


  .article-page .article-ref-main-image {
    width:
      calc(100% - 32px);

    margin-bottom:
      70px;
  }


  .article-page .article-ref-photo-frame {
    padding:
      7px;
  }


  .article-page .article-ref-photo-frame img {
    max-height:
      none;
  }


  .article-page .article-ref-body-wrap {
    width:
      calc(100% - 40px);
  }


  .article-page .article-body {
    font-size:
      14px;

    line-height:
      2.15;
  }


  .article-page .article-body h2 {
    margin:
      70px 0 30px;

    font-size:
      22px;
  }


  .article-page .article-photo-grid {
    margin:
      45px 0 60px;

    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .article-page .article-photo-grid img {
    height:
      auto;

    aspect-ratio:
      4 / 3;
  }


  .article-page .article-body .article-product-link {
    grid-template-columns:
      82px
      minmax(0,1fr)
      20px;

    gap:
      12px;

    padding:
      12px 5px;
  }


  .article-page .article-body .article-product-link img {
    width:
      82px;

    height:
      82px;
  }


  .article-page .article-products {
    width:
      calc(100% - 40px);

    margin-top:
      80px;

    padding:
      30px 20px;
  }


  .article-page .article-product-card {
    grid-template-columns:
      90px
      minmax(0,1fr);

    gap:
      18px;
  }


  .article-page .article-product-image img {
    width:
      90px;

    height:
      90px;
  }


  .article-page .article-like {
    width:
      calc(100% - 40px);

    margin-top:
      80px;
  }


  .article-page .article-navigation {
    width:
      calc(100% - 40px);

    margin-top:
      75px;

    grid-template-columns:
      1fr;
  }


  .article-page .article-navigation-prev {
    border-right:
      0;

    border-bottom:
      1px solid
      rgba(41,41,41,.25);
  }


  .article-page .article-navigation-link {
    min-height:
      100px;

    padding:
      20px;
  }


  .article-page .article-navigation-next
  .article-navigation-link {
    text-align:
      left;

    align-items:
      flex-start;
  }

}
/* ==================================================
   GLOBAL HEADER
   全ページ完全共通
================================================== */

.site-header {
  width: 100%;
  background: #f6f0e5;
  border-bottom: 1px solid rgba(41, 41, 41, 0.14);
}


.site-header .header-inner {
  width: calc(100% - 80px) !important;
  max-width: 1280px !important;

  min-height: 80px;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}


/* LOGO */

.site-header .logo {
  margin: 0 !important;
  padding: 0 !important;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size: 31px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.02em;

  color: #292929;
  text-decoration: none;
}


/* NAV */

.site-header .desktop-nav {
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: center;

  gap: 34px;
}


.site-header .desktop-nav a {
  margin: 0;
  padding: 0;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size: 15px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.12em;

  color: #292929;
  text-decoration: none;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 820px) {

  .site-header .header-inner {
    width: calc(100% - 36px) !important;
    max-width: none !important;

    min-height: 68px;
  }

}

/* ==================================================
   GUIDE REFERENCE DESIGN
================================================== */

body.guide-page-body {
  margin: 0;

  background:
    #f6f0e5;

  color:
    #292929;
}


.guide-page-body .guide-ref-page {
  overflow: hidden;
}


/* ==================================================
   HEADING
================================================== */

.guide-page-body .guide-ref-heading {
  padding:
    105px 24px 70px;
}


.guide-page-body .guide-ref-heading-inner {
  position: relative;

  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


.guide-page-body .guide-ref-title-row {
  display: flex;

  align-items: flex-end;

  gap: 18px;
}


.guide-page-body .guide-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    92px;

  line-height:
    .72;

  color:
    #62a8bd;
}


.guide-page-body .guide-ref-title-row h1 {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(80px, 11vw, 145px);

  font-weight:
    400;

  line-height:
    .7;

  letter-spacing:
    -.03em;
}


.guide-page-body .guide-ref-subtitle {
  margin: 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    21px;

  font-weight:
    600;
}


.guide-page-body .guide-ref-paw {
  position: absolute;

  right: 5%;
  top: -30px;

  font-size:
    38px;

  opacity:
    .55;

  transform:
    rotate(16deg);
}


/* ==================================================
   CATEGORY
================================================== */

.guide-page-body .guide-ref-category {
  padding:
    0 24px 80px;
}


.guide-page-body .guide-ref-category-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    35px;
}


.guide-page-body .guide-ref-category-label {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    15px;

  color:
    #62a8bd;
}


.guide-page-body .guide-ref-filter-list {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;
}


.guide-page-body .guide-filter {
  padding:
    8px 18px;

  border:
    1px solid
    rgba(41,41,41,.3);

  border-radius:
    999px;

  background:
    transparent;

  color:
    #292929;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    11px;

  cursor:
    pointer;

  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
}


.guide-page-body .guide-filter:hover,
.guide-page-body .guide-filter.active {
  background:
    #62a8bd;

  border-color:
    #62a8bd;

  color:
    #fffdf8;
}


/* ==================================================
   LIST
================================================== */

.guide-page-body .guide-ref-list-section {
  padding:
    0 24px 120px;
}


.guide-page-body .guide-ref-list {
  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


/* ==================================================
   FEATURED
================================================== */

.guide-page-body .guide-ref-featured {
  padding:
    55px;

  background:
    rgba(255,253,248,.62);

  border-top:
    1px solid
    rgba(41,41,41,.22);

  border-bottom:
    1px solid
    rgba(41,41,41,.22);
}


.guide-page-body .guide-ref-featured-link {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, .85fr);

  align-items:
    center;

  gap:
    75px;

  color:
    inherit;

  text-decoration:
    none;
}


/* PHOTO */

.guide-page-body .guide-ref-photo-paper {
  position:
    relative;

  padding:
    10px;

  background:
    #fffdf8;

  border:
    1px solid
    rgba(41,41,41,.16);

  box-shadow:
    0 14px 30px
    rgba(41,41,41,.08);

  transform:
    rotate(-1deg);
}


.guide-page-body .guide-ref-photo-paper img {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    4 / 3;

  object-fit:
    cover;
}


.guide-page-body .guide-ref-tape {
  position:
    absolute;

  z-index:
    2;

  top:
    -17px;

  left:
    50%;

  width:
    105px;

  height:
    29px;

  background:
    rgba(221,205,171,.7);

  transform:
    translateX(-50%)
    rotate(3deg);
}


/* FEATURED TEXT */

.guide-page-body .guide-ref-new,
.guide-page-body .guide-ref-pickup {
  display:
    block;

  margin-bottom:
    18px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    28px;

  color:
    #62a8bd;

  transform:
    rotate(-3deg);

  transform-origin:
    left center;
}


.guide-page-body .guide-ref-featured-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    17px;

  font-size:
    10px;

  color:
    #777;
}


.guide-page-body
.guide-ref-featured-meta span {
  padding:
    3px 9px;

  border:
    1px solid
    rgba(41,41,41,.25);

  border-radius:
    999px;
}


.guide-page-body
.guide-ref-featured-content h2 {
  margin:
    0 0 20px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(24px, 3vw, 36px);

  font-weight:
    600;

  line-height:
    1.6;
}


.guide-page-body
.guide-ref-featured-content > p {
  margin:
    0 0 32px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    12px;

  line-height:
    2;

  color:
    #666;
}


.guide-page-body .guide-ref-read {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    15px;

  padding-bottom:
    5px;

  border-bottom:
    1px solid
    #292929;

  font-size:
    11px;
}


.guide-page-body .guide-ref-read b {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    20px;

  font-weight:
    400;

  transition:
    transform .25s ease;
}


.guide-page-body
.guide-ref-featured-link:hover
.guide-ref-read b {
  transform:
    translateX(6px);
}


/* ==================================================
   ARCHIVE
================================================== */

.guide-page-body .guide-ref-archive-wrap {
  margin-top:
    85px;

  border-top:
    1px solid
    rgba(41,41,41,.28);
}


.guide-page-body .guide-ref-card {
  border-bottom:
    1px solid
    rgba(41,41,41,.28);
}


.guide-page-body .guide-ref-card > a {
  display:
    grid;

  grid-template-columns:
    75px 170px minmax(0,1fr) 40px;

  align-items:
    center;

  gap:
    30px;

  padding:
    30px 10px;

  color:
    inherit;

  text-decoration:
    none;

  transition:
    background-color .3s ease,
    padding-left .3s ease,
    padding-right .3s ease;
}


.guide-page-body .guide-ref-card > a:hover {
  padding-left:
    20px;

  padding-right:
    0;

  background:
    rgba(98,168,189,.08);
}


/* NUMBER */

.guide-page-body .guide-ref-card-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    30px;

  line-height:
    1;

  color:
    #62a8bd;
}


.guide-page-body .guide-ref-card-number span {
  display:
    block;

  margin-bottom:
    6px;

  font-size:
    10px;

  letter-spacing:
    .1em;

  color:
    #777;
}


/* IMAGE */

.guide-page-body .guide-ref-card-image {
  overflow:
    hidden;
}


.guide-page-body .guide-ref-card-image img {
  display:
    block;

  width:
    170px;

  height:
    115px;

  object-fit:
    cover;

  transition:
    transform .45s ease;
}


.guide-page-body
.guide-ref-card > a:hover
.guide-ref-card-image img {
  transform:
    scale(1.035);
}


/* CARD CONTENT */

.guide-page-body .guide-ref-card-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    10px;

  font-size:
    9px;

  color:
    #888;
}


.guide-page-body
.guide-ref-card-meta span {
  padding:
    2px 7px;

  border:
    1px solid
    rgba(41,41,41,.22);

  border-radius:
    999px;
}


.guide-page-body
.guide-ref-card-content h2 {
  margin:
    0 0 8px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    17px;

  font-weight:
    600;

  line-height:
    1.65;
}


.guide-page-body
.guide-ref-card-content p {
  margin:
    0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    11px;

  line-height:
    1.8;

  color:
    #777;
}


.guide-page-body .guide-ref-card-arrow {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    25px;

  text-align:
    right;
}


/* ==================================================
   EMPTY
================================================== */

.guide-page-body .guide-ref-empty {
  padding:
    100px 20px;

  text-align:
    center;

  font-size:
    13px;

  line-height:
    2;

  color:
    #777;
}


/* ==================================================
   ENDING
================================================== */

.guide-page-body .guide-ref-ending {
  position:
    relative;

  width:
    min(1120px, calc(100% - 48px));

  height:
    100px;

  margin:
    -70px auto 50px;
}


.guide-page-body
.guide-ref-ending::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    100%;

  border-top:
    1px dashed
    rgba(41,41,41,.2);
}


.guide-page-body
.guide-ref-ending span {
  position:
    absolute;

  z-index:
    1;

  right:
    10%;

  top:
    25px;

  padding:
    5px 12px;

  background:
    #f6f0e5;

  font-size:
    29px;

  transform:
    rotate(12deg);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {


  .guide-page-body .guide-ref-heading {
    padding:
      80px 20px 55px;
  }


  .guide-page-body
  .guide-ref-title-row {
    gap:
      10px;
  }


  .guide-page-body
  .guide-ref-number {
    font-size:
      55px;
  }


  .guide-page-body
  .guide-ref-title-row h1 {
    font-size:
      74px;
  }


  .guide-page-body
  .guide-ref-subtitle {
    font-size:
      17px;
  }


  .guide-page-body
  .guide-ref-paw {
    display:
      none;
  }


  /* FILTER */

  .guide-page-body
  .guide-ref-category {
    padding:
      0 20px 55px;
  }


  .guide-page-body
  .guide-ref-category-inner {
    display:
      block;
  }


  .guide-page-body
  .guide-ref-category-label {
    display:
      block;

    margin-bottom:
      12px;
  }


  /* LIST */

  .guide-page-body
  .guide-ref-list-section {
    padding:
      0 20px 90px;
  }


  /* FEATURED */

  .guide-page-body
  .guide-ref-featured {
    padding:
      30px 20px 40px;
  }


  .guide-page-body
  .guide-ref-featured-link {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }


  .guide-page-body
  .guide-ref-new,
  .guide-page-body
  .guide-ref-pickup {
    font-size:
      24px;
  }


  .guide-page-body
  .guide-ref-featured-content h2 {
    font-size:
      24px;
  }


  /* ARCHIVE */

  .guide-page-body
  .guide-ref-archive-wrap {
    margin-top:
      60px;
  }


  .guide-page-body
  .guide-ref-card > a {
    grid-template-columns:
      55px 90px minmax(0,1fr);

    gap:
      14px;

    padding:
      22px 0;
  }


  .guide-page-body
  .guide-ref-card > a:hover {
    padding-left:
      0;

    padding-right:
      0;
  }


  .guide-page-body
  .guide-ref-card-number {
    font-size:
      23px;
  }


  .guide-page-body
  .guide-ref-card-image img {
    width:
      90px;

    height:
      80px;
  }


  .guide-page-body
  .guide-ref-card-content h2 {
    font-size:
      13px;

    line-height:
      1.6;
  }


  .guide-page-body
  .guide-ref-card-content p {
    display:
      none;
  }


  .guide-page-body
  .guide-ref-card-arrow {
    display:
      none;
  }


  .guide-page-body
  .guide-ref-card-meta {
    font-size:
      8px;

    flex-wrap:
      wrap;
  }

}
/* ==================================================
   GUIDE ARTICLE REFERENCE DESIGN
================================================== */

body.guide-article-page {
  margin: 0;
  background: #f6f0e5;
  color: #292929;
}


.guide-article-page .guide-article-ref-page {
  overflow: hidden;
}


/* ==================================================
   HEADER
================================================== */

.guide-article-page .guide-article-ref-header {
  padding: 105px 24px 55px;
}


.guide-article-page
.guide-article-ref-header-inner {
  position: relative;

  width: min(900px, 100%);

  margin: 0 auto;
}


/* GUIDE LABEL */

.guide-article-page
.guide-article-ref-label {
  display: flex;

  align-items: flex-end;

  gap: 14px;

  margin-bottom: 55px;
}


.guide-article-page
.guide-article-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 64px;

  line-height: .75;

  color: #62a8bd;
}


.guide-article-page
.guide-article-ref-guide {
  display: block;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 35px;

  line-height: .8;
}


.guide-article-page
.guide-article-ref-back {
  display: inline-block;

  margin-top: 13px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 12px;

  letter-spacing: .08em;

  color: #777;

  text-decoration: none;
}


.guide-article-page
.guide-article-ref-back:hover {
  color: #62a8bd;
}


/* ==================================================
   META
================================================== */

.guide-article-page
.guide-article-ref-meta {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 22px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 11px;

  letter-spacing: .07em;

  color: #777;
}


.guide-article-page
.guide-article-ref-meta span {
  padding: 4px 11px;

  border:
    1px solid
    rgba(41,41,41,.28);

  border-radius: 999px;
}


/* ==================================================
   TITLE
================================================== */

.guide-article-page
.guide-article-ref-header h1 {
  width: min(800px, 100%);

  margin: 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(34px, 5vw, 58px);

  font-weight: 600;

  line-height: 1.45;

  letter-spacing: .02em;
}


/* ==================================================
   LEAD
================================================== */

.guide-article-page
.guide-article-ref-header
.article-lead {
  width: min(680px, 100%);

  margin: 30px 0 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;

  line-height: 2;

  color: #666;
}


/* ==================================================
   DECORATION
================================================== */

.guide-article-page
.guide-article-ref-paw {
  position: absolute;

  top: 35px;

  right: -40px;

  font-size: 37px;

  opacity: .5;

  transform: rotate(18deg);
}


.guide-article-page
.guide-article-ref-note {
  position: absolute;

  right: 5px;

  bottom: -40px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 19px;

  color: #62a8bd;

  transform: rotate(-5deg);
}


/* ==================================================
   MAIN IMAGE
================================================== */

.guide-article-page
.guide-article-ref-main-image {
  width:
    min(1060px, calc(100% - 48px));

  margin:
    0 auto 100px;
}


.guide-article-page
.guide-article-ref-photo {
  position: relative;

  padding: 12px;

  background: #fffdf8;

  border:
    1px solid
    rgba(41,41,41,.17);

  box-shadow:
    0 15px 35px
    rgba(41,41,41,.09);

  transform: rotate(.4deg);
}


.guide-article-page
.guide-article-ref-photo img {
  display: block;

  width: 100%;

  max-height: 720px;

  object-fit: cover;
}


.guide-article-page
.guide-article-ref-tape {
  position: absolute;

  z-index: 2;

  top: -20px;

  left: 50%;

  width: 130px;

  height: 34px;

  background:
    rgba(190,216,221,.72);

  transform:
    translateX(-50%)
    rotate(3deg);
}


/* ==================================================
   BODY
================================================== */

.guide-article-page
.guide-article-ref-body-wrap {
  width:
    min(720px, calc(100% - 48px));

  margin: 0 auto;
}


.guide-article-page
.article-body {
  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 15px;

  line-height: 2.25;

  color: #3d3d3d;
}


.guide-article-page
.article-body p {
  margin: 0 0 34px;
}


/* ==================================================
   H2
================================================== */

.guide-article-page
.article-body h2 {
  position: relative;

  margin:
    95px 0 35px;

  padding:
    0 0 15px;

  font-size:
    clamp(22px, 3vw, 29px);

  font-weight: 600;

  line-height: 1.65;

  border-bottom:
    1px solid
    rgba(41,41,41,.28);
}


.guide-article-page
.article-body h2::before {
  content: "";

  position: absolute;

  left: 0;

  bottom: -2px;

  width: 58px;

  height: 4px;

  background: #62a8bd;

  transform: rotate(-1deg);
}


/* ==================================================
   H3
================================================== */

.guide-article-page
.article-body h3 {
  margin:
    55px 0 22px;

  padding-left: 17px;

  font-size: 18px;

  line-height: 1.7;

  border-left:
    4px solid
    #62a8bd;
}


/* ==================================================
   LISTS
================================================== */

.guide-article-page
.article-body ul,
.guide-article-page
.article-body ol {
  margin:
    30px 0 40px;

  padding:
    25px 30px 25px 50px;

  background:
    rgba(98,168,189,.08);

  border-top:
    1px solid
    rgba(98,168,189,.28);

  border-bottom:
    1px solid
    rgba(98,168,189,.28);
}


.guide-article-page
.article-body li {
  margin:
    9px 0;

  line-height: 1.9;
}


/* ==================================================
   BLOCKQUOTE / POINT
================================================== */

.guide-article-page
.article-body blockquote {
  position: relative;

  margin:
    50px 0;

  padding:
    32px 35px;

  background:
    #fffdf8;

  border:
    1px solid
    rgba(98,168,189,.32);

  font-size: 14px;

  line-height: 2;
}


.guide-article-page
.article-body blockquote::before {
  content: "POINT";

  position: absolute;

  top: -14px;

  left: 20px;

  padding:
    2px 10px;

  background:
    #f6f0e5;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 17px;

  color: #62a8bd;
}


/* ==================================================
   BODY IMAGES
================================================== */

.guide-article-page
.article-body figure {
  margin:
    60px 0 70px;
}


.guide-article-page
.article-body figure img {
  display: block;

  width: 100%;

  height: auto;

  padding: 8px;

  box-sizing: border-box;

  background: #fffdf8;

  border:
    1px solid
    rgba(41,41,41,.15);

  box-shadow:
    0 10px 25px
    rgba(41,41,41,.07);
}


.guide-article-page
.article-body figcaption {
  margin-top: 12px;

  text-align: center;

  font-size: 11px;

  color: #888;
}


/* ==================================================
   LIKE
================================================== */

.guide-article-page
.guide-article-ref-like {
  width:
    min(720px, calc(100% - 48px));

  margin:
    110px auto 0;

  text-align: center;
}


.guide-article-page
.guide-article-ref-like-inner {
  padding:
    55px 20px;

  border-top:
    1px dashed
    rgba(41,41,41,.3);

  border-bottom:
    1px dashed
    rgba(41,41,41,.3);
}


.guide-article-page
.guide-article-ref-like-small {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 18px;

  color: #62a8bd;
}


.guide-article-page
.article-like-text {
  margin:
    5px 0 20px;

  font-size: 13px;
}


.guide-article-page
.article-like-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-width: 95px;

  padding:
    11px 20px;

  border:
    1px solid
    rgba(41,41,41,.3);

  border-radius: 999px;

  background: #fffdf8;

  color: #292929;

  cursor: pointer;

  transition:
    transform .25s ease,
    background-color .25s ease;
}


.guide-article-page
.article-like-button:hover {
  transform:
    translateY(-2px);

  background:
    rgba(98,168,189,.12);
}


.guide-article-page
.article-like-heart {
  font-size: 23px;

  color: #62a8bd;
}


/* ==================================================
   PREV / NEXT
================================================== */

.guide-article-page
.guide-article-ref-navigation {
  width:
    min(900px, calc(100% - 48px));

  margin:
    100px auto 0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid
    rgba(41,41,41,.25);

  border-bottom:
    1px solid
    rgba(41,41,41,.25);
}


.guide-article-page
.article-navigation-item {
  min-width: 0;
}


.guide-article-page
.article-navigation-prev {
  border-right:
    1px solid
    rgba(41,41,41,.25);
}


.guide-article-page
.article-navigation-link {
  display: flex;

  min-height: 125px;

  padding:
    25px 30px;

  box-sizing: border-box;

  flex-direction: column;

  justify-content: center;

  color: #292929;

  text-decoration: none;

  transition:
    background-color .3s ease;
}


.guide-article-page
.article-navigation-link:hover {
  background:
    rgba(98,168,189,.08);
}


.guide-article-page
.article-navigation-label {
  margin-bottom: 10px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 16px;

  color: #62a8bd;
}


.guide-article-page
.article-navigation-title {
  font-size: 13px;

  line-height: 1.7;
}


.guide-article-page
.article-navigation-next
.article-navigation-link {
  text-align: right;

  align-items: flex-end;
}


/* ==================================================
   BACK TO GUIDE
================================================== */

.guide-article-page
.guide-article-ref-footer {
  padding:
    65px 24px 30px;

  text-align: center;
}


.guide-article-page
.guide-article-ref-footer a {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding:
    12px 25px;

  border:
    1px solid
    rgba(41,41,41,.35);

  border-radius: 999px;

  color: #292929;

  text-decoration: none;

  font-size: 12px;

  transition:
    background-color .25s ease,
    color .25s ease;
}


.guide-article-page
.guide-article-ref-footer a:hover {
  background: #62a8bd;

  border-color: #62a8bd;

  color: #fffdf8;
}


/* ==================================================
   ENDING
================================================== */

.guide-article-page
.guide-article-ref-ending {
  position: relative;

  width:
    min(900px, calc(100% - 48px));

  height: 100px;

  margin:
    0 auto 50px;
}


.guide-article-page
.guide-article-ref-ending::before {
  content: "";

  position: absolute;

  top: 50px;

  left: 0;

  width: 100%;

  border-top:
    1px dashed
    rgba(41,41,41,.2);
}


.guide-article-page
.guide-article-ref-ending span {
  position: absolute;

  z-index: 1;

  top: 24px;

  right: 8%;

  padding:
    5px 13px;

  background: #f6f0e5;

  font-size: 30px;

  transform:
    rotate(12deg);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {


  .guide-article-page
  .guide-article-ref-header {
    padding:
      80px 20px 40px;
  }


  .guide-article-page
  .guide-article-ref-label {
    margin-bottom: 40px;
  }


  .guide-article-page
  .guide-article-ref-number {
    font-size: 52px;
  }


  .guide-article-page
  .guide-article-ref-guide {
    font-size: 29px;
  }


  .guide-article-page
  .guide-article-ref-header h1 {
    font-size: 30px;

    line-height: 1.5;
  }


  .guide-article-page
  .guide-article-ref-header
  .article-lead {
    font-size: 13px;
  }


  .guide-article-page
  .guide-article-ref-paw,
  .guide-article-page
  .guide-article-ref-note {
    display: none;
  }


  .guide-article-page
  .guide-article-ref-main-image {
    width:
      calc(100% - 32px);

    margin-bottom: 70px;
  }


  .guide-article-page
  .guide-article-ref-photo {
    padding: 7px;
  }


  .guide-article-page
  .guide-article-ref-photo img {
    max-height: none;
  }


  .guide-article-page
  .guide-article-ref-body-wrap {
    width:
      calc(100% - 40px);
  }


  .guide-article-page
  .article-body {
    font-size: 14px;

    line-height: 2.15;
  }


  .guide-article-page
  .article-body h2 {
    margin:
      70px 0 30px;

    font-size: 22px;
  }


  .guide-article-page
  .article-body h3 {
    margin-top: 45px;

    font-size: 17px;
  }


  .guide-article-page
  .article-body ul,
  .guide-article-page
  .article-body ol {
    padding:
      20px 20px 20px 40px;
  }


  .guide-article-page
  .article-body blockquote {
    padding:
      28px 22px;
  }


  .guide-article-page
  .guide-article-ref-like {
    width:
      calc(100% - 40px);

    margin-top: 80px;
  }


  .guide-article-page
  .guide-article-ref-navigation {
    width:
      calc(100% - 40px);

    margin-top: 75px;

    grid-template-columns: 1fr;
  }


  .guide-article-page
  .article-navigation-prev {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(41,41,41,.25);
  }


  .guide-article-page
  .article-navigation-link {
    min-height: 100px;

    padding: 20px;
  }


  .guide-article-page
  .article-navigation-next
  .article-navigation-link {
    text-align: left;

    align-items: flex-start;
  }

}
/* ==================================================
   GLOBAL LOGO
   HOME / BLOG / GUIDE / ITEMS / EVENT / COMIC / ABOUT
   全ページ共通
================================================== */

.site-header .logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  margin: 0;
  padding: 0;

  color: #292929;
  text-decoration: none;

  line-height: 1;
}


.site-header .logo-main {
  display: block;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size: 31px;
  font-weight: 400;

  line-height: 1;
  letter-spacing: 0.02em;
}
/* ==================================================
   GUIDE TOP ALIGN WITH BLOG
================================================== */

/* GUIDE上部全体 */
.guide-page-body .guide-ref-heading {
  padding-top: 130px !important;
  padding-bottom: 45px !important;
}


/* 03 GUIDE */
.guide-page-body .guide-ref-heading-inner {
  width: min(1220px, calc(100% - 80px)) !important;
  max-width: none !important;
}


/* FIND BY をタイトル側へ寄せる */
.guide-page-body .guide-ref-category {
  padding-top: 0 !important;
  padding-bottom: 60px !important;
}


.guide-page-body .guide-ref-category-inner {
  width: min(1220px, calc(100% - 80px)) !important;
  max-width: none !important;
}


/* GUIDE一覧も同じ左右ライン */
.guide-page-body .guide-ref-list {
  width: min(1220px, calc(100% - 80px)) !important;
  max-width: none !important;
}


/* MOBILE */
@media (max-width: 820px) {

  .guide-page-body .guide-ref-heading {
    padding-top: 80px !important;
  }

  .guide-page-body .guide-ref-heading-inner,
  .guide-page-body .guide-ref-category-inner,
  .guide-page-body .guide-ref-list {
    width: calc(100% - 36px) !important;
  }

}
/* ==================================================
   GUIDE HEADER = BLOG LAYOUT
================================================== */

.guide-page-body .guide-ref-heading {
  padding: 130px 24px 55px;
}


.guide-page-body .guide-ref-heading-inner {
  position: relative;

  width: min(1220px, 100%);
  margin: 0 auto;
}


/* 03 + GUIDE */

.guide-page-body .guide-ref-title-row {
  display: flex;
  align-items: flex-end;

  gap: 24px;
}


.guide-page-body .guide-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 92px;
  font-weight: 400;

  line-height: .75;

  color: #62a8bd;
}


.guide-page-body .guide-ref-title-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.guide-page-body .guide-ref-title-text h1 {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 92px;
  font-weight: 400;

  line-height: .75;

  letter-spacing: -.02em;

  color: #292929;
}


.guide-page-body .guide-ref-subtitle {
  margin: 18px 0 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;
  font-weight: 600;

  line-height: 1.6;

  color: #292929;
}


/* PAW */

.guide-page-body .guide-ref-paw {
  position: absolute;

  top: -35px;
  right: 4%;

  font-size: 36px;

  opacity: .5;

  transform: rotate(16deg);
}


/* ==================================================
   CATEGORY
================================================== */

.guide-page-body .guide-ref-category {
  padding: 0 24px 65px;
}


.guide-page-body .guide-ref-category-inner {
  width: min(1220px, 100%);
  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 18px;

  padding-bottom: 20px;

  border-bottom:
    1px solid rgba(41, 41, 41, .25);
}


/* FIND BY はBLOGのカテゴリと同じ高さ感に */

.guide-page-body .guide-ref-category-label {
  margin-right: 8px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 14px;

  color: #62a8bd;
}


/* ==================================================
   LIST WIDTH
================================================== */

.guide-page-body .guide-ref-list {
  width: min(1220px, 100%);
  margin: 0 auto;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  .guide-page-body .guide-ref-heading {
    padding:
      80px 20px 45px;
  }


  .guide-page-body .guide-ref-title-row {
    gap: 12px;
  }


  .guide-page-body .guide-ref-number {
    font-size: 54px;
  }


  .guide-page-body .guide-ref-title-text h1 {
    font-size: 54px;
  }


  .guide-page-body .guide-ref-subtitle {
    margin-top: 10px;

    font-size: 12px;
  }


  .guide-page-body .guide-ref-paw {
    display: none;
  }


  .guide-page-body .guide-ref-category {
    padding:
      0 20px 50px;
  }


  .guide-page-body .guide-ref-category-inner {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
  }

}
/* ==================================================
   SITE FINAL ALIGNMENT
   HOME / BLOG / GUIDE
   2026-09-02

   ※ 現時点ではこれを style.css の一番最後に置く
================================================== */


/* ==================================================
   SITE VARIABLES
================================================== */

:root {
  --site-paper: #f6f0e5;
  --site-ink: #292929;
  --site-blue: #62a8bd;
  --site-orange: #e47a4e;
  --site-line: rgba(41, 41, 41, 0.14);

  --site-header-max: 1450px;
  --site-page-max: 1120px;
}


/* ==================================================
   GLOBAL HEADER
   全ページ完全共通
================================================== */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 1000;

  width: 100%;

  background:
    rgba(246, 240, 229, 0.95);

  border-bottom:
    1px solid var(--site-line);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


/* ==================================================
   HEADER INNER
================================================== */

.site-header .header-inner,
.home-page .site-header .header-inner {
  width: calc(100% - 76px) !important;

  max-width:
    var(--site-header-max) !important;

  height: 80px !important;
  min-height: 80px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;
}


/* ==================================================
   LOGO
================================================== */

.site-header .logo,
.site-header .home-logo,
.home-page .site-header .logo,
.home-page .site-header .home-logo {
  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;

  color:
    var(--site-ink);

  text-decoration: none;
}


/* MAIN LOGO */

.site-header .logo-main,
.home-page .site-header .logo-main {
  display: block;

  margin: 0;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size:
    34px !important;

  font-weight:
    400 !important;

  line-height:
    .82 !important;

  letter-spacing:
    .02em !important;

  color:
    var(--site-ink);
}


/* SMALL LOGO */

.site-header .logo-small,
.home-page .site-header .logo-small {
  display: block;

  margin:
    7px 0 0 4px !important;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;

  letter-spacing:
    .08em !important;

  color:
    var(--site-blue) !important;
}


/* ==================================================
   DESKTOP NAV
================================================== */

.site-header .desktop-nav,
.home-page .site-header .desktop-nav {
  display: flex !important;

  align-items: center;

  gap:
    26px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.site-header .desktop-nav a,
.home-page .site-header .desktop-nav a {
  position: relative;

  margin: 0;
  padding: 0;

  font-family:
    "Darumadrop One",
    "Noto Sans JP",
    sans-serif;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;

  letter-spacing:
    .12em !important;

  color:
    var(--site-ink);

  text-decoration: none;

  transition:
    opacity .25s ease;
}


.site-header .desktop-nav a:hover {
  opacity:
    .55;
}


/* CURRENT PAGE */

.site-header .desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;

  bottom:
    -9px;

  width: 0;
  height: 2px;

  background:
    var(--site-orange);

  transition:
    width .25s ease;
}


.site-header
.desktop-nav
a.current-page::after{
  width:
    100%;
}


/* ==================================================
   BODY TOP
   固定ヘッダー分
================================================== */

body.blog-page,
body.article-page,
body.guide-page-body,
body.guide-article-page {
  padding-top:
    80px !important;
}


/* ==================================================
   BLOG + GUIDE
   PAGE WIDTH 完全共通
================================================== */

.blog-page .blog-ref-title-inner,
.blog-page .blog-ref-category-inner,
.blog-page .blog-ref-list,

.guide-page-body .guide-ref-heading-inner,
.guide-page-body .guide-ref-category-inner,
.guide-page-body .guide-ref-list {
  width:
    min(var(--site-page-max), 100%) !important;

  max-width:
    var(--site-page-max) !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  box-sizing:
    border-box;
}


/* ==================================================
   BLOG + GUIDE
   TITLE AREA 共通
================================================== */

.blog-page .blog-ref-title-section,
.guide-page-body .guide-ref-heading {
  padding:
    110px 24px 42px !important;
}


/* ==================================================
   BLOG TITLE
================================================== */

.blog-page .blog-ref-title-inner {
  position:
    relative;

  display: flex;

  align-items:
    flex-start;

  gap:
    28px !important;
}


.blog-page .blog-ref-number {
  flex-shrink: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px) !important;

  font-weight:
    400;

  line-height:
    .8 !important;

  color:
    var(--site-orange);
}


.blog-page .blog-ref-en {
  margin:
    0 0 4px !important;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px) !important;

  font-weight:
    400 !important;

  line-height:
    .9 !important;

  letter-spacing:
    .02em !important;
}


.blog-page .blog-ref-title h1 {
  margin:
    16px 0 0 !important;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    14px !important;

  font-weight:
    500 !important;

  line-height:
    1.6;

  letter-spacing:
    .08em;
}


/* ==================================================
   GUIDE TITLE
   BLOGと同サイズ・同配置
================================================== */

.guide-page-body .guide-ref-heading-inner {
  position:
    relative;
}


.guide-page-body .guide-ref-title-row {
  display: flex !important;

  align-items:
    flex-start !important;

  gap:
    28px !important;
}


/* 03 */

.guide-page-body .guide-ref-number {
  flex-shrink: 0;

  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px) !important;

  font-weight:
    400 !important;

  line-height:
    .8 !important;

  color:
    var(--site-blue);
}


/* GUIDE側タイトル包み */

.guide-page-body .guide-ref-title-text {
  display: flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  padding-top:
    5px;
}


/* GUIDE */

.guide-page-body
.guide-ref-title-text h1,

.guide-page-body
.guide-ref-title-row > h1 {
  margin:
    0 !important;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px) !important;

  font-weight:
    400 !important;

  line-height:
    .9 !important;

  letter-spacing:
    .02em !important;

  color:
    var(--site-ink);
}


/* GUIDE SUBTITLE */

.guide-page-body .guide-ref-subtitle {
  margin:
    16px 0 0 !important;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    14px !important;

  font-weight:
    500 !important;

  line-height:
    1.6 !important;

  letter-spacing:
    .08em !important;

  color:
    var(--site-ink) !important;
}


/* ==================================================
   PAW
================================================== */

.blog-page .blog-ref-paw,
.guide-page-body .guide-ref-paw {
  position:
    absolute !important;

  top:
    -18px !important;

  right:
    3% !important;

  font-size:
    42px !important;

  opacity:
    .62 !important;
}


.blog-page .blog-ref-paw {
  transform:
    rotate(16deg);
}


.guide-page-body .guide-ref-paw {
  transform:
    rotate(16deg);
}


/* ==================================================
   BLOG CATEGORY
================================================== */

.blog-page .blog-ref-category {
  padding:
    0 24px 42px !important;
}


.blog-page .blog-ref-category-inner {
  display: flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    8px;

  padding-bottom:
    18px !important;

  border-bottom:
    1px solid rgba(41,41,41,.3);
}


/* ==================================================
   GUIDE CATEGORY
   BLOGの位置・幅と一致
================================================== */

.guide-page-body .guide-ref-category {
  padding:
    0 24px 42px !important;
}


.guide-page-body .guide-ref-category-inner {
  display: flex !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    8px !important;

  padding-bottom:
    18px !important;

  border-bottom:
    1px solid rgba(41,41,41,.3) !important;
}


.guide-page-body .guide-ref-category-label {
  margin-right:
    10px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    15px !important;

  color:
    var(--site-blue);
}


/* ==================================================
   FILTER BUTTON SIZE
   BLOG / GUIDE 共通
================================================== */

.blog-page .blog-filter,
.guide-page-body .guide-filter {
  min-height:
    36px;

  padding:
    8px 17px !important;

  border:
    1px solid rgba(41,41,41,.35);

  border-radius:
    999px;

  background:
    transparent;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    11px !important;

  font-weight:
    400;

  line-height:
    1;

  cursor:
    pointer;
}


/* BLOG ACTIVE */

.blog-page .blog-filter:hover,
.blog-page .blog-filter.active {
  background:
    var(--site-ink);

  border-color:
    var(--site-ink);

  color:
    #fffdf8;
}


/* GUIDE ACTIVE */

.guide-page-body .guide-filter:hover,
.guide-page-body .guide-filter.active {
  background:
    var(--site-blue);

  border-color:
    var(--site-blue);

  color:
    #fffdf8;
}


/* ==================================================
   BLOG + GUIDE
   CONTENT START
================================================== */

.blog-page .blog-ref-content,
.guide-page-body .guide-ref-list-section {
  padding-left:
    24px !important;

  padding-right:
    24px !important;
}


.blog-page .blog-ref-content {
  padding-bottom:
    100px !important;
}


.guide-page-body .guide-ref-list-section {
  padding-top:
    0 !important;

  padding-bottom:
    120px !important;
}


/* ==================================================
   GUIDE FEATURED
   BLOGと同じ外側ライン
================================================== */

.guide-page-body .guide-ref-featured {
  width:
    100%;

  margin:
    0;

  padding:
    55px !important;

  box-sizing:
    border-box;
}


/* ==================================================
   ARTICLE HEADER
   BLOG / GUIDE 共通ヘッダー幅
================================================== */

.article-page .article-ref-header-inner,
.guide-article-page .guide-article-ref-header-inner {
  width:
    min(900px, 100%) !important;

  max-width:
    900px !important;

  margin:
    0 auto !important;
}


/* ==================================================
   MOBILE HEADER
================================================== */

@media (max-width: 820px) {

  .site-header .header-inner,
  .home-page .site-header .header-inner {
    width:
      calc(100% - 40px) !important;

    max-width:
      none !important;

    height:
      68px !important;

    min-height:
      68px !important;
  }


  .site-header .logo-main,
  .home-page .site-header .logo-main {
    font-size:
      28px !important;
  }


  .site-header .logo-small,
  .home-page .site-header .logo-small {
    margin-top:
      5px !important;

    font-size:
      11px !important;
  }


  .site-header .desktop-nav {
    display:
      none !important;
  }


  .site-header .menu-button {
    display:
      block !important;

    border:
      0;

    background:
      transparent;

    font-size:
      26px;

    cursor:
      pointer;
  }


  body.blog-page,
  body.article-page,
  body.guide-page-body,
  body.guide-article-page {
    padding-top:
      68px !important;
  }

}


/* ==================================================
   MOBILE BLOG / GUIDE
================================================== */

@media (max-width: 760px) {

  .blog-page .blog-ref-title-section,
  .guide-page-body .guide-ref-heading {
    padding:
      85px 20px 30px !important;
  }


  .blog-page .blog-ref-title-inner,
  .guide-page-body .guide-ref-heading-inner {
    width:
      100% !important;

    max-width:
      none !important;
  }


  .blog-page .blog-ref-title-inner,
  .guide-page-body .guide-ref-title-row {
    gap:
      15px !important;
  }


  .blog-page .blog-ref-number,
  .guide-page-body .guide-ref-number {
    font-size:
      65px !important;
  }


  .blog-page .blog-ref-en,
  .guide-page-body
  .guide-ref-title-text h1,

  .guide-page-body
  .guide-ref-title-row > h1 {
    font-size:
      52px !important;
  }


  .blog-page .blog-ref-title h1,
  .guide-page-body .guide-ref-subtitle {
    margin-top:
      10px !important;

    font-size:
      12px !important;
  }


  .blog-page .blog-ref-paw,
  .guide-page-body .guide-ref-paw {
    font-size:
      28px !important;
  }


  .blog-page .blog-ref-category,
  .guide-page-body .guide-ref-category {
    padding:
      0 20px 30px !important;
  }


  .blog-page .blog-ref-category-inner,
  .guide-page-body .guide-ref-category-inner {
    width:
      100% !important;

    max-width:
      none !important;
  }


  .blog-page .blog-ref-content,
  .guide-page-body .guide-ref-list-section {
    padding-left:
      20px !important;

    padding-right:
      20px !important;
  }


  .blog-page .blog-ref-list,
  .guide-page-body .guide-ref-list {
    width:
      100% !important;

    max-width:
      none !important;
  }

}
/* ==================================================
   ITEMS REFERENCE DESIGN
================================================== */

body.items-page {
  padding-top: 80px !important;

  background: #f6f0e5;

  color: #292929;
}


.items-page .items-ref-page {
  overflow: hidden;
}


/* ==================================================
   HEADING
================================================== */

.items-page .items-ref-heading {
  padding: 110px 24px 42px;
}


.items-page .items-ref-heading-inner {
  position: relative;

  width: min(1120px, 100%);

  margin: 0 auto;
}


.items-page .items-ref-title-row {
  display: flex;

  align-items: flex-start;

  gap: 28px;
}


.items-page .items-ref-number {
  flex-shrink: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px);

  font-weight: 400;

  line-height: .8;

  color: #e3c45d;
}


.items-page .items-ref-title-text {
  padding-top: 5px;
}


.items-page .items-ref-title-text h1 {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px);

  font-weight: 400;

  line-height: .9;

  letter-spacing: .02em;
}


.items-page .items-ref-title-text p {
  margin: 16px 0 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: .08em;
}


.items-page .items-ref-description {
  width: min(440px, 100%);

  margin: 38px 0 0 0;

  padding-top: 20px;

  border-top:
    1px solid rgba(41,41,41,.25);

  font-size: 11px;

  line-height: 2;

  color: #777;
}


.items-page .items-ref-paw {
  position: absolute;

  top: -18px;

  right: 3%;

  font-size: 42px;

  opacity: .62;

  transform:
    rotate(-15deg);
}


/* ==================================================
   FILTER
================================================== */

.items-page .items-ref-filter {
  padding:
    0 24px 55px;
}


.items-page .items-ref-filter-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;

  padding:
    20px 0;

  border-top:
    1px solid rgba(41,41,41,.3);

  border-bottom:
    1px solid rgba(41,41,41,.3);
}


.items-page .items-ref-filter-row {
  display: flex;

  align-items: center;

  gap: 28px;

  min-height: 45px;
}


.items-page
.items-ref-filter-row
+
.items-ref-filter-row {
  border-top:
    1px dashed rgba(41,41,41,.16);
}


.items-page .items-ref-filter-label {
  width: 90px;

  flex-shrink: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 15px;

  color: #c4a638;
}


.items-page .items-filter-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.items-page .items-filter-button {
  min-height: 34px;

  padding:
    7px 16px;

  border:
    1px solid rgba(41,41,41,.3);

  border-radius:
    999px;

  background:
    transparent;

  color:
    #292929;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    10px;

  cursor: pointer;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}


.items-page .items-filter-button:hover,
.items-page .items-filter-button.active {
  background:
    #e3c45d;

  border-color:
    #e3c45d;

  color:
    #292929;
}


.items-page
.items-filter-button.filter-sui.active {
  background:
    #bfe2ee;

  border-color:
    #bfe2ee;

  color:
    #477f91;
}


.items-page
.items-filter-button.filter-on.active {
  background:
    #f4c7b9;

  border-color:
    #f4c7b9;

  color:
    #a95548;
}


/* ==================================================
   LIST
================================================== */

.items-page .items-ref-list-section {
  padding:
    0 24px 120px;
}


.items-page .items-ref-list-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


.items-ref-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px 22px;
}


/* ==================================================
   CARD
================================================== */

.items-page .items-ref-card {
  min-width: 0;

  position: relative;
}


.items-page .items-ref-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;

  padding-bottom: 7px;

  border-bottom:
    1px solid rgba(41,41,41,.22);
}


.items-page .items-ref-index {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 25px;

  line-height: 1;

  color: #c4a638;
}


.items-page .items-ref-card-label {
  font-size: 8px;

  font-weight: 700;

  letter-spacing: .14em;

  color: #999;
}


/* ==================================================
   IMAGE
================================================== */

.items-page .items-ref-image {
  position: relative;

  padding: 7px;

  background: #fffdf8;

  border:
    1px solid rgba(41,41,41,.14);

  box-shadow:
    5px 6px 0 rgba(41,41,41,.05);

  transform:
    rotate(-.3deg);
}


.items-page
.items-ref-card:nth-child(3n + 2)
.items-ref-image {
  transform:
    rotate(.45deg);
}


.items-page
.items-ref-card:nth-child(3n)
.items-ref-image {
  transform:
    rotate(-.65deg);
}


.items-page .items-ref-image-link {
  display: block;

  overflow: hidden;
}


.items-page .items-ref-image img {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  transition:
    transform .45s ease;
}


.items-page
.items-ref-image-link:hover img {
  transform:
    scale(1.035);
}


.items-page .items-ref-new {
  position: absolute;

  z-index: 2;

  top: -12px;

  left: -10px;

  padding:
    5px 11px;

  background:
    #e47a4e;

  color:
    #fff;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 14px;

  line-height: 1;

  transform:
    rotate(-7deg);
}


.items-page .items-ref-no-image {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  aspect-ratio: 1 / 1;

  background:
    #eee8dd;

  color: #aaa;

  font-size: 10px;

  letter-spacing: .1em;
}


/* ==================================================
   INFO
================================================== */

.items-page .items-ref-info {
  padding:
    19px 4px 0;
}


.items-page .items-ref-meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}


.items-page .items-ref-category {
  font-size: 9px;

  letter-spacing: .08em;

  color: #888;
}


.items-page .item-dog {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 45px;

  padding:
    4px 9px;

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


.items-page .item-dog-sui {
  background:
    #dceff4;

  color:
    #477f91;
}


.items-page .item-dog-on {
  background:
    #fae3dc;

  color:
    #b75b4e;
}


.items-page .item-dog-both {
  background:
    #ece9df;

  color:
    #666;
}


.items-page .items-ref-info h2 {
  margin:
    0 0 9px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    15px;

  font-weight:
    600;

  line-height:
    1.65;
}


.items-page .items-ref-price {
  margin:
    0 0 16px;

  font-size:
    12px;

  color:
    #666;
}


/* ==================================================
   LINKS
================================================== */

.items-page .items-ref-links {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    12px 18px;

  min-height: 35px;
}


.items-page .items-ref-shop-link,
.items-page .items-ref-blog-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding-bottom: 3px;

  color:
    #292929;

  text-decoration:
    none;

  font-size:
    10px;
}


.items-page .items-ref-shop-link {
  border-bottom:
    1px solid #292929;
}


.items-page .items-ref-blog-link {
  color:
    #777;
}


.items-page
.items-ref-shop-link span {
  transition:
    transform .25s ease;
}


.items-page
.items-ref-shop-link:hover span {
  transform:
    translate(2px, -2px);
}


/* ==================================================
   LIKE
================================================== */

.items-page .item-like {
  margin-top:
    18px;
}


.items-page .item-like-button {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    7px 13px;

  border:
    1px solid rgba(41,41,41,.2);

  border-radius:
    999px;

  background:
    transparent;

  color:
    #666;

  cursor: pointer;

  transition:
    background-color .25s ease,
    transform .25s ease;
}


.items-page .item-like-button:hover {
  transform:
    translateY(-2px);

  background:
    rgba(227,196,93,.12);
}


.items-page .item-like-heart {
  font-size: 18px;

  line-height: 1;

  color:
    #e47a4e;
}


.items-page .item-like-count {
  font-size: 11px;
}


/* ==================================================
   NOTE
================================================== */

.items-page .items-ref-note {
  padding:
    85px 24px;

  background:
    #efe6ce;
}


.items-page .items-ref-note-inner {
  width:
    min(760px, 100%);

  margin:
    0 auto;

  text-align: center;
}


.items-page .items-ref-note-en {
  margin:
    0 0 7px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 19px;

  color:
    #c4a638;
}


.items-page .items-ref-note h2 {
  margin:
    0 0 25px;

  font-size:
    clamp(25px, 4vw, 37px);

  font-weight:
    600;
}


.items-page
.items-ref-note-inner > p:last-child {
  margin: 0;

  font-size:
    12px;

  line-height:
    2.1;

  color:
    #666;
}


/* ==================================================
   ENDING
================================================== */

.items-page .items-ref-ending {
  position: relative;

  width:
    min(1120px, calc(100% - 48px));

  height:
    110px;

  margin:
    0 auto 45px;
}


.items-page
.items-ref-ending::before {
  content: "";

  position: absolute;

  top: 55px;

  left: 0;

  width: 100%;

  border-top:
    1px dashed rgba(41,41,41,.2);
}


.items-page
.items-ref-ending span {
  position: absolute;

  z-index: 1;

  top: 29px;

  right: 9%;

  padding:
    5px 12px;

  background:
    #f6f0e5;

  font-size:
    29px;

  transform:
    rotate(-12deg);
}


/* ==================================================
   EMPTY
================================================== */

.items-page .items-ref-empty {
  grid-column:
    1 / -1;

  padding:
    100px 20px;

  text-align:
    center;

  font-size:
    13px;

  line-height:
    2;

  color:
    #777;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

  .items-page .items-ref-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  body.items-page {
    padding-top:
      68px !important;
  }


  .items-page .items-ref-heading {
    padding:
      85px 20px 30px;
  }


  .items-page .items-ref-title-row {
    gap:
      15px;
  }


  .items-page .items-ref-number {
    font-size:
      65px;
  }


  .items-page
  .items-ref-title-text h1 {
    font-size:
      52px;
  }


  .items-page
  .items-ref-title-text p {
    margin-top:
      10px;

    font-size:
      12px;
  }


  .items-page
  .items-ref-description {
    margin-top:
      28px;
  }


  .items-page
  .items-ref-paw {
    font-size:
      28px;
  }


  .items-page
  .items-ref-filter {
    padding:
      0 20px 40px;
  }


  .items-page
  .items-ref-filter-row {
    display: block;

    padding:
      12px 0;
  }


  .items-page
  .items-ref-filter-label {
    display: block;

    width:
      auto;

    margin-bottom:
      10px;
  }


  .items-page
  .items-ref-list-section {
    padding:
      0 20px 85px;
  }


  .items-page
  .items-ref-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap:
      55px 14px;
  }


  .items-page
  .items-ref-index {
    font-size:
      20px;
  }


  .items-page
  .items-ref-card-label {
    display:
      none;
  }


  .items-page
  .items-ref-image {
    padding:
      4px;
  }


  .items-page
  .items-ref-new {
    top:
      -8px;

    left:
      -5px;

    font-size:
      11px;
  }


  .items-page
  .items-ref-info {
    padding-top:
      14px;
  }


  .items-page
  .items-ref-info h2 {
    font-size:
      12px;
  }


  .items-page
  .items-ref-meta {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;
  }


  .items-page
  .items-ref-price {
    font-size:
      10px;
  }


  .items-page
  .items-ref-links {
    display:
      block;
  }


  .items-page
  .items-ref-shop-link,
  .items-page
  .items-ref-blog-link {
    display:
      table;

    margin-bottom:
      8px;

    font-size:
      9px;
  }


  .items-page
  .items-ref-note {
    padding:
      65px 20px;
  }

}
/* ==================================================
   ITEMS FINAL TUNING
================================================== */


/* 上部をBLOG / GUIDEにさらに近づける */

.items-page .items-ref-heading {
  padding-bottom: 30px;
}


/* 説明文を少し近づける */

.items-page .items-ref-description {
  margin-top: 28px;
  padding-top: 16px;
}


/* FILTERを少し上へ */

.items-page .items-ref-filter {
  padding-top: 0;
  padding-bottom: 48px;
}


/* 商品一覧の開始位置を少し上げる */

.items-page .items-ref-list-section {
  padding-top: 0;
}


/* カード間隔を少しだけ詰める */

.items-page .items-ref-grid {
  gap: 62px 28px;
}


/* 商品画像をほんの少しコンパクトに */

.items-page .items-ref-image {
  max-width: 100%;
}


/* 商品タイトルを少し読みやすく */

.items-page .items-ref-info h2 {
  font-size: 14px;
  line-height: 1.55;
}


/* 番号を少しだけ控えめに */

.items-page .items-ref-index {
  font-size: 22px;
}


/* FAVORITE ITEMも少し弱く */

.items-page .items-ref-card-label {
  font-size: 7px;
  letter-spacing: .16em;
}
/* ==================================================
   EVENT REFERENCE DESIGN
================================================== */

body.event-page {
  padding-top: 80px !important;
  background: #f6f0e5;
  color: #292929;
}

.event-page .event-ref-page {
  overflow: hidden;
}


/* ==================================================
   HEADING
================================================== */

.event-page .event-ref-heading {
  padding: 110px 24px 42px;
}

.event-page .event-ref-heading-inner {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.event-page .event-ref-title-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.event-page .event-ref-number {
  flex-shrink: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px);

  font-weight: 400;
  line-height: .8;

  color: #e47a4e;
}

.event-page .event-ref-title-text {
  padding-top: 5px;
}

.event-page .event-ref-title-text h1 {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px);

  font-weight: 400;
  line-height: .9;
  letter-spacing: .02em;
}

.event-page .event-ref-title-text p {
  margin: 16px 0 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
}

.event-page .event-ref-description {
  width: min(440px, 100%);
  margin: 28px 0 0;
  padding-top: 16px;

  border-top:
    1px solid rgba(41,41,41,.25);

  font-size: 11px;
  line-height: 2;
  color: #777;
}

.event-page .event-ref-paw {
  position: absolute;
  top: -18px;
  right: 3%;

  font-size: 42px;

  opacity: .62;

  transform:
    rotate(15deg);
}


/* ==================================================
   FILTER
================================================== */

.event-page .event-ref-filter {
  padding: 0 24px 55px;
}

.event-page .event-ref-filter-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 20px 0;

  border-top:
    1px solid rgba(41,41,41,.3);

  border-bottom:
    1px solid rgba(41,41,41,.3);
}

.event-page .event-ref-filter-row {
  display: flex;
  align-items: center;
  gap: 28px;

  min-height: 45px;
}

.event-page
.event-ref-filter-row
+
.event-ref-filter-row {
  border-top:
    1px dashed rgba(41,41,41,.16);
}

.event-page .event-ref-filter-label {
  width: 90px;
  flex-shrink: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 15px;

  color: #e47a4e;
}
.event-page .event-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ==================================================
   TYPE BUTTON
================================================== */

.event-page .event-type-button {

  min-height: 34px;

  padding:
    7px 16px;

  border:
    1px solid rgba(41,41,41,.3);

  border-radius:
    999px;

  background:
    transparent;

  color:
    #292929;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 10px;

  cursor: pointer;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}


.event-page .event-type-button:hover,
.event-page .event-type-button.active {

  background:
    #e47a4e;

  border-color:
    #e47a4e;

  color:
    #fffdf8;
}


/* ==================================================
   REGION BUTTON
   ITEMS CATEGORY と同じデザイン
================================================== */

.event-page .event-region-button {

  width: 82px;
  height: 82px;
  min-height: 82px;

  padding: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  border:
    1px solid rgba(41,41,41,.28);

  border-radius:
    50%;

  background:
    transparent;

  color:
    #292929;

  font-family:
    "Noto Sans JP",
    sans-serif;

  cursor: pointer;

  transition:
    transform .2s ease,
    background-color .25s ease,
    border-color .25s ease;
}


/* ICON */

.event-page .event-region-icon {

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 27px;

  font-size: 22px;
  line-height: 1;
}


/* TEXT */

.event-page .event-region-text {

  font-size: 9px;
  font-weight: 700;

  line-height: 1.2;
  letter-spacing: .04em;

  white-space: nowrap;
}


/* HOVER */

.event-page .event-region-button:hover {

  transform:
    translateY(-2px);

  background:
    rgba(228,122,78,.10);

  border-color:
    #e47a4e;
}


/* ACTIVE */

.event-page .event-region-button.active {

  background:
    #e47a4e;

  border-color:
    #e47a4e;

  color:
    #fffdf8;
}


.event-page
.event-region-button.active
.event-region-icon {

  transform:
    rotate(-5deg);
}



/* ==================================================
   UPCOMING
================================================== */

.event-page .event-ref-upcoming {
  padding: 0 24px 110px;
}

.event-page .event-ref-upcoming-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.event-page .event-ref-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;

  margin-bottom: 38px;
}

.event-page .event-ref-small {
  margin: 0 0 5px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 16px;

  color: #e47a4e;
}

.event-page .event-ref-section-heading h2,
.event-page .event-ref-calendar-heading h2,
.event-page .event-ref-notice h2 {
  margin: 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(24px, 3.4vw, 38px);

  font-weight: 600;

  line-height: 1.5;
}

.event-page
.event-ref-section-heading
> p {
  margin: 0;

  font-size: 11px;
  line-height: 1.9;
  color: #777;

  text-align: right;
}


/* ==================================================
   EVENT LIST
================================================== */

.event-page .event-ref-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 26px;
}

.event-page .event-card {
  overflow: hidden;

  border:
    1px solid rgba(41,41,41,.16);

  border-radius: 0;

  background:
    #fffdf8;

  box-shadow:
    6px 7px 0 rgba(41,41,41,.045);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.event-page .event-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    8px 10px 0 rgba(41,41,41,.055);
}

.event-page .event-card-image {
  width: 100%;
  aspect-ratio: 16 / 8.5;

  overflow: hidden;

  border-radius: 0;

  background:
    #eee8dd;
}

.event-page .event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform .45s ease;
}

.event-page
.event-card:hover
.event-card-image img {
  transform:
    scale(1.035);
}

.event-page .event-card-content {
  padding:
    24px 26px 27px;
}

.event-page .event-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 15px;
}

.event-page .event-type-label {
  display: inline-flex;
  align-items: center;

  padding:
    5px 10px;

  border-radius:
    999px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}

.event-page
.event-type-label.event-type-normal {
  background:
    #f5d8ca;

  color:
    #a9573c;
}

.event-page
.event-type-label.event-type-adoption {
  background:
    #dcebf2;

  color:
    #527f91;
}

.event-page .event-status {
  padding:
    5px 10px;

  border-radius:
    999px;

  font-size: 8px;
}

.event-page .event-card-date {
  margin:
    0 0 10px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size: 19px;

  letter-spacing: .04em;

  color: #e47a4e;
}

.event-page .event-card-title {
  margin:
    0 0 13px;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

.event-page .event-card-place {
  margin:
    0 0 5px;

  font-size: 11px;
  line-height: 1.7;

  color: #666;
}

.event-page .event-card-address {
  margin: 0;

  font-size: 10px;
  line-height: 1.7;

  color: #999;
}

.event-page .event-card-description {
  margin:
    18px 0 0;

  padding-top: 16px;

  border-top:
    1px dashed rgba(41,41,41,.18);

  font-size: 11px;
  line-height: 1.9;

  color: #777;
}

.event-page .event-detail-link {
  display: inline-flex;

  margin-top: 18px;

  padding-bottom: 4px;

  border-bottom:
    1px solid #292929;

  font-size: 10px;

  color: #292929;
}


/* ==================================================
   CALENDAR
================================================== */

.event-page
.event-ref-calendar-section {
  padding:
    95px 24px 110px;

  background:
    #efe5da;
}

.event-page
.event-ref-calendar-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;
}

.event-page
.event-ref-calendar-heading {
  margin-bottom:
    35px;
}

.event-page
.event-ref-calendar-heading > p:last-child {
  margin:
    12px 0 0;

  font-size:
    11px;

  color:
    #777;
}

.event-page .event-ref-calendar {
  max-width:
    1000px;

  margin:
    0 auto;

  padding:
    32px;

  border:
    1px solid rgba(41,41,41,.14);

  border-radius:
    0;

  background:
    #fffdf8;

  box-shadow:
    7px 8px 0 rgba(41,41,41,.04);
}

.event-page .calendar-header {
  margin-bottom:
    28px;
}

.event-page .calendar-header h3 {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    31px;

  font-weight:
    400;
}

.event-page .calendar-button {
  width: 42px;
  height: 42px;

  border:
    1px solid rgba(41,41,41,.25);

  border-radius:
    50%;

  background:
    transparent;

  cursor:
    pointer;
}

.event-page .calendar-day.today .calendar-date {
  background:
    #e47a4e;

  color:
    #fff;
}


/* ==================================================
   NOTICE
================================================== */

.event-page .event-ref-notice {
  padding:
    90px 24px;
}

.event-page .event-ref-notice-inner {
  width:
    min(700px, 100%);

  margin:
    0 auto;

  text-align:
    center;
}

.event-page
.event-ref-notice-inner > p:last-child {
  margin:
    25px 0 0;

  font-size:
    12px;

  line-height:
    2.1;

  color:
    #666;
}


/* ==================================================
   ENDING
================================================== */

.event-page .event-ref-ending {
  position: relative;

  width:
    min(1120px, calc(100% - 48px));

  height:
    105px;

  margin:
    0 auto 45px;
}

.event-page
.event-ref-ending::before {
  content: "";

  position: absolute;

  top: 52px;
  left: 0;

  width: 100%;

  border-top:
    1px dashed rgba(41,41,41,.2);
}

.event-page
.event-ref-ending span {
  position: absolute;

  z-index: 1;

  top: 26px;
  right: 8%;

  padding:
    5px 12px;

  background:
    #f6f0e5;

  font-size:
    29px;

  transform:
    rotate(12deg);
}


/* ==================================================
   EMPTY
================================================== */

.event-page .events-empty {
  grid-column:
    1 / -1;

  padding:
    80px 20px;

  text-align:
    center;

  color:
    #777;

  font-size:
    13px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  body.event-page {
    padding-top:
      68px !important;
  }


  .event-page .event-ref-heading {
    padding:
      85px 20px 30px;
  }


  .event-page .event-ref-title-row {
    gap:
      15px;
  }


  .event-page .event-ref-number {
    font-size:
      65px;
  }


  .event-page
  .event-ref-title-text h1 {
    font-size:
      52px;
  }


  .event-page
  .event-ref-title-text p {
    margin-top:
      10px;

    font-size:
      12px;
  }


  .event-page .event-ref-paw {
    font-size:
      28px;
  }


  .event-page .event-ref-filter {
    padding:
      0 20px 42px;
  }


  .event-page
  .event-ref-filter-row {
    display:
      block;

    padding:
      12px 0;
  }


  .event-page
  .event-ref-filter-label {
    display:
      block;

    width:
      auto;

    margin-bottom:
      10px;
  }


  .event-page
  .event-ref-upcoming {
    padding:
      0 20px 80px;
  }


  .event-page
  .event-ref-section-heading {
    display:
      block;
  }


  .event-page
  .event-ref-section-heading
  > p {
    margin-top:
      15px;

    text-align:
      left;
  }


  .event-page .event-ref-list {
    grid-template-columns:
      1fr;
  }


  .event-page
  .event-ref-calendar-section {
    padding:
      70px 16px 85px;
  }


  .event-page
  .event-ref-calendar {
    padding:
      18px;
  }


  .event-page .calendar-day {
    min-height:
      70px;
  }


  .event-page .event-ref-notice {
    padding:
      70px 20px;
  }

}
/* ==================================================
   EVENT DETAIL REFERENCE DESIGN
================================================== */

body.event-detail-page-body {
  padding-top: 80px !important;

  background: #f6f0e5;
  color: #292929;
}


/* ==================================================
   HEADER
================================================== */

.event-detail-ref-header {
  padding:
    105px 24px 65px;
}


.event-detail-ref-header-inner {
  position: relative;

  width:
    min(900px, 100%);

  margin:
    0 auto;
}


/* 05 EVENT */

.event-detail-ref-label {
  display: flex;

  align-items: flex-end;

  gap: 14px;

  margin-bottom:
    55px;
}


.event-detail-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    64px;

  line-height:
    .75;

  color:
    #e47a4e;
}


.event-detail-ref-event {
  display: block;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    35px;

  line-height:
    .8;
}


.event-detail-back {
  display: inline-block;

  margin-top:
    13px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    12px;

  letter-spacing:
    .08em;

  color:
    #777;
}


.event-detail-back:hover {
  color:
    #e47a4e;
}


/* META */

.event-detail-page-body
.event-detail-meta {
  display: flex;

  align-items: center;

  gap:
    8px;

  margin-bottom:
    17px;
}


/* DATE */

.event-detail-page-body
.event-detail-date {
  margin:
    0 0 12px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    21px;

  color:
    #e47a4e;

  letter-spacing:
    .05em;
}


/* TITLE */

.event-detail-page-body
.event-detail-title {
  width:
    min(820px, 100%);

  margin:
    0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(32px, 5vw, 55px);

  font-weight:
    600;

  line-height:
    1.45;
}


/* LOCATION */

.event-detail-page-body
.event-detail-location {
  margin:
    22px 0 0;

  font-size:
    12px;

  line-height:
    1.8;

  color:
    #777;
}


/* PAW */

.event-detail-ref-paw {
  position: absolute;

  top:
    28px;

  right:
    -25px;

  font-size:
    35px;

  opacity:
    .5;

  transform:
    rotate(16deg);
}


/* ==================================================
   TYPE
================================================== */

.event-detail-page-body
.event-type-label {
  display: inline-flex;

  align-items: center;

  padding:
    5px 10px;

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .1em;
}


.event-detail-page-body
.event-type-label.event-type-normal {
  background:
    #f5d8ca;

  color:
    #a9573c;
}


.event-detail-page-body
.event-type-label.event-type-adoption {
  background:
    #dcebf2;

  color:
    #527f91;
}


/* ==================================================
   MAIN IMAGE
================================================== */

.event-detail-page-body
.event-detail-image-section {
  padding:
    0 24px 100px;

  background:
    transparent;
}


.event-detail-ref-image-inner {
  width:
    min(1060px, 100%);

  margin:
    0 auto;
}


.event-detail-ref-photo {
  position: relative;

  padding:
    12px;

  background:
    #fffdf8;

  border:
    1px solid rgba(41,41,41,.17);

  box-shadow:
    0 15px 35px
    rgba(41,41,41,.09);

  transform:
    rotate(-.45deg);
}


.event-detail-ref-tape {
  position: absolute;

  z-index:
    2;

  top:
    -20px;

  left:
    50%;

  width:
    130px;

  height:
    34px;

  background:
    rgba(221,205,171,.72);

  transform:
    translateX(-50%)
    rotate(2deg);
}


.event-detail-page-body
.event-detail-image {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  overflow:
    hidden;

  border-radius:
    0;
}


.event-detail-page-body
.event-detail-image img {
  display: block;

  width:
    100%;

  max-height:
    680px;

  object-fit:
    cover;
}


/* NO IMAGE */

.event-detail-page-body
.event-detail-no-image {
  display: flex;

  align-items: center;

  justify-content: center;

  width:
    100%;

  aspect-ratio:
    16 / 8;

  background:
    #eee8dd;
}


.event-detail-page-body
.event-detail-no-image span {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    20px;

  letter-spacing:
    .12em;

  color:
    #999;
}


/* ==================================================
   CONTENT
================================================== */

.event-detail-ref-content-section {
  padding:
    0 24px 110px;
}


.event-detail-ref-content-inner {
  width:
    min(1000px, 100%);

  margin:
    0 auto;
}


.event-detail-page-body
.event-detail-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(260px, .75fr);

  gap:
    80px;

  align-items:
    start;
}


/* MAIN */

.event-detail-ref-small {
  margin:
    0 0 20px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    17px;

  color:
    #e47a4e;
}


.event-detail-page-body
.event-detail-content {
  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    14px;

  line-height:
    2.15;

  color:
    #555;
}


.event-detail-page-body
.event-detail-content p {
  margin:
    0 0 30px;
}


.event-detail-page-body
.event-detail-content h2 {
  position: relative;

  margin:
    65px 0 25px;

  padding-bottom:
    12px;

  font-size:
    21px;

  font-weight:
    600;

  border-bottom:
    1px solid rgba(41,41,41,.25);
}


.event-detail-page-body
.event-detail-content h2::before {
  content: "";

  position: absolute;

  left:
    0;

  bottom:
    -2px;

  width:
    50px;

  height:
    4px;

  background:
    #e47a4e;
}


/* ==================================================
   INFORMATION CARD
================================================== */

.event-detail-page-body
.event-detail-info {
  position:
    sticky;

  top:
    110px;

  padding:
    27px 25px;

  border:
    1px solid rgba(41,41,41,.18);

  border-radius:
    0;

  background:
    #fffdf8;

  box-shadow:
    6px 7px 0
    rgba(41,41,41,.045);
}


.event-detail-page-body
.event-detail-info-label {
  margin:
    0 0 20px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    20px;

  color:
    #e47a4e;
}


.event-detail-page-body
.event-info-row {
  padding:
    17px 0;

  border-top:
    1px dashed rgba(41,41,41,.18);
}


.event-detail-page-body
.event-info-title {
  margin:
    0 0 6px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    12px;

  color:
    #999;
}


.event-detail-page-body
.event-info-value {
  font-size:
    12px;

  line-height:
    1.8;
}


.event-detail-page-body
.event-info-value span {
  display: block;

  margin-top:
    3px;

  font-size:
    10px;

  color:
    #999;
}


.event-detail-page-body
.event-info-link {
  display:
    inline-block;

  padding-bottom:
    3px;

  border-bottom:
    1px solid #292929;

  font-size:
    10px;
}


/* ==================================================
   LIKE
================================================== */

.event-detail-ref-like {
  padding:
    0 24px 105px;
}


.event-detail-ref-like-inner {
  width:
    min(720px, 100%);

  margin:
    0 auto;
}


.event-detail-page-body
.article-like {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  padding:
    50px 20px;

  text-align:
    center;

  border-top:
    1px dashed rgba(41,41,41,.28);

  border-bottom:
    1px dashed rgba(41,41,41,.28);
}


.event-detail-ref-like-small {
  margin:
    0 0 5px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    18px;

  color:
    #62a8bd;
}


.event-detail-page-body
.article-like-text {
  margin:
    0 0 20px;

  font-size:
    13px;
}


.event-detail-page-body
.article-like-heart {
  color:
    #e47a4e;
}


/* ==================================================
   NOTICE
================================================== */

.event-detail-ref-notice {
  padding:
    90px 24px;

  background:
    #efe5da;
}


.event-detail-ref-notice-inner {
  width:
    min(700px, 100%);

  margin:
    0 auto;

  text-align:
    center;
}


.event-detail-ref-notice h2 {
  margin:
    0;

  font-size:
    clamp(25px, 4vw, 37px);

  font-weight:
    600;
}


.event-detail-ref-notice
> .event-detail-ref-notice-inner
> p:last-child {
  margin:
    25px 0 0;

  font-size:
    12px;

  line-height:
    2.1;

  color:
    #666;
}


/* ==================================================
   ENDING
================================================== */

.event-detail-ref-ending {
  position:
    relative;

  width:
    min(900px, calc(100% - 48px));

  height:
    105px;

  margin:
    0 auto 45px;
}


.event-detail-ref-ending::before {
  content: "";

  position: absolute;

  top:
    52px;

  left:
    0;

  width:
    100%;

  border-top:
    1px dashed rgba(41,41,41,.2);
}


.event-detail-ref-ending span {
  position: absolute;

  z-index:
    1;

  top:
    26px;

  right:
    8%;

  padding:
    5px 12px;

  background:
    #f6f0e5;

  font-size:
    29px;

  transform:
    rotate(-12deg);
}


/* ==================================================
   NOT FOUND
================================================== */

.event-detail-ref-not-found {
  min-height:
    70vh;

  padding:
    150px 24px;

  text-align:
    center;
}


.event-detail-ref-not-found-inner {
  width:
    min(700px, 100%);

  margin:
    0 auto;
}


.event-detail-ref-not-found h1 {
  margin:
    0 0 20px;

  font-size:
    30px;
}


.event-detail-ref-not-found
.main-button {
  margin-top:
    30px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  body.event-detail-page-body {
    padding-top:
      68px !important;
  }


  .event-detail-ref-header {
    padding:
      80px 20px 45px;
  }


  .event-detail-ref-label {
    margin-bottom:
      40px;
  }


  .event-detail-ref-number {
    font-size:
      52px;
  }


  .event-detail-ref-event {
    font-size:
      29px;
  }


  .event-detail-page-body
  .event-detail-title {
    font-size:
      29px;
  }


  .event-detail-ref-paw {
    display:
      none;
  }


  .event-detail-page-body
  .event-detail-image-section {
    padding:
      0 16px 70px;
  }


  .event-detail-ref-photo {
    padding:
      7px;
  }


  .event-detail-page-body
  .event-detail-image img {
    max-height:
      none;
  }


  .event-detail-ref-content-section {
    padding:
      0 20px 80px;
  }


  .event-detail-page-body
  .event-detail-layout {
    display:
      flex;

    flex-direction:
      column;

    gap:
      55px;
  }


  .event-detail-page-body
  .event-detail-info {
    position:
      static;

    width:
      100%;
  }


  .event-detail-ref-like {
    padding:
      0 20px 80px;
  }


  .event-detail-ref-notice {
    padding:
      70px 20px;
  }

}
/* ==================================================
   COMIC FINAL DESIGN
================================================== */

body.comic-page-body,
body.comic-series-page-body,
body.comic-detail-page-body {
  padding-top: 80px !important;

  background:
    #f6f0e5;

  color:
    #292929;
}


/* ==================================================
   COMMON
================================================== */

.comic-ref-small {
  margin:
    0 0 8px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    16px;

  color:
    #62a8bd;
}


/* ==================================================
   COMIC INDEX HEADER
================================================== */

.comic-ref-heading {
  padding:
    110px 24px 55px;
}


.comic-ref-heading-inner {
  position:
    relative;

  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


.comic-ref-title-row {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    28px;
}


.comic-ref-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px);

  line-height:
    .8;

  color:
    #62a8bd;
}


.comic-ref-title-row h1 {
  margin:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px);

  font-weight:
    400;

  line-height:
    .9;
}


.comic-ref-title-row p {
  margin:
    16px 0 0;

  font-size:
    14px;

  font-weight:
    500;

  letter-spacing:
    .08em;
}


.comic-ref-description {
  width:
    min(430px, 100%);

  margin:
    30px 0 0;

  padding-top:
    17px;

  border-top:
    1px solid rgba(41,41,41,.25);

  font-size:
    11px;

  line-height:
    2;

  color:
    #777;
}


.comic-ref-paw {
  position:
    absolute;

  top:
    -20px;

  right:
    4%;

  font-size:
    40px;

  opacity:
    .55;

  transform:
    rotate(16deg);
}


/* ==================================================
   SERIES INDEX
================================================== */

.comic-ref-series {
  padding:
    20px 24px 120px;
}


.comic-ref-series-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


.comic-ref-series-inner > h2 {
  margin:
    0 0 40px;

  font-size:
    30px;

  font-weight:
    600;
}


.comic-page-body
.comic-list {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    35px;
}


/* CARD */

.comic-page-body
.comic-list-card {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, .9fr);

  min-height:
    410px;

  overflow:
    hidden;

  border:
    1px solid rgba(41,41,41,.16);

  background:
    #fffdf8;

  box-shadow:
    7px 8px 0
    rgba(41,41,41,.045);

  color:
    #292929;

  transition:
    transform .3s ease;
}


.comic-page-body
a.comic-list-card:hover {
  transform:
    translateY(-5px)
    rotate(-.3deg);
}


.comic-list-image {
  position:
    relative;

  overflow:
    hidden;

  background:
    #eee8dd;
}


.comic-list-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.comic-list-tape {
  position:
    absolute;

  z-index:
    2;

  top:
    15px;

  left:
    50%;

  width:
    95px;

  height:
    25px;

  background:
    rgba(226,210,174,.75);

  transform:
    translateX(-50%)
    rotate(-3deg);
}


.comic-list-info {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    32px;
}


.comic-list-small {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    12px;

  color:
    #62a8bd;
}


.comic-list-count {
  margin-top:
    6px;

  font-size:
    9px;

  color:
    #999;
}


.comic-list-info h2 {
  margin:
    17px 0;

  font-size:
    27px;

  font-weight:
    600;
}


.comic-list-info p {
  margin:
    0;

  font-size:
    11px;

  line-height:
    1.9;

  color:
    #777;
}


.comic-list-info strong {
  margin-top:
    28px;

  font-size:
    10px;

  font-weight:
    500;
}


/* ==================================================
   COMING SOON
================================================== */

.comic-coming-image {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    100%;

  background:
    repeating-linear-gradient(
      0deg,
      #f0eadf 0,
      #f0eadf 29px,
      rgba(98,168,189,.18) 30px
    );

  text-align:
    center;
}


.comic-coming-image strong {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    50px;

  font-weight:
    400;

  line-height:
    .9;

  color:
    #e47a4e;

  transform:
    rotate(-4deg);
}


.comic-coming-image small {
  margin-top:
    15px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    12px;
}


.comic-coming-doodle {
  position:
    absolute;

  top:
    25px;

  right:
    28px;

  font-size:
    30px;

  transform:
    rotate(20deg);
}


/* ==================================================
   SERIES PAGE
================================================== */

.comic-series-page {
  padding:
    105px 24px 120px;
}


.comic-series-inner {
  width:
    min(1000px, 100%);

  margin:
    0 auto;
}


.comic-series-header {
  position:
    relative;

  margin-bottom:
    85px;
}


.comic-series-heading-label,
.comic-detail-heading-label {
  display:
    flex;

  align-items:
    flex-end;

  gap:
    13px;

  margin-bottom:
    55px;
}


.comic-series-heading-number,
.comic-detail-heading-label > span {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    60px;

  line-height:
    .75;

  color:
    #62a8bd;
}


.comic-series-heading-comic,
.comic-detail-heading-label strong {
  display:
    block;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    33px;

  font-weight:
    400;

  line-height:
    .8;
}


.comic-series-back-link,
.comic-detail-heading-label a {
  display:
    block;

  margin-top:
    12px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    11px;

  color:
    #777;
}


.comic-series-header h1 {
  margin:
    0;

  font-size:
    clamp(38px, 6vw, 64px);

  font-weight:
    600;
}


.comic-series-lead {
  width:
    min(600px, 100%);

  margin:
    25px 0 0;

  font-size:
    13px;

  line-height:
    2;

  color:
    #777;
}


.comic-series-paw {
  position:
    absolute;

  right:
    4%;

  bottom:
    0;

  font-size:
    38px;

  opacity:
    .5;

  transform:
    rotate(-15deg);
}


/* ==================================================
   SERIES EPISODES
================================================== */

.comic-series-list {
  border-top:
    1px solid rgba(41,41,41,.2);
}


.comic-series-item {
  padding:
    55px 0;

  border-bottom:
    1px dashed rgba(41,41,41,.22);
}


.comic-series-item-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    22px;
}


.comic-series-number {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    25px;

  color:
    #62a8bd;
}


.comic-series-published,
.comic-series-coming-label {
  padding:
    5px 10px;

  border-radius:
    999px;

  font-size:
    8px;

  letter-spacing:
    .1em;
}


.comic-series-published {
  background:
    #dcebf2;

  color:
    #527f91;
}


.comic-series-coming-label {
  background:
    #eee6da;

  color:
    #999;
}


.comic-series-preview {
  display:
    grid;

  grid-template-columns:
    280px minmax(0, 1fr);

  gap:
    45px;

  align-items:
    center;
}


.comic-series-preview-image {
  display:
    block;

  position:
    relative;

  padding:
    8px;

  background:
    #fffdf8;

  border:
    1px solid rgba(41,41,41,.16);

  box-shadow:
    5px 6px 0
    rgba(41,41,41,.04);

  transform:
    rotate(-.5deg);
}


.comic-series-preview-image img {
  display:
    block;

  width:
    100%;

  height:
    320px;

  object-fit:
    cover;

  object-position:
    top;
}


.comic-series-preview-info h2 {
  margin:
    0 0 18px;

  font-size:
    23px;
}


.comic-series-preview-info p {
  margin:
    0;

  font-size:
    12px;

  line-height:
    2;

  color:
    #777;
}


.comic-series-read,
.comic-series-preparing {
  display:
    inline-block;

  margin-top:
    25px;

  font-size:
    10px;
}


.comic-series-read {
  padding-bottom:
    4px;

  border-bottom:
    1px solid #292929;
}


.comic-series-preparing {
  color:
    #aaa;
}


/* COMING EPISODE */

.comic-series-item-coming
.comic-series-preview {
  opacity:
    .55;
}


.comic-series-item-coming
.comic-series-preview-image {
  filter:
    grayscale(.65);
}


/* ==================================================
   SERIES LIKE
================================================== */

.comic-series-like-section {
  padding:
    90px 0 50px;
}


.comic-series-like {
  padding:
    50px 20px;

  border-top:
    1px dashed rgba(41,41,41,.25);

  border-bottom:
    1px dashed rgba(41,41,41,.25);

  text-align:
    center;
}


.comic-series-like > p:not(.comic-ref-small) {
  margin:
    0 0 20px;

  font-size:
    13px;
}


.comic-like-button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    90px;

  justify-content:
    center;

  padding:
    10px 20px;

  border:
    1px solid rgba(41,41,41,.25);

  border-radius:
    999px;

  background:
    transparent;

  cursor:
    pointer;
}


.comic-like-button
.article-like-heart {
  font-size:
    21px;

  color:
    #e47a4e;
}


.comic-like-button.liked {
  background:
    #f6dfd5;

  border-color:
    #e47a4e;
}


/* ==================================================
   TO BE CONTINUED
================================================== */

.comic-series-coming {
  padding:
    65px 20px;

  text-align:
    center;
}


.comic-series-coming span {
  display:
    block;

  font-size:
    25px;

  font-weight:
    600;
}


.comic-series-coming small {
  display:
    block;

  margin-top:
    7px;

  font-family:
    "Darumadrop One",
    sans-serif;

  color:
    #62a8bd;
}


.comic-series-coming p {
  margin:
    18px 0 0;

  font-size:
    11px;

  color:
    #999;
}


.comic-series-back {
  text-align:
    center;
}


/* ==================================================
   DETAIL
================================================== */

.comic-detail-page {
  padding:
    105px 24px 130px;
}


.comic-detail-inner {
  width:
    min(900px, 100%);

  margin:
    0 auto;
}


.comic-detail-header {
  position:
    relative;

  margin-bottom:
    60px;
}


.comic-detail-number {
  margin:
    0 0 8px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    25px;

  color:
    #62a8bd;
}


.comic-detail-header h1 {
  margin:
    0;

  font-size:
    clamp(35px, 6vw, 58px);

  font-weight:
    600;
}


.comic-detail-lead {
  width:
    min(650px, 100%);

  margin:
    22px 0 0;

  font-size:
    12px;

  line-height:
    2;

  color:
    #777;
}


.comic-detail-paw {
  position:
    absolute;

  right:
    3%;

  bottom:
    0;

  font-size:
    35px;

  opacity:
    .5;

  transform:
    rotate(14deg);
}


/* COMIC IMAGE */

.comic-detail-image-wrap {
  position:
    relative;

  width:
    min(620px, 100%);

  margin:
    0 auto 85px;

  padding:
    12px;

  background:
    #fffdf8;

  border:
    1px solid rgba(41,41,41,.17);

  box-shadow:
    8px 10px 0
    rgba(41,41,41,.05);

  transform:
    rotate(-.3deg);
}


.comic-detail-tape {
  position:
    absolute;

  z-index:
    2;

  top:
    -18px;

  left:
    50%;

  width:
    110px;

  height:
    30px;

  background:
    rgba(224,208,173,.75);

  transform:
    translateX(-50%)
    rotate(2deg);
}


.comic-detail-image {
  display:
    block;

  width:
    100%;

  height:
    auto;
}


/* ==================================================
   DETAIL NAV
================================================== */

.comic-detail-navigation {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap:
    20px;

  padding:
    35px 0;

  border-top:
    1px dashed rgba(41,41,41,.22);

  border-bottom:
    1px dashed rgba(41,41,41,.22);
}


.comic-detail-nav-item,
.comic-detail-next-coming {
  min-height:
    85px;

  padding:
    15px;
}


.comic-detail-nav-item span,
.comic-detail-next-coming span {
  display:
    block;

  margin-bottom:
    8px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    12px;

  color:
    #62a8bd;
}


.comic-detail-nav-item strong,
.comic-detail-next-coming strong {
  display:
    block;

  font-size:
    12px;

  line-height:
    1.7;
}


.comic-detail-next,
.comic-detail-next-coming {
  text-align:
    right;
}


.comic-detail-next-coming small {
  display:
    block;

  margin-top:
    5px;

  font-size:
    9px;

  color:
    #aaa;
}


.comic-detail-series-back {
  margin-top:
    55px;

  text-align:
    center;
}


/* ==================================================
   NOT FOUND
================================================== */

.comic-detail-not-found,
.comic-series-not-found {
  min-height:
    65vh;

  padding:
    100px 20px;

  text-align:
    center;
}


/* ==================================================
   ENDING
================================================== */

.comic-ref-ending {
  position:
    relative;

  width:
    min(1120px, calc(100% - 48px));

  height:
    100px;

  margin:
    0 auto 45px;
}


.comic-ref-ending::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    100%;

  border-top:
    1px dashed rgba(41,41,41,.2);
}


.comic-ref-ending span {
  position:
    absolute;

  z-index:
    1;

  top:
    25px;

  right:
    8%;

  padding:
    5px 15px;

  background:
    #f6f0e5;

  font-size:
    30px;

  transform:
    rotate(-15deg);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  body.comic-page-body,
  body.comic-series-page-body,
  body.comic-detail-page-body {
    padding-top:
      68px !important;
  }


  .comic-ref-heading {
    padding:
      85px 20px 40px;
  }


  .comic-ref-title-row {
    gap:
      15px;
  }


  .comic-ref-number {
    font-size:
      65px;
  }


  .comic-ref-title-row h1 {
    font-size:
      52px;
  }


  .comic-ref-paw {
    font-size:
      27px;
  }


  .comic-ref-series {
    padding:
      10px 20px 85px;
  }


  .comic-page-body
  .comic-list {
    grid-template-columns:
      1fr;
  }


  .comic-page-body
  .comic-list-card {
    grid-template-columns:
      1fr;

    min-height:
      0;
  }


  .comic-list-image,
  .comic-coming-image {
    min-height:
      320px;
  }


  .comic-list-info {
    padding:
      28px 24px;
  }


  .comic-series-page,
  .comic-detail-page {
    padding:
      80px 20px 90px;
  }


  .comic-series-heading-label,
  .comic-detail-heading-label {
    margin-bottom:
      40px;
  }


  .comic-series-heading-number,
  .comic-detail-heading-label > span {
    font-size:
      50px;
  }


  .comic-series-preview {
    grid-template-columns:
      1fr;

    gap:
      25px;
  }


  .comic-series-preview-image {
    width:
      min(320px, 100%);

    margin:
      0 auto;
  }


  .comic-series-preview-image img {
    height:
      auto;
  }


  .comic-series-paw,
  .comic-detail-paw {
    display:
      none;
  }


  .comic-detail-image-wrap {
    padding:
      7px;
  }


  .comic-detail-navigation {
    grid-template-columns:
      1fr;
  }


  .comic-detail-next,
  .comic-detail-next-coming {
    text-align:
      left;
  }

}
/* ==================================================
   ABOUT FINAL DESIGN
================================================== */

body.about-page-body {
  padding-top: 80px !important;

  background:
    #f6f0e5;

  color:
    #292929;
}


/* ==================================================
   COMMON
================================================== */

.about-ref-inner {
  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


.about-ref-small {
  margin:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    16px;

  color:
    #62a8bd;
}


.about-ref-section-number {
  margin:
    0 0 2px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    20px;

  color:
    #e47a4e;
}


.about-ref-section-head {
  display:
    grid;

  grid-template-columns:
    150px minmax(0, 1fr);

  gap:
    30px;

  align-items:
    end;

  margin-bottom:
    55px;

  padding-bottom:
    20px;

  border-bottom:
    1px solid rgba(41,41,41,.2);
}


.about-ref-section-head h2 {
  margin:
    0;

  font-size:
    clamp(25px, 4vw, 38px);

  font-weight:
    600;
}


/* ==================================================
   PAGE HEADING
================================================== */

.about-ref-heading {
  padding:
    110px 24px 55px;
}


.about-ref-heading-inner {
  position:
    relative;

  width:
    min(1120px, 100%);

  margin:
    0 auto;
}


.about-ref-title-row {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    28px;
}


.about-ref-number {
  flex-shrink:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(70px, 9vw, 120px);

  line-height:
    .8;

  color: #e3c45d;
}


.about-ref-title-text h1 {
  margin:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 90px);

  font-weight:
    400;

  line-height:
    .9;
}


.about-ref-title-text p {
  margin:
    16px 0 0;

  font-size:
    14px;

  font-weight:
    500;

  letter-spacing:
    .08em;
}


.about-ref-description {
  width:
    min(470px, 100%);

  margin:
    30px 0 0;

  padding-top:
    17px;

  border-top:
    1px solid rgba(41,41,41,.25);

  font-size:
    11px;

  line-height:
    2;

  color:
    #777;
}


.about-ref-paw {
  position:
    absolute;

  top:
    -18px;

  right:
    4%;

  font-size:
    40px;

  opacity:
    .55;

  transform:
    rotate(15deg);
}


/* ==================================================
   INTRO
================================================== */

.about-ref-intro {
  padding:
    75px 24px 120px;
}


.about-ref-intro-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, .8fr);

  gap:
    100px;

  align-items:
    center;
}


.about-ref-intro-big p {
  margin:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(47px, 6.2vw, 80px);

  line-height:
    .9;

  color:
    #62a8bd;

  transform:
    rotate(-1deg);
}


.about-ref-intro-text {
  padding-left:
    35px;

  border-left:
    1px dashed rgba(41,41,41,.25);
}


.about-ref-intro-text p {
  margin:
    0 0 28px;

  font-size:
    12px;

  line-height:
    2.2;

  color:
    #555;
}


.about-ref-intro-text p:last-child {
  margin-bottom:
    0;
}


/* ==================================================
   MEMBERS
================================================== */

.about-ref-members {
  padding:
    105px 24px 125px;

  background:
    #eee6da;
}


.about-ref-member-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    55px;
}


.about-ref-member {
  display:
    grid;

  grid-template-columns:
    220px minmax(0, 1fr);

  gap:
    38px;

  align-items:
    center;

  padding:
    35px;

  background:
    #fffdf8;

  border:
    1px solid rgba(41,41,41,.14);

  box-shadow:
    7px 8px 0 rgba(41,41,41,.04);
}


/* PHOTO */

.about-ref-member-photo {
  width:
    220px;

  height:
    220px;

  padding:
    8px;

  border-radius:
    50%;

  background:
    #fffdf8;
}


.about-ref-member-sui
.about-ref-member-photo {
  border:
    5px solid #62a8bd;

  transform:
    rotate(-2deg);
}


.about-ref-member-on
.about-ref-member-photo {
  border:
    5px solid #e47a4e;

  transform:
    rotate(2deg);
}


.about-ref-member-photo img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  border-radius:
    50%;
}


/* INFO */

.about-ref-member-en {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    20px;
}


.about-ref-member-sui
.about-ref-member-en {
  color:
    #62a8bd;
}


.about-ref-member-on
.about-ref-member-en {
  color:
    #e47a4e;
}


.about-ref-member-info h3 {
  margin:
    3px 0 5px;

  font-size:
    32px;

  font-weight:
    600;
}


.about-ref-member-meta {
  margin:
    0 0 20px;

  font-size:
    10px;

  color:
    #999;
}


.about-ref-member-description {
  margin:
    0;

  font-size:
    11px;

  line-height:
    2;

  color:
    #666;
}


.about-ref-member-link {
  display:
    inline-block;

  margin-top:
    22px;

  padding-bottom:
    4px;

  border-bottom:
    1px solid #292929;

  font-size:
    10px;
}


/* ==================================================
   CONTENT LINKS
================================================== */

.about-ref-contents {
  padding:
    110px 24px 125px;
}


.about-ref-contents-lead {
  margin:
    -20px 0 45px 180px;

  font-size:
    11px;

  line-height:
    2;

  color:
    #777;
}


.about-ref-link-grid {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  border-top:
    1px solid rgba(41,41,41,.2);

  border-bottom:
    1px solid rgba(41,41,41,.2);
}


.about-ref-link-card {
  position:
    relative;

  min-height:
    270px;

  padding:
    25px 22px;

  border-right:
    1px solid rgba(41,41,41,.17);

  color:
    #292929;

  transition:
    background-color .25s ease,
    transform .25s ease;
}


.about-ref-link-card:first-child {
  border-left:
    1px solid rgba(41,41,41,.17);
}


.about-ref-link-card:hover {
  background:
    #fffdf8;

  transform:
    translateY(-5px);
}


.about-ref-link-card > span {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    21px;

  color:
    #e47a4e;
}


.about-ref-link-card strong {
  display:
    block;

  margin-top:
    30px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    32px;

  font-weight:
    400;
}


.about-ref-link-card p {
  margin:
    12px 0 0;

  font-size:
    9px;

  line-height:
    1.8;

  color:
    #777;
}


.about-ref-link-card small {
  position:
    absolute;

  left:
    22px;

  bottom:
    24px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    11px;
}


/* ==================================================
   CONTACT
================================================== */

.about-ref-contact {
  padding:
    105px 24px;

  background:
    #62a8bd;

  color:
    #fffdf8;
}


.about-ref-contact-inner {
  width:
    min(760px, 100%);

  margin:
    0 auto;

  text-align:
    center;
}


.about-ref-contact
.about-ref-section-number {
  color:
    #f5d3c5;
}


.about-ref-contact
.about-ref-small {
  color:
    #fffdf8;
}


.about-ref-contact h2 {
  margin:
    12px 0 30px;

  font-size:
    clamp(30px, 4vw, 43px);

  font-weight:
    600;
}


.about-ref-contact-main {
  margin:
    0;

  font-size:
    15px;

  line-height:
    2;
}


.about-ref-contact-sub {
  margin:
    20px 0 32px;

  font-size:
    10px;

  line-height:
    2;

  opacity:
    .8;
}


.about-page-body
.about-instagram-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  min-width:
    220px;

  padding:
    14px 20px;

  border:
    1px solid rgba(255,255,255,.8);

  border-radius:
    999px;

  color:
    #fff;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    17px;

  transition:
    background-color .25s ease,
    color .25s ease;
}


.about-page-body
.about-instagram-button:hover {
  background:
    #fffdf8;

  color:
    #62a8bd;
}


.about-ref-contact-note {
  margin:
    30px 0 0;

  font-size:
    9px;

  opacity:
    .7;
}


/* ==================================================
   ENDING
================================================== */

.about-ref-ending {
  position:
    relative;

  padding:
    90px 24px 100px;

  background:
    #e47a4e;

  color:
    #fffdf8;

  text-align:
    center;

  overflow:
    hidden;
}


.about-ref-ending p {
  margin:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(55px, 9vw, 115px);

  line-height:
    .72;
}


.about-ref-ending > span {
  display:
    block;

  margin-top:
    28px;

  font-size:
    13px;

  letter-spacing:
    .08em;
}


.about-ref-ending i {
  position:
    absolute;

  right:
    8%;

  top:
    35px;

  font-size:
    42px;

  font-style:
    normal;

  opacity:
    .65;

  transform:
    rotate(17deg);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  body.about-page-body {
    padding-top:
      68px !important;
  }


  .about-ref-heading {
    padding:
      85px 20px 40px;
  }


  .about-ref-title-row {
    gap:
      15px;
  }


  .about-ref-number {
    font-size:
      65px;
  }


  .about-ref-title-text h1 {
    font-size:
      52px;
  }


  .about-ref-paw {
    font-size:
      28px;
  }


  .about-ref-intro,
  .about-ref-members,
  .about-ref-contents {
    padding:
      75px 20px 85px;
  }


  .about-ref-section-head {
    grid-template-columns:
      1fr;

    gap:
      15px;

    margin-bottom:
      40px;
  }


  .about-ref-intro-layout {
    grid-template-columns:
      1fr;

    gap:
      55px;
  }


  .about-ref-intro-big p {
    font-size:
      48px;
  }


  .about-ref-intro-text {
    padding-left:
      20px;
  }


  .about-ref-member-grid {
    grid-template-columns:
      1fr;
  }


  .about-ref-member {
    grid-template-columns:
      1fr;

    text-align:
      center;
  }


  .about-ref-member-photo {
    width:
      200px;

    height:
      200px;

    margin:
      0 auto;
  }


  .about-ref-contents-lead {
    margin:
      -10px 0 35px;
  }


  .about-ref-link-grid {
    grid-template-columns:
      1fr;
  }


  .about-ref-link-card,
  .about-ref-link-card:first-child {
    min-height:
      180px;

    border-left:
      1px solid rgba(41,41,41,.17);

    border-right:
      1px solid rgba(41,41,41,.17);

    border-bottom:
      1px solid rgba(41,41,41,.17);
  }


  .about-ref-contact {
    padding:
      80px 20px;
  }


  .about-ref-ending {
    padding:
      75px 20px 80px;
  }


  .about-ref-ending p {
    font-size:
      58px;
  }

}
/* ==================================================
   COMIC THUMBNAIL FIX
   サムネを切らずに全体表示
================================================== */

/* COMIC お話を選ぶ */
.comic-list-image {
  overflow: hidden;
}

.comic-list-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
}


/* HOME COMIC */
.home-page .home-ref-comic img {
  object-fit: contain !important;
  object-position: center center !important;
}
.home-page .home-ranking-image img {
  object-fit: contain !important;
  object-position: center center !important;
}
/* ==================================================
   HOME HERO CALENDAR + CENTER LOGO
================================================== */


/* ==================================================
   HERO GRID
================================================== */

.home-page .home-hero-inner {
  display: grid;

  grid-template-columns:
    minmax(220px, .75fr)
    minmax(460px, 1.35fr)
    minmax(300px, .9fr);

  gap:
    42px;

  align-items:
    center;
}


/* ==================================================
   MINI CALENDAR
================================================== */

.home-page .home-hero-calendar {
  width:
    min(280px, 100%);

  padding:
    5px 0;

  color:
    #292929;
}


.home-page
.home-hero-calendar-kicker {
  margin:
    0 0 26px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    13px;

  letter-spacing:
    .13em;
}


.home-page
.home-hero-calendar-heading {
  display:
    grid;

  grid-template-columns:
    34px minmax(0,1fr) 34px;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    20px;

  padding-bottom:
    13px;

  border-bottom:
    1px solid rgba(41,41,41,.18);

  text-align:
    center;
}


.home-page
.home-hero-calendar-month {
  margin:
    0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    23px;

  line-height:
    1;
}


.home-page
.home-hero-calendar-year {
  margin:
    5px 0 0;

  font-size:
    8px;

  letter-spacing:
    .16em;

  color:
    #999;
}


.home-page
.home-hero-calendar-button {
  width:
    32px;

  height:
    32px;

  padding:
    0;

  border:
    1px solid rgba(41,41,41,.18);

  border-radius:
    50%;

  background:
    transparent;

  color:
    #292929;

  font-size:
    20px;

  cursor:
    pointer;
}


.home-page
.home-hero-calendar-week,
.home-page
.home-hero-calendar-days {
  display:
    grid;

  grid-template-columns:
    repeat(7, 1fr);
}


.home-page
.home-hero-calendar-week {
  margin-bottom:
    6px;
}


.home-page
.home-hero-calendar-week span {
  text-align:
    center;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    8px;

  color:
    #999;
}


.home-page
.home-hero-calendar-day {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  color:
    #555;

  font-size:
    9px;

  text-decoration:
    none;
}


.home-page
.home-hero-calendar-day.empty {
  pointer-events:
    none;
}


.home-page
.home-hero-calendar-day.today {
  font-weight:
    700;

  color:
    #e47a4e;
}


.home-page
.home-hero-calendar-day.today::before {
  content:
    "";

  position:
    absolute;

  width:
    27px;

  height:
    27px;

  border:
    1px solid #e47a4e;

  border-radius:
    50%;
}


.home-page
.home-hero-calendar-day.has-event {
  font-weight:
    700;
}


.home-page
.home-hero-calendar-day.has-event i {
  position:
    absolute;

  bottom:
    2px;

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    #62a8bd;
}


.home-page
.home-hero-calendar-day.has-event:hover {
  color:
    #62a8bd;
}


.home-page
.home-hero-calendar-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-top:
    18px;

  padding-top:
    13px;

  border-top:
    1px solid rgba(41,41,41,.18);
}


.home-page
.home-hero-calendar-legend {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    9px;

  color:
    #777;
}


.home-page
.home-hero-calendar-legend i {
  display:
    block;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #62a8bd;
}


.home-page
.home-hero-calendar-link {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    9px;

  color:
    #292929;
}


/* ==================================================
   WATER COLOR
================================================== */

.home-page
.home-hero-photo-main img {
  opacity:
    .72;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1050px) {

  .home-page .home-hero-inner {
    grid-template-columns:
      230px minmax(360px, 1fr);

    gap:
      35px;
  }


  .home-page
  .home-hero-message {
    grid-column:
      1 / -1;

    width:
      min(650px,100%);

    margin:
      25px auto 0;

    text-align:
      center;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

  .home-page .home-hero-inner {
    display:
      flex;

    flex-direction:
      column;

    gap:
      55px;
  }


  .home-page
  .home-hero-visual {
    order:
      1;

    width:
      100%;
  }


  .home-page
  .home-hero-calendar {
    order:
      2;

    width:
      min(320px, 100%);

    margin:
      0 auto;
  }


  .home-page
  .home-hero-message {
    order:
      3;

    margin:
      0;

    text-align:
      left;
  }

}
/* ==================================================
   HOME HERO
   元のSUI & ON.を水彩の上へ
================================================== */

.home-page .home-hero-visual {
  position: relative;
}


.home-page .home-hero-visual .home-hero-big-title {
  position: absolute;

  z-index: 5;

  top: 50%;
  left: 50%;

  width: 90%;

  transform:
    translate(-50%, -50%);

  margin: 0;
left: calc(50% + 75px);
}

/* ==================================================
   ARTICLE BACK LINKS — ALWAYS VISIBLE
================================================== */

.article-page .article-footer a,
.article-page .article-footer a:visited,
.guide-article-page .guide-article-ref-footer a,
.guide-article-page .guide-article-ref-footer a:visited {
  background: #fffdf8;
  border-color: rgba(41, 41, 41, 0.55);
  color: #292929;
  -webkit-text-fill-color: currentColor;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
}

.article-page .article-footer a:hover,
.article-page .article-footer a:focus-visible {
  background: #292929;
  border-color: #292929;
  color: #fffdf8;
}

.guide-article-page .guide-article-ref-footer a:hover,
.guide-article-page .guide-article-ref-footer a:focus-visible {
  background: #62a8bd;
  border-color: #62a8bd;
  color: #fffdf8;
}
/* ==================================================
   CONTACT
================================================== */

body.contact-page {
  padding-top: 80px !important;

  background:
    #f6f0e5;

  color:
    #292929;
}


.contact-page .contact-ref-page {
  overflow: hidden;
}


/* ==================================================
   HEADING
================================================== */

.contact-page .contact-ref-heading {
  padding:
    110px 24px
    70px;
}


.contact-page .contact-ref-heading-inner {
  position: relative;

  width:
    min(1120px, 100%);

  margin:
    0 auto;

  padding-bottom:
    42px;

  border-bottom:
    1px solid rgba(41,41,41,.3);
}


.contact-page .contact-ref-small {
  margin:
    0 0 10px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    15px;

  letter-spacing:
    .08em;

  color:
    #e47a4e;
}


.contact-page .contact-ref-heading h1 {
  margin: 0;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    clamp(60px, 9vw, 110px);

  font-weight:
    400;

  line-height:
    .8;

  letter-spacing:
    .01em;
}


.contact-page .contact-ref-ja {
  margin:
    25px 0 0;

  font-size:
    13px;

  font-weight:
    600;

  letter-spacing:
    .12em;
}


.contact-page .contact-ref-description {
  width:
    min(430px, 100%);

  margin:
    25px 0 0;

  font-size:
    11px;

  line-height:
    2;

  color:
    #777;
}


.contact-page .contact-ref-paw {
  position:
    absolute;

  right:
    4%;

  bottom:
    45px;

  font-size:
    40px;

  opacity:
    .35;

  transform:
    rotate(14deg);
}


/* ==================================================
   FORM
================================================== */

.contact-page .contact-ref-form-section {
  padding:
    0 24px
    100px;
}


.contact-page .contact-ref-form-inner {
  position: relative;

  width:
    min(900px, 100%);

  margin:
    0 auto;
}


.contact-page .contact-ref-form {
  width:
    min(680px, 100%);

  padding:
    48px 50px;

  border:
    1px solid rgba(41,41,41,.18);

  background:
    #fffdf8;

  box-shadow:
    7px 8px 0 rgba(41,41,41,.045);
}


/* ==================================================
   NOTE
================================================== */

.contact-page .contact-ref-note {
  position: absolute;

  top:
    -25px;

  right:
    10px;

  z-index: 2;

  width:
    145px;

  min-height:
    105px;

  padding:
    20px 15px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  background:
    #f2c4a8;

  box-shadow:
    0 5px 12px rgba(41,41,41,.08);

  transform:
    rotate(3deg);
}


.contact-page .contact-ref-note::before {
  content: "";

  position:
    absolute;

  top:
    -8px;

  left:
    50%;

  width:
    55px;

  height:
    16px;

  background:
    rgba(255,255,255,.6);

  transform:
    translateX(-50%)
    rotate(-3deg);
}


.contact-page .contact-ref-note-small {
  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .2em;

  color:
    #777066;
}


.contact-page .contact-ref-note strong {
  margin-top:
    2px;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    27px;

  font-weight:
    400;

  line-height:
    1;

  color:
    #292929;
}


.contact-page .contact-ref-note-ja {
  margin-top:
    8px;

  font-size:
    9px;

  color:
    #777066;
}


/* ==================================================
   FIELD
================================================== */

.contact-page .contact-ref-field {
  margin-bottom:
    32px;
}


.contact-page .contact-ref-field label {
  display:
    flex;

  align-items:
    baseline;

  gap:
    12px;

  margin-bottom:
    10px;
}


.contact-page .contact-ref-field-en {
  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    15px;

  color:
    #e47a4e;
}


.contact-page .contact-ref-field-ja {
  font-size:
    9px;

  color:
    #999;
}


.contact-page .contact-ref-field input,
.contact-page .contact-ref-field select,
.contact-page .contact-ref-field textarea {
  box-sizing:
    border-box;

  display:
    block;

  width:
    100%;

  border:
    1px solid rgba(41,41,41,.2);

  border-radius:
    0;

  outline:
    none;

  background:
    #f9f5ed;

  color:
    #292929;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    12px;

  transition:
    border-color .2s ease,
    background-color .2s ease;
}


.contact-page .contact-ref-field input,
.contact-page .contact-ref-field select {
  height:
    48px;

  padding:
    0 15px;
}


.contact-page .contact-ref-field textarea {
  min-height:
    190px;

  padding:
    15px;

  line-height:
    1.8;

  resize:
    vertical;
}


.contact-page .contact-ref-field input:focus,
.contact-page .contact-ref-field select:focus,
.contact-page .contact-ref-field textarea:focus {
  border-color:
    #62a8bd;

  background:
    #fff;
}


/* ==================================================
   PRIVACY
================================================== */

.contact-page .contact-ref-privacy {
  margin-top:
    8px;

  padding-top:
    22px;

  border-top:
    1px dashed rgba(41,41,41,.18);
}


.contact-page .contact-ref-privacy label {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  cursor:
    pointer;
}


.contact-page .contact-ref-privacy input {
  margin-top:
    4px;
}


.contact-page .contact-ref-privacy span {
  font-size:
    10px;

  line-height:
    1.8;

  color:
    #777;
}


.contact-page .contact-ref-privacy a {
  color:
    #292929;

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


/* ==================================================
   HONEYPOT
================================================== */

.contact-page .contact-ref-honeypot {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

  clip:
    rect(0 0 0 0);

  clip-path:
    inset(50%);

  white-space:
    nowrap;
}


/* ==================================================
   SUBMIT
================================================== */

.contact-page .contact-ref-submit {
  margin-top:
    32px;
}


.contact-page .contact-ref-submit button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  min-width:
    190px;

  padding:
    14px 25px;

  border:
    1px solid #292929;

  border-radius:
    999px;

  background:
    #292929;

  color:
    #fffdf8;

  font-family:
    "Darumadrop One",
    sans-serif;

  font-size:
    14px;

  letter-spacing:
    .05em;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}


.contact-page
.contact-ref-submit button:hover {
  transform:
    translateY(-2px);

  background:
    #62a8bd;

  border-color:
    #62a8bd;
}


.contact-page
.contact-ref-submit button:disabled {
  cursor:
    wait;

  opacity:
    .55;

  transform:
    none;
}


/* ==================================================
   STATUS
================================================== */

.contact-page .contact-ref-status {
  min-height:
    20px;

  margin:
    18px 0 0;

  font-size:
    10px;

  line-height:
    1.8;

  color:
    #777;
}


.contact-page .contact-ref-status.is-success {
  color:
    #477f91;
}


.contact-page .contact-ref-status.is-error {
  color:
    #a95548;
}


/* ==================================================
   ENDING
================================================== */

.contact-page .contact-ref-ending {
  display:
    flex;

  justify-content:
    center;

  gap:
    13px;

  padding:
    0 0 100px;

  font-size:
    19px;

  opacity:
    .28;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

  .contact-page .contact-ref-heading {
    padding:
      75px 20px
      50px;
  }


  .contact-page
  .contact-ref-heading-inner {
    padding-bottom:
      32px;
  }


  .contact-page
  .contact-ref-heading h1 {
    font-size:
      clamp(52px, 17vw, 78px);
  }


  .contact-page .contact-ref-content,
  .contact-page .contact-ref-form-section {
    padding-left:
      20px;

    padding-right:
      20px;
  }


  .contact-page .contact-ref-form {
    padding:
      38px 22px;
  }


  .contact-page .contact-ref-note {
    position:
      relative;

    top:
      auto;

    right:
      auto;

    width:
      130px;

    min-height:
      95px;

    margin:
      0 0 30px auto;
  }


  .contact-page .contact-ref-field {
    margin-bottom:
      27px;
  }


  .contact-page .contact-ref-submit button {
    width:
      100%;
  }


  .contact-page .contact-ref-ending {
    padding-bottom:
      70px;
  }

}
/* ==================================================
   FOOTER POLICY
================================================== */

.footer-policy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 12px;

  padding:
    18px 24px
    4px;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: .12em;
}


.footer-policy a {
  position: relative;

  color: inherit;

  text-decoration: none;

  transition:
    color .2s ease;
}


.footer-policy a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 0;
  height: 1px;

  background:
    #62a8bd;

  transition:
    width .25s ease;
}


.footer-policy a:hover {
  color:
    #62a8bd;
}


.footer-policy a:hover::after {
  width:
    100%;
}


.footer-policy span {
  opacity:
    .35;
}


/* ==================================================
   FOOTER POLICY MOBILE
================================================== */

@media (max-width: 700px) {

  .footer-policy {
    gap: 10px;

    padding:
      22px 20px
      5px;

    font-size:
      8px;
  }

}
/* ==================================================
   PRIVACY POLICY
================================================== */

.privacy-page {
  background: var(--site-paper, #f6f0e5);
  color: var(--site-ink, #292929);
}


/* ==================================================
   PAGE
================================================== */

.privacy-ref-page {
  width: 100%;
  overflow: hidden;
}


/* ==================================================
   HEADING
================================================== */

.privacy-ref-heading {
  padding: 110px 24px 90px;
}

.privacy-ref-heading-inner {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.privacy-ref-small {
  margin: 0 0 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
}

.privacy-ref-heading h1 {
  margin: 0;
  font-family: "Darumadrop One", sans-serif;
  font-size: clamp(70px, 10vw, 145px);
  font-weight: 400;
  line-height: .76;
  letter-spacing: -.035em;
}

.privacy-ref-ja {
  margin: 28px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
}

.privacy-ref-description {
  max-width: 520px;
  margin: 24px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .04em;
}

.privacy-ref-paw {
  position: absolute;
  right: 7%;
  bottom: 15px;
  display: block;
  font-size: 50px;
  transform: rotate(12deg);
}


/* ==================================================
   CONTENT
================================================== */

.privacy-ref-content {
  padding: 0 24px 100px;
}

.privacy-ref-content-inner {
  width: min(960px, 100%);
  margin: 0 auto;
  border-top: 1px solid rgba(41, 41, 41, .18);
}


/* ==================================================
   SECTION
================================================== */

.privacy-ref-section {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 35px;
  padding: 55px 0;
  border-bottom: 1px solid rgba(41, 41, 41, .18);
}

.privacy-ref-index {
  font-family: "Darumadrop One", sans-serif;
  font-size: 54px;
  line-height: 1;
  color: var(--site-blue, #62a8bd);
}

.privacy-ref-section:nth-child(even)
.privacy-ref-index {
  color: var(--site-orange, #e47a4e);
}

.privacy-ref-section-body {
  min-width: 0;
}

.privacy-ref-section-body h2 {
  margin: 0 0 25px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

.privacy-ref-section-body p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: .035em;
}

.privacy-ref-section-body p + p {
  margin-top: 18px;
}


/* ==================================================
   CONTACT
================================================== */

.privacy-ref-contact {
  padding-top: 65px;
  padding-bottom: 65px;
}

.privacy-ref-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 30px;

  margin-top: 32px;
  padding: 13px 24px;

  border: 1px solid var(--site-ink, #292929);
  border-radius: 999px;

  color: var(--site-ink, #292929);
  text-decoration: none;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;

  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.privacy-ref-contact-link:hover {
  background: var(--site-ink, #292929);
  color: var(--site-paper, #f6f0e5);
  transform: translateY(-2px);
}

.privacy-ref-contact-link span {
  font-size: 17px;
}


/* ==================================================
   LAST UPDATED
================================================== */

.privacy-ref-updated {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;

  padding-top: 25px;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}

.privacy-ref-updated time {
  font-family: "Darumadrop One", sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
}


/* ==================================================
   ENDING PAWS
================================================== */

.privacy-ref-ending {
  display: flex;
  justify-content: center;
  gap: 14px;

  padding: 0 0 90px;

  font-size: 24px;
}

.privacy-ref-ending span:first-child {
  transform: rotate(-15deg);
}

.privacy-ref-ending span:last-child {
  transform: rotate(15deg) translateY(8px);
}


/* ==================================================
   PRIVACY FOOTER POLICY LINKS
================================================== */

.footer-policy-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 15px 0 10px;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

.footer-policy-links a {
  color: inherit;
  text-decoration: none;
}

.footer-policy-links a:hover {
  text-decoration: underline;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

  .privacy-ref-heading {
    padding-top: 90px;
    padding-bottom: 70px;
  }

  .privacy-ref-paw {
    right: 3%;
    bottom: 0;
    font-size: 40px;
  }

  .privacy-ref-section {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 25px;
  }

  .privacy-ref-index {
    font-size: 45px;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

  .privacy-ref-heading {
    padding:
      70px
      20px
      65px;
  }

  .privacy-ref-heading h1 {
    font-size: clamp(64px, 23vw, 92px);
    line-height: .78;
  }

  .privacy-ref-small {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .privacy-ref-ja {
    margin-top: 22px;
    font-size: 13px;
  }

  .privacy-ref-description {
    max-width: 90%;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.9;
  }

  .privacy-ref-paw {
    right: 0;
    bottom: -20px;
    font-size: 32px;
  }


  /* CONTENT */

  .privacy-ref-content {
    padding:
      0
      20px
      70px;
  }

  .privacy-ref-section {
    display: block;
    padding: 42px 0;
  }

  .privacy-ref-index {
    display: block;
    margin-bottom: 20px;
    font-size: 39px;
  }

  .privacy-ref-section-body h2 {
    margin-bottom: 20px;
    font-size: 19px;
  }

  .privacy-ref-section-body p {
    font-size: 12px;
    line-height: 2.05;
  }

  .privacy-ref-section-body p + p {
    margin-top: 16px;
  }


  /* CONTACT */

  .privacy-ref-contact {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .privacy-ref-contact-link {
    gap: 25px;
    margin-top: 27px;
    padding: 12px 20px;
    font-size: 10px;
  }


  /* UPDATED */

  .privacy-ref-updated {
    padding-top: 20px;
    font-size: 9px;
  }

  .privacy-ref-updated time {
    font-size: 16px;
  }


  /* ENDING */

  .privacy-ref-ending {
    padding-bottom: 65px;
    font-size: 20px;
  }

}

/* ==================================================
   HOME MOBILE HEADER FIX
================================================== */

@media (max-width: 820px) {

  .home-page .site-header .header-inner {
    width: 100% !important;
    max-width: none !important;

    height: 68px !important;
    min-height: 68px !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  .home-page .site-header .home-logo {
    flex-shrink: 0;
  }

  .home-page .site-header .logo-main {
    font-size: 28px !important;
    white-space: nowrap;
  }

  .home-page .site-header .menu-button {
    flex-shrink: 0;
    margin: 0 !important;
  }

}
/* ==================================================
   MOBILE GLOBAL HEADER / DRAWER
   2026-09-03
   左：三本線 / 右：スクエアロゴ
================================================== */

@media (max-width: 820px) {

  .site-header,
  .home-page .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 3000 !important;
    background: rgba(246, 240, 229, .96) !important;
    border-bottom: 1px solid rgba(41, 41, 41, .12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .site-header .header-inner,
  .home-page .site-header .header-inner {
    width: 100% !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  /* PCナビは完全に非表示 */
  .site-header .desktop-nav,
  .home-page .site-header .desktop-nav {
    display: none !important;
  }

  /* 左：三本線 */
  .site-header .menu-button,
  .home-page .site-header .menu-button {
    order: 1 !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }

  .site-header .menu-button::before,
  .site-header .menu-button::after,
  .home-page .site-header .menu-button::before,
  .home-page .site-header .menu-button::after {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    width: 28px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #292929 !important;
    transition: transform .25s ease, top .25s ease, opacity .25s ease !important;
  }

  .site-header .menu-button::before,
  .home-page .site-header .menu-button::before {
    top: 14px !important;
    box-shadow: 0 8px 0 #292929 !important;
  }

  .site-header .menu-button::after,
  .home-page .site-header .menu-button::after {
    top: 30px !important;
  }

  .site-header .menu-button.is-open::before,
  .home-page .site-header .menu-button.is-open::before {
    top: 22px !important;
    transform: rotate(45deg) !important;
    box-shadow: none !important;
  }

  .site-header .menu-button.is-open::after,
  .home-page .site-header .menu-button.is-open::after {
    top: 22px !important;
    transform: rotate(-45deg) !important;
  }

  /* 既存button内のspanがあるページも非表示 */
  .site-header .menu-button > span {
    display: none !important;
  }

  /* 右：四角いロゴ */
  .site-header .logo,
  .home-page .site-header .logo,
  .home-page .site-header .home-logo {
    order: 2 !important;
    position: relative !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(41, 41, 41, .18) !important;
    background: #fffdf8 !important;
    box-shadow: 2px 3px 0 rgba(41, 41, 41, .05) !important;
    transform: rotate(1deg) !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  .site-header .logo::before,
  .home-page .site-header .logo::before {
    content: "すい\Aとおん。" !important;
    white-space: pre !important;
    text-align: center !important;
    font-family: "Darumadrop One", "Noto Sans JP", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: .92 !important;
    letter-spacing: .01em !important;
    color: #292929 !important;
  }

  .site-header .logo::after,
  .home-page .site-header .logo::after {
    content: "sui & on." !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 4px !important;
    text-align: center !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    color: #62a8bd !important;
  }

  .site-header .logo > .logo-main,
  .site-header .logo > .logo-small,
  .home-page .site-header .logo > .logo-main,
  .home-page .site-header .logo > .logo-small {
    display: none !important;
  }

  /* 左から出る共通モバイルメニュー */
  .site-header .mobile-nav,
  .home-page .site-header .mobile-nav {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(82vw, 340px) !important;
    height: calc(100dvh - 72px) !important;
    margin: 0 !important;
    padding: 22px 24px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    background: #fffdf8 !important;
    border-right: 1px solid rgba(41, 41, 41, .14) !important;
    box-shadow: 12px 0 28px rgba(41, 41, 41, .08) !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: transform .28s ease, opacity .28s ease, visibility .28s ease !important;
    z-index: 2999 !important;
  }

  .site-header .mobile-nav.active,
  .home-page .site-header .mobile-nav.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site-header .mobile-nav a,
  .home-page .site-header .mobile-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 0 4px !important;
    border-bottom: 1px solid rgba(41, 41, 41, .11) !important;
    color: #292929 !important;
    font-family: "Darumadrop One", "Noto Sans JP", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: .11em !important;
    text-decoration: none !important;
  }

  .site-header .mobile-nav a.current-page,
  .home-page .site-header .mobile-nav a.current-page {
    color: #62a8bd !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
  }

}

/* ==================================================
   MOBILE POLISH 2026-09-03
   header / home hero / about text overlap
================================================== */
@media (max-width: 820px) {

  /* HEADER: 左ロゴ / 右メニュー */
  .site-header .logo,
  .home-page .site-header .logo,
  .home-page .site-header .home-logo {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .site-header .menu-button,
  .home-page .site-header .menu-button {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* HOME: 丸写真を少し小さくして文字との被りを防ぐ */
  .home-page .home-hero-dog-sui {
    width: 122px !important;
    height: 122px !important;
    right: 2px !important;
  }

  .home-page .home-hero-dog-on {
    width: 132px !important;
    height: 132px !important;
    left: -8px !important;
  }

  /* ABOUT: スマホでは文字同士を絶対に重ねない */
  .about-page-body .about-ref-title-row,
  .about-page-body .about-ref-section-head,
  .about-page-body .about-ref-intro-layout,
  .about-page-body .about-ref-member-grid,
  .about-page-body .about-ref-member {
    min-width: 0 !important;
  }

  .about-page-body .about-ref-title-row {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
  }

  .about-page-body .about-ref-number {
    flex: 0 0 auto !important;
    font-size: 48px !important;
    line-height: 1 !important;
  }

  .about-page-body .about-ref-title-text {
    flex: 1 1 220px !important;
    min-width: 0 !important;
  }

  .about-page-body .about-ref-title-text h1 {
    margin: 0 !important;
    font-size: clamp(38px, 12vw, 50px) !important;
    line-height: .95 !important;
    overflow-wrap: anywhere !important;
  }

  .about-page-body .about-ref-title-text p,
  .about-page-body .about-ref-description,
  .about-page-body .about-ref-intro-big p,
  .about-page-body .about-ref-intro-text,
  .about-page-body .about-ref-intro-text p,
  .about-page-body .about-ref-member-info,
  .about-page-body .about-ref-member-description,
  .about-page-body .about-ref-contents-lead,
  .about-page-body .about-ref-link-card p,
  .about-page-body .about-ref-contact-main,
  .about-page-body .about-ref-contact-sub {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    overflow-wrap: anywhere !important;
  }

  .about-page-body .about-ref-intro-big p {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.35 !important;
  }

  .about-page-body .about-ref-member {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 26px 20px !important;
  }

  .about-page-body .about-ref-member-info {
    text-align: center !important;
  }

  .about-page-body .about-ref-member-info h3 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .about-page-body .about-ref-ending p {
    font-size: clamp(38px, 12vw, 52px) !important;
    line-height: 1.1 !important;
  }
}

/* ==================================================
   MOBILE POLISH 2 2026-09-03
   smaller hero photos / ABOUT VIEW overlap fix
================================================== */
@media (max-width: 820px) {

  /* HOME: 丸写真をさらに小さく */
  .home-page .home-hero-dog-sui {
    width: 106px !important;
    height: 106px !important;
    right: 8px !important;
  }

  .home-page .home-hero-dog-on {
    width: 114px !important;
    height: 114px !important;
    left: 2px !important;
  }

  /* ABOUT: VIEWを説明文の下に固定し、重なりをなくす */
  .about-page-body .about-ref-link-card,
  .about-page-body .about-ref-link-card:first-child {
    display: flex !important;
    flex-direction: column !important;
    min-height: 180px !important;
    padding: 24px 22px !important;
  }

  .about-page-body .about-ref-link-card strong {
    margin-top: 22px !important;
  }

  .about-page-body .about-ref-link-card p {
    position: static !important;
    margin: 10px 0 0 !important;
    width: 100% !important;
    line-height: 1.8 !important;
  }

  .about-page-body .about-ref-link-card small {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    line-height: 1.2 !important;
  }
}

/* ==================================================
   HOME MOBILE HERO FINAL POSITION 2026-09-03
   SUI left / ampersand centered
================================================== */
@media (max-width: 820px) {

  /* SUI + すい を写真から少し左へ逃がす */
  .home-page .home-hero-visual .home-hero-name-sui {
    position: relative !important;
    left: -24px !important;
  }

  /* & をSUI / ON.の中央へ */
  .home-page .home-hero-visual .home-hero-and {
    align-self: center !important;
    margin: 20px 0 16px !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }

}

/* ==================================================
   ITEMS FLIP CARDS
   2026-09-03
================================================== */

.items-page .items-ref-flip-card {
  position: relative;
  width: 100%;
  min-height: 430px;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
}

.items-page .items-ref-flip-card:focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(98, 168, 189, .28);
}

.items-page .items-ref-flip-inner {
  position: relative;
  width: 100%;
  min-height: 430px;
  transform-style: preserve-3d;
  transition: transform .58s cubic-bezier(.2,.7,.2,1);
}

.items-page .items-ref-flip-front,
.items-page .items-ref-flip-back {
  width: 100%;
  min-height: 430px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.items-page .items-ref-flip-front {
  position: relative;
  z-index: 2;
}

.items-page .items-ref-flip-back {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(41, 41, 41, .15);
  border-radius: 9px;
  box-shadow: 5px 6px 0 rgba(41, 41, 41, .05);
  transform: rotateY(180deg);
}

.items-page .items-ref-back-sui {
  background: #dceff4;
}

.items-page .items-ref-back-on {
  background: #fae3dc;
}

.items-page .items-ref-flip-card.is-flipped .items-ref-flip-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .items-page .items-ref-flip-card:hover .items-ref-flip-inner {
    transform: rotateY(180deg);
  }
}

.items-page .items-ref-flip-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  padding: 5px 8px;
  background: rgba(255, 253, 248, .9);
  border: 1px solid rgba(41, 41, 41, .16);
  border-radius: 999px;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  color: #5f5a55;
}

.items-page .items-ref-back-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.items-page .items-ref-back-kicker {
  margin: 0 0 16px;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-size: 21px;
  line-height: 1;
  letter-spacing: .04em;
  color: #292929;
}

.items-page .items-ref-flip-back h3 {
  margin: 0 0 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.items-page .items-ref-recommendation {
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
  color: #4f4b47;
}

.items-page .items-ref-back-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  margin-top: auto;
  padding-top: 22px;
}

.items-page .items-ref-flip-back .items-ref-shop-link,
.items-page .items-ref-flip-back .items-ref-blog-link {
  display: inline-flex;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
}

.items-page .items-ref-flip-back .items-ref-blog-link {
  color: #292929;
  border-bottom: 1px solid rgba(41,41,41,.4);
}

.items-page .items-ref-flip-back-button {
  align-self: flex-end;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "Darumadrop One", "Noto Sans JP", sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(41,41,41,.65);
  cursor: pointer;
}

/* 表面の画像から外部サイトへ直接飛ばさない */
.items-page .items-ref-flip-front .items-ref-image {
  overflow: visible;
}

/* MOBILE */
@media (max-width: 760px) {

  .items-page .items-ref-flip-card,
  .items-page .items-ref-flip-inner,
  .items-page .items-ref-flip-front,
  .items-page .items-ref-flip-back {
    min-height: 345px;
  }

  .items-page .items-ref-flip-back {
    padding: 14px;
  }

  .items-page .items-ref-back-kicker {
    margin-bottom: 12px;
    font-size: 17px;
  }

  .items-page .items-ref-flip-back h3 {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .items-page .items-ref-recommendation {
    font-size: 9px;
    line-height: 1.75;
  }

  .items-page .items-ref-back-links {
    gap: 8px;
    padding-top: 14px;
  }

  .items-page .items-ref-flip-back .items-ref-shop-link,
  .items-page .items-ref-flip-back .items-ref-blog-link {
    font-size: 9px;
  }

  .items-page .items-ref-flip-back-button {
    margin-top: 14px;
    font-size: 9px;
  }

  .items-page .items-ref-flip-hint {
    right: 5px;
    bottom: 5px;
    padding: 4px 6px;
    font-size: 8px;
  }
}

/* ==================================================
   HOME / INSTAGRAM LATEST POST
   2026-09-03: black editorial frame
================================================== */
.home-page .home-instagram-latest {
  position: relative;
  width: min(292px, 100%);
  overflow: visible;
  border: 3px solid #292929;
  border-radius: 2px;
  background: #fffdf8;
  box-shadow: 7px 7px 0 #292929;
  transform: rotate(-0.7deg);
  isolation: isolate;
}
.home-page .home-instagram-latest::before {
  content: "";
  position: absolute;
  inset: 8px -9px -9px 8px;
  border: 1px solid rgba(41,41,41,.18);
  pointer-events: none;
  z-index: -2;
}
.home-page .home-instagram-accent {
  position: absolute;
  z-index: 3;
  display: block;
  border: 2px solid #292929;
  pointer-events: none;
}
.home-page .home-instagram-accent-blue {
  width: 21px;
  height: 21px;
  top: -12px;
  left: 18px;
  border-radius: 50%;
  background: #62a8bd;
}
.home-page .home-instagram-accent-orange {
  width: 29px;
  height: 10px;
  right: 17px;
  bottom: -7px;
  background: #e47a4e;
  transform: rotate(-5deg);
}
.home-page .home-instagram-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 14px 12px;
  border-bottom: 2px solid #292929;
}
.home-page .home-instagram-head-copy { min-width: 0; }
.home-page .home-instagram-kicker {
  margin: 0;
  font-family: "Darumadrop One", sans-serif;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .12em;
}
.home-page .home-instagram-account {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .05em;
  color: #555;
}
.home-page .home-instagram-latest-label {
  flex: 0 0 auto;
  padding: 4px 7px 3px;
  border: 1px solid #292929;
  background: #f6f0e5;
  font-family: "Darumadrop One", sans-serif;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .1em;
}
.home-page .home-instagram-media {
  position: relative;
  display: block;
  width: calc(100% - 22px);
  margin: 11px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid #292929;
  background: #eee;
}
.home-page .home-instagram-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  pointer-events: none;
}
.home-page .home-instagram-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.home-page .home-instagram-media:hover img { transform: scale(1.025); }
.home-page .home-instagram-body {
  padding: 0 13px 13px;
}
.home-page .home-instagram-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 9px;
  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 1;
  color: #292929;
}
.home-page .home-instagram-actions span { display: inline-block; }
.home-page .home-instagram-save { margin-left: auto; }
.home-page .home-instagram-caption {
  margin: 0;
  padding: 9px 0 10px;
  border-top: 1px solid rgba(41,41,41,.18);
  border-bottom: 1px solid rgba(41,41,41,.18);
  font-size: 10px;
  line-height: 1.8;
  color: #444;
}
.home-page .home-instagram-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
}
.home-page .home-instagram-note {
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .12em;
  color: #777;
}
.home-page .home-instagram-view {
  flex: 0 0 auto;
  padding: 5px 8px 4px;
  border: 1px solid #292929;
  background: #292929;
  font-family: "Darumadrop One", sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  color: #fffdf8;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.home-page .home-instagram-view:hover {
  transform: translate(-1px,-1px);
  background: #fffdf8;
  color: #292929;
}
.home-page .home-instagram-latest.is-live .home-instagram-latest-label {
  background: #e47a4e;
}
@media (max-width: 760px) {
  .home-page .home-instagram-latest {
    order: 2;
    width: min(318px, calc(100% - 10px));
    margin: 4px auto 8px;
    transform: rotate(-0.35deg);
    box-shadow: 6px 6px 0 #292929;
  }
  .home-page .home-instagram-kicker { font-size: 14px; }
}