@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* ==================================================
   瑞喜菓 カスタムCSS 完全差し替え版
================================================== */


/* ==================================================
   全ページ共通
================================================== */

html,
body {
  overflow-x: clip;
}

body,
.wrapper,
#content,
.main {
  background-color: #ffffff;
}

#content,
.main,
.article,
.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.content-in {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

body.no-sidebar .main {
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.page .entry-content {
  line-height: 2.4;
  letter-spacing: 0.04em;
}

.page .entry-title {
  display: none !important;
}

.article h2 {
  background: none !important;
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 2.8em 0 1.2em !important;
  font-weight: 400;
  letter-spacing: 0.08em;
  position: relative;
}

.article h2::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin-top: 0.6em;
}

.wp-block-separator {
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 2.2em auto;
}

.wp-block-button__link:hover {
  color: #5383c3;
}

.footer,
.footer-bottom {
  margin-top: 0;
  padding-top: 0;
}


/* ==================================================
   ヘッダー非表示
   フッターロゴ・円相は消さない
================================================== */

#header-container,
.header-container,
#header,
.header,
.header-in,
#header-in,
#navi,
.navi {
  display: none !important;
}


/* ==================================================
   画像基本
================================================== */

.entry-content img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: 0;
  margin-right: 0;
}

.wide-sp img {
  max-width: 760px;
}

