/*
Theme Name: シロちゃんの宮 GLAMOUR Child
Theme URI: https://shirochan-no-miya.jp/
Description: WordPressテーマ「GLAMOUR（TCD073）」を基盤に、画像・コンテンツの角丸化とシロちゃん日誌アイキャッチの正方形表示を実装する子テーマです。
Author: インサイドアウト株式会社
Author URI: https://inside-out.co.jp/
Template: glamour_tcd073
Version: 1.2.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: shirochan-glamour-child
*/


/* =========================================================
   シロちゃんの宮：太く、やわらかな丸ゴシック
   本文は読みやすさを残して500、見出し・ナビ・ボタンは800。
   ========================================================= */

:root {
  --shiro-font-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

html,
body,
input,
select,
textarea {
  font-family: var(--shiro-font-rounded) !important;
}

body {
  font-weight: 500;
}

/* 主役になる文字は、はっきり太い丸字にする */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
.p-site-title,
.p-cb__item-headline,
.p-entry__title,
.p-entry-item__title,
.p-archive__item-title,
.p-item-archive__item-title,
.p-header-carousel__item-title,
.p-global-nav a,
.p-header__upper-nav a,
.p-button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.p-price,
.p-article__price {
  font-family: var(--shiro-font-rounded) !important;
  font-weight: 800 !important;
}

/* ヘッダー上段の説明文と、文字ロゴにも太丸字を明示適用する */
.p-header-description,
.p-header__logo,
.p-header__logo a,
.p-header__logo--mobile,
.p-header__logo--mobile a,
.p-footer__logo,
.p-footer__logo a,
.p-footer__logo--mobile,
.p-footer__logo--mobile a,
.p-logo,
.p-logo a,
.c-font-type--logo,
.c-font-type--logo a {
  font-family: var(--shiro-font-rounded) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-shadow: none !important;
}

.p-header-description {
  letter-spacing: 0.02em;
}

.p-header__logo,
.p-header__logo--mobile,
.p-footer__logo,
.p-footer__logo--mobile {
  letter-spacing: 0.035em;
}

/* PCヘッダーの文字ロゴを現在の120%に拡大する */
@media screen and (min-width: 768px) {
  .p-header__logo.p-header__logo--text > a {
    display: inline-block;
    font-size: 1.2em !important;
  }
}

/*
 * 検索・カルーセル矢印は親テーマの専用アイコンフォントを使う。
 * button全体へ丸ゴシックを強制すると私用領域のアイコン文字が□になるため、
 * 文字ボタンだけを個別指定し、アイコンボタンには触れない。
 */
.c-icon-button,
.slick-arrow,
.swiper-button-prev,
.swiper-button-next {
  font-weight: normal !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* 見出しだけ少し字間を開け、丸字の表情を出す */
h1,
h2,
h3,
h4,
h5,
h6,
.p-site-title,
.p-cb__item-headline,
.p-entry__title,
.p-entry-item__title {
  letter-spacing: 0.035em;
}

/* ナビゲーションは横幅を圧迫しないよう字間を詰める */
.p-global-nav a,
.p-header__upper-nav a {
  letter-spacing: 0;
}

/* =========================================================
   シロちゃんの宮：やわらかな角丸デザイン
   Parent theme: GLAMOUR (TCD073)
   ========================================================= */

:root {
  --shiro-radius-large: 24px;
  --shiro-radius-medium: 18px;
  --shiro-radius-small: 12px;
}

/* ---------------------------------------------------------
   1. トップページのメインビジュアル
   --------------------------------------------------------- */

.p-header-slider,
.p-header-slider .slick-list,
.p-header-slider__item,
.p-header-content__image {
  border-radius: var(--shiro-radius-large);
}

.p-header-slider,
.p-header-slider .slick-list {
  overflow: hidden;
}

/* ---------------------------------------------------------
   2. ヘッダー下の商品カルーセル
   --------------------------------------------------------- */

.p-header-carousel__item,
.p-header-carousel__item-thumbnail,
.p-header-carousel__item-thumbnail__image {
  border-radius: var(--shiro-radius-medium);
}

.p-header-carousel__item,
.p-header-carousel__item-thumbnail {
  overflow: hidden;
}

/* ---------------------------------------------------------
   3. トップページ・コンテンツビルダー内の画像やカード
   --------------------------------------------------------- */

.p-cb__item-content img:not(.emoji):not(.wp-smiley),
.p-cb__item-content .p-article__thumbnail,
.p-cb__item-content .p-hover-effect__bg,
.p-cb__item-content [data-back] {
  border-radius: var(--shiro-radius-medium);
}

.p-cb__item-content .p-article__thumbnail,
.p-cb__item-content .p-hover-effect__bg {
  overflow: hidden;
}

/* ---------------------------------------------------------
   4. シロちゃん日誌：アイキャッチを正方形に統一
   GLAMOURは背景画像のdivでアイキャッチを表示する。
   --------------------------------------------------------- */

.p-cb__item--blog .p-archive__item > a {
  display: block;
  border-radius: var(--shiro-radius-medium);
}

.p-cb__item--blog .p-archive__item-thumbnail {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: var(--shiro-radius-medium);
  overflow: hidden;
}

.p-cb__item--blog .p-archive__item-thumbnail__image {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  border-radius: inherit;
}

/* ---------------------------------------------------------
   5. ブログ・日誌の一覧ページ
   --------------------------------------------------------- */

.p-archive__item-thumbnail,
.p-archive__item-thumbnail__image,
.p-article__thumbnail,
.p-article__thumbnail .p-hover-effect__image {
  border-radius: var(--shiro-radius-medium);
}

.p-archive__item-thumbnail,
.p-article__thumbnail {
  overflow: hidden;
}

/* ---------------------------------------------------------
   6. 商品一覧
   --------------------------------------------------------- */

.p-item-archive__item > a {
  display: block;
  border-radius: var(--shiro-radius-medium);
}

.p-item-archive__item-thumbnail,
.p-item-archive__item-thumbnail__image,
.p-item-archive__item-thumbnail__image2 {
  border-radius: var(--shiro-radius-medium);
}

.p-item-archive__item-thumbnail {
  overflow: hidden;
}

/* ---------------------------------------------------------
   7. 商品詳細ページ
   --------------------------------------------------------- */

.p-entry-item__images,
.p-entry-item__images-inner,
.p-entry-item__mainimage,
.p-entry-item__mainimage-inner,
.p-entry-item__subimage,
.p-entry-item__subimage-inner {
  border-radius: var(--shiro-radius-medium);
}

.p-entry-item__mainimage,
.p-entry-item__subimage {
  overflow: hidden;
}

/* ---------------------------------------------------------
   8. 日誌・記事詳細ページ
   --------------------------------------------------------- */

.p-entry__header.has-image {
  border-radius: var(--shiro-radius-large);
  overflow: hidden;
}

.p-entry__body img:not(.emoji):not(.wp-smiley),
.p-entry__body .wp-block-image,
.p-entry__body .wp-caption,
.p-entry__body video,
.p-entry__body iframe,
.post_content img:not(.emoji):not(.wp-smiley),
.post_content .wp-block-image,
.post_content .wp-caption,
.post_content video,
.post_content iframe {
  border-radius: var(--shiro-radius-medium);
}

.p-entry__body .wp-block-image,
.p-entry__body .wp-caption,
.post_content .wp-block-image,
.post_content .wp-caption {
  overflow: hidden;
}

/* ---------------------------------------------------------
   9. バナー・自由コンテンツ内のメディア
   --------------------------------------------------------- */

.p-cb__item--banner img,
.p-cb__item--three-box img,
.p-cb__item--carousel img,
.p-cb__item--free img,
.p-banner img,
.p-three-box img {
  border-radius: var(--shiro-radius-medium);
}

/* ---------------------------------------------------------
   10. スマートフォン
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {
  :root {
    --shiro-radius-large: 18px;
    --shiro-radius-medium: 14px;
    --shiro-radius-small: 10px;
  }
}

/* =========================================================
   11. ボタン・ラベルを丸くする
   ========================================================= */

/* 主要なリンクボタン */
.p-button,
a.p-button,
.p-cb__item-button,
.wp-block-button__link,
.p-entry__body .wp-block-button__link,
.post_content .wp-block-button__link,
.p-pager a,
.page-numbers,
.p-entry-item__cart-button,
.p-entry-item button,
.p-entry-item input[type="submit"],
.usces_cart input[type="submit"],
.usces_cart .skubutton,
.skubutton,
.to_customerinfo_button,
.to_deliveryinfo_button,
.to_confirm_button,
.checkout_button,
.continue_shopping_button,
.back_cart_button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: 9999px !important;
}

/* カート・検索・スライダーなどのアイコンボタン */
.p-header__cart,
.p-header__upper-search button,
.slick-arrow,
.swiper-button-prev,
.swiper-button-next {
  border-radius: 50% !important;
}

/* 商品・日誌カード上のカテゴリー／SOLD OUTラベル */
.p-archive__item-float-category,
.p-float-category01,
.p-float-category02,
.p-article__soldout,
.p-item-archive__item-label,
.soldout {
  border-radius: 9999px !important;
}

/* =========================================================
   12. 写真上の暗いグラデーションを除去
   ========================================================= */

/* GLAMOURのホバー／サムネイル上に重なる疑似要素を透明化 */
.p-hover-effect--type1::before,
.p-hover-effect--type1::after,
.p-hover-effect--type2::before,
.p-hover-effect--type2::after,
.p-hover-effect--item2image::before,
.p-hover-effect--item2image::after,
.p-hover-effect__bg::before,
.p-hover-effect__bg::after,
.p-header-carousel__item-thumbnail::before,
.p-header-carousel__item-thumbnail::after,
.p-archive__item-thumbnail::before,
.p-archive__item-thumbnail::after,
.p-item-archive__item-thumbnail::before,
.p-item-archive__item-thumbnail::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* 写真そのものの暗転・彩度変更も行わない */
.p-hover-effect__image,
.p-hover-effect--type1:hover .p-hover-effect__image,
.p-hover-effect--type2:hover .p-hover-effect__image,
.p-hover-effect--item2image:hover .p-hover-effect__image {
  filter: none !important;
}

/* 写真上・写真下を問わず、文字の影は使わない */
.p-cb__item--blog .p-archive__item-title,
.p-cb__item--blog .p-archive__item-meta,
.p-cb__item--blog .p-archive__item-content,
.p-cb__item--blog .p-article__price,
.p-cb__item--blog .p-article__date,
.p-item-archive__item-title,
.p-header-carousel__item-title {
  text-shadow: none !important;
}

/* 商品名は白背景上で明瞭な濃色に固定する */
.p-cb__item--blog .p-archive__item-title,
.p-item-archive__item-title {
  color: #161616 !important;
}

/* ボタンの角丸がカード側のoverflowで欠けないようにする */
.p-cb__item-button__wrapper {
  overflow: visible;
}


/* =========================================================
   13. Instagram埋め込み
   Meta公式「Meta Embeds」プラグインで生成される投稿・リール・
   プロフィール埋め込みを、記事本文内で中央配置・角丸表示する。
   ========================================================= */

.wp-block-embed-instagram,
.wp-block-embed.is-provider-instagram,
.p-entry__body .instagram-media,
.post_content .instagram-media {
  width: 100% !important;
  max-width: 540px !important;
  margin: 32px auto !important;
}

.wp-block-embed-instagram .wp-block-embed__wrapper,
.wp-block-embed.is-provider-instagram .wp-block-embed__wrapper {
  border-radius: var(--shiro-radius-medium);
  overflow: hidden;
  background: #fff;
}

.wp-block-embed-instagram iframe,
.wp-block-embed.is-provider-instagram iframe,
.p-entry__body .instagram-media,
.p-entry__body .instagram-media-rendered,
.post_content .instagram-media,
.post_content .instagram-media-rendered {
  max-width: 100% !important;
  border-radius: var(--shiro-radius-medium) !important;
}

@media screen and (max-width: 767px) {
  .wp-block-embed-instagram,
  .wp-block-embed.is-provider-instagram,
  .p-entry__body .instagram-media,
  .post_content .instagram-media {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
}