.full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.full-bleed img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 769px) {
  .full-bleed {
    height: 160px;
    overflow: hidden;
  }

  .full-bleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ==================================================
   トップページ page-id-561
================================================== */

.page-id-561 .article-header,
.page-id-561 .entry-header,
.page-id-561 .date-tags,
.page-id-561 .post-date,
.page-id-561 .entry-date {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-id-561 #content,
.page-id-561 .main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-id-561 .wp-block-cover {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-id-561 .wp-block-cover__inner-container {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 769px) {
  .page-id-561 .wp-block-cover {
    min-height: 560px;
  }

  .page-id-561 .wp-block-cover .wp-block-cover__image-background {
    object-position: center 30% !important;
  }
}

@media (min-width: 481px) {
  .page-id-561 .wp-block-cover__inner-container {
    padding-top: 6vh;
    padding-bottom: 4vh;
  }

  .page-id-561 .wp-block-cover__inner-container .has-medium-font-size {
    margin-bottom: 0.5em;
  }

  .page-id-561 .entry-content > .wp-block-image:last-of-type {
    width: 130px !important;
    max-width: 130px !important;
    margin: 70px auto 24px !important;
    text-align: center !important;
  }

  .page-id-561 .entry-content > .wp-block-image:last-of-type img {
    width: 130px !important;
    max-width: 130px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .page-id-561 .has-medium-font-size {
    font-size: 16.5px;
  }

  .page-id-561 .entry-content > p[style*="font-size"] {
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.04em;
  }

  .page-id-561 .wp-block-cover .fz-24px {
    font-size: 18px;
  }

  .page-id-561 .wp-block-cover .fz-18px {
    font-size: 14px;
  }

  .page-id-561 .entry-content > .wp-block-image:last-of-type {
    width: 110px !important;
    max-width: 110px !important;
    margin: 56px auto 22px !important;
    text-align: center !important;
  }

  .page-id-561 .entry-content > .wp-block-image:last-of-type img {
    width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}


/* ==================================================
   瑞喜菓について page-id-781
================================================== */

.page-id-781 .article-header {
  display: none !important;
}

.page-id-781 .mitudomoe-wrap {
  display: flex;
  align-items: center;
  column-gap: 40px;
}

.page-id-781 .mitudomoe-img {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}

.page-id-781 .entry-content .text-and-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ==================================================
   はじまりの記憶 page-id-1330
================================================== */

.page-id-1330 .article-header {
  display: none !important;
}

.page-id-1330 .entry-content {
  line-height: 2.35;
}

.page-id-1330 .entry-content .wp-block-columns {
  align-items: flex-start;
  column-gap: 18px;
  gap: 18px;
  margin-top: 2em;
  margin-bottom: 2em;
}

.page-id-1330 .entry-content .wp-block-columns > .wp-block-column {
  padding: 0;
}

.page-id-1330 .entry-content .wp-block-columns figure {
  margin: 0;
}

.page-id-1330 .entry-content .wp-block-columns img {
  display: block;
  width: 100%;
  height: auto;
}

.page-id-1330 .entry-content .wp-block-image {
  margin-top: 0;
  margin-bottom: 0;
}

.page-id-1330 .entry-content .wp-block-columns p {
  margin-top: 0;
}

.page-id-1330 .entry-content p {
  margin-bottom: 1.15em;
}

@media (min-width: 782px) {
  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 34% !important;
  }

  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 66% !important;
  }

  .page-id-1330 .entry-content .wp-block-columns figure {
    margin-top: 0.2em;
  }
}

@media (max-width: 781px) {
  .page-id-1330 .entry-content .wp-block-columns {
    column-gap: 0;
    gap: 0;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }

  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column {
    margin-bottom: 1em;
  }

  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column:last-child {
    margin-bottom: 0;
  }

  .page-id-1330 .entry-content .wp-block-columns figure {
    margin-bottom: 0.6em;
  }
}


/* ==================================================
   不動岩 page-id-1571
================================================== */

.page-id-1571 .article-header {
  display: none !important;
}

.page-id-1571 .entry-title {
  letter-spacing: 0.3em;
}


/* ==================================================
   瑞喜菓の源 page-id-1152
================================================== */

.page-id-1152 .entry-content,
.page-id-1152 .entry-title {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.page-id-1152 .entry-content h2 {
  margin: 2.2em 0 0.05em !important;
  padding: 0 !important;
}

.page-id-1152 .entry-content h2::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin-top: 0.10em;
}

.page-id-1152 .entry-content h2 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 7px 24px 7px 14px;
  border-radius: 6px;
  transition:
    color .4s ease,
    background-color .4s ease,
    transform .4s ease;
}

.page-id-1152 .entry-content h2 a::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-image: url("https://www.miki-rawsweets.com/wp-content/uploads/2026/02/ensou-e1772002843171.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter:
    hue-rotate(215deg)
    saturate(70%)
    brightness(1.4)
    contrast(0.85);
  opacity: .5;
  transform: rotate(0deg);
  transition:
    transform .6s ease,
    opacity .4s ease,
    filter .4s ease;
}

.page-id-1152 .entry-content h2 + p {
  margin-top: 0.34em;
  margin-bottom: 1em;
  margin-left: 14px;
  color: #6d86a3;
  font-size: 0.94em;
  line-height: 1.9;
}

.page-id-1152 .entry-content h2 a:hover {
  background: rgba(109,134,163,0.18);
  color: #566f8d;
  transform: translateY(-0.5px);
}

.page-id-1152 .entry-content h2 a:hover::after {
  opacity: .85;
  filter:
    hue-rotate(215deg)
    saturate(85%)
    brightness(1.2)
    contrast(0.9);
}

.page-id-1152 .entry-content h2 a[href*="about-mikika"]::after {
  transform: rotate(10deg);
}

.page-id-1152 .entry-content h2 a[href*="about-mikika"]:hover::after {
  transform: rotate(40deg) scale(1.05);
}

.page-id-1152 .entry-content h2 a[href*="hajimari-no-kioku"]::after {
  transform: rotate(70deg);
}

.page-id-1152 .entry-content h2 a[href*="hajimari-no-kioku"]:hover::after {
  transform: rotate(120deg) scale(1.05);
}

.page-id-1152 .entry-content h2 a[href*="fudogan"]::after {
  transform: rotate(135deg);
}

.page-id-1152 .entry-content h2 a[href*="fudogan"]:hover::after {
  transform: rotate(190deg) scale(1.05);
}

.page-id-1152 .entry-content h2 a[href*="meguri"]::after {
  transform: rotate(270deg);
}

.page-id-1152 .entry-content h2 a[href*="meguri"]:hover::after {
  transform: rotate(200deg) scale(1.05);
}

.page-id-1152 .entry-content h2 a[href*="mezasu"]::after {
  transform: rotate(320deg);
}

.page-id-1152 .entry-content h2 a[href*="mezasu"]:hover::after {
  transform: rotate(380deg) scale(1.05);
}

.page-id-1152 .entry-content a[href*="fudogan"],
.page-id-1152 .entry-content a[href*="meguri"] {
  letter-spacing: 0.3em;
}


/* ==================================================
   焼かない菓 page-id-2354
================================================== */

.page-id-2354 .entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.page-id-2354 .wp-block-cover {
  width: 100vw;
  max-width: 100vw;
  min-height: 560px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-id-2354 .wp-block-cover__inner-container {
  padding-left: 0;
  padding-right: 0;
}

.page-id-2354 .entry-content h2 {
  margin: 2.2em 0 0.05em !important;
  padding: 0 !important;
}

.page-id-2354 .entry-content h2::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin-top: 0.10em;
}

.page-id-2354 .entry-content h2 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 7px 24px 7px 14px;
  border-radius: 6px;
  transition:
    color .4s ease,
    background-color .4s ease,
    transform .4s ease;
}

.page-id-2354 .entry-content h2 a::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-image: url("https://www.miki-rawsweets.com/wp-content/uploads/2026/02/ensou-e1772002843171.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter:
    hue-rotate(215deg)
    saturate(70%)
    brightness(1.4)
    contrast(0.85);
  opacity: .5;
  transform: rotate(0deg);
  transition:
    transform .6s ease,
    opacity .4s ease,
    filter .4s ease;
}

.page-id-2354 .entry-content h2 a:hover {
  background: rgba(109,134,163,0.18);
  color: #566f8d;
  transform: translateY(-0.5px);
}

.page-id-2354 .entry-content h2 a:hover::after {
  opacity: .85;
  filter:
    hue-rotate(215deg)
    saturate(85%)
    brightness(1.2)
    contrast(0.9);
}


/* ==================================================
   フッターロゴ中央
================================================== */

#footer .footer-bottom-logo {
  float: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 50px auto 24px !important;
  clear: both !important;
}

#footer .footer-bottom-logo .logo {
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#footer .footer-bottom-logo a {
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
}

#footer .site-logo-image.footer-site-logo-image {
  display: block !important;
  width: 80px !important;
  max-width: 80px !important;
  height: auto !important;
  margin: 0 auto !important;
}

#footer .copyright {
  clear: both !important;
  text-align: center !important;
  margin-top: 18px !important;
}


/* ==================================================
   スマホ調整
================================================== */

@media screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .entry-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home .entry-content,
  .page-id-561 .entry-content {
    padding-left: 0;
    padding-right: 0;
  }

  .entry-content img {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }

  .wide-sp {
    margin-left: -18px !important;
    margin-right: -18px !important;
  }

  .wide-sp img {
    width: calc(100% + 36px) !important;
    max-width: none !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
  }

  .wp-block-cover .has-large-font-size {
    font-size: 20px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.08em;
  }

  .page-id-2354 .wp-block-cover {
    min-height: 320px;
  }

  .page-id-2354 .wp-block-cover__inner-container {
    padding-left: 24px;
  }

  #footer .site-logo-image.footer-site-logo-image {
    width: 60px !important;
    max-width: 60px !important;
  }
}