@charset "utf-8";
/* プロフィール・SNSフォロー・代表挨拶・画像と説明・CTA・サービス紹介・料金表・比較・店舗情報・FAQ・アコーディオン・リスト・ステップ・ランキング・吹き出しのブロックパターン専用CSS。
 * 本体: patterns/profile-*.php / patterns/sns-follow-center.php / patterns/greeting-image-left.php / patterns/image-text-*.php / patterns/cta-*.php / patterns/service-*.php / patterns/pricing-*.php / patterns/comparison-*.php / patterns/store-info-*.php / patterns/faq-*.php / patterns/accordion-*.php / patterns/list-*.php / patterns/step-*.php / patterns/ranking*.php / patterns/speechbubble-*.php
 * テーマ依存: 配色・丸みのCSS変数、WhiteDress Icons。
 * スキン固有の配色は bundle.whitedress.css / bundle.basic-white.css の
 * 「ブロックパターン：各パーツ名」で上書きする。
 */
/* プロフィール・画像左（旧プロフィールBOXの個別設定から独立） */
.whitedress-profile {
  padding: 0;
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: var(--theme-border-radius-section);
}

.whitedress-profile .whitedress-profile__contents,
.whitedress-profile .whitedress-profile__avatar,
.whitedress-profile .whitedress-profile__name,
.whitedress-profile .whitedress-profile__description {
  margin: 0;
}

.whitedress-profile .whitedress-profile__contents {
  gap: 10px;
  padding: 10px;
}

.whitedress-profile .whitedress-profile__identity,
.whitedress-profile .whitedress-profile__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-wrap: anywhere;
  padding: 10px;
}

.whitedress-profile .whitedress-profile__identity {
  align-items: center;
}

.whitedress-profile__avatar,
.whitedress-profile__name {
  width: 100%;
  text-align: center;
}

.whitedress-profile__avatar img {
  width: 100px;
  height: 100px;
  border-radius: var(--theme-border-radius-avatar);
}

.whitedress-profile__name {
  font-size: large;
  font-weight: bold;
}

.whitedress-profile .whitedress-profile__text {
  align-items: stretch;
  justify-content: space-between;
}

.whitedress-sns-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.whitedress-sns-follow > .sns-follow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  text-decoration: none;
}

/* SNSフォロー・中央 */
.whitedress-follow-box .whitedress-sns-follow {
  justify-content: center;
}

/* SNSフォローショートコードのブランド配色 */
.sns-follow-brand-text-color>.sns-follow-button{
color:white;
}
/* SNSフォローボタン 背景色ブランドカラー */
.sns-follow-brand-text-color>.sns-btn-twitter {background-color: #0F1419;}
.sns-follow-brand-text-color>.sns-btn-facebook {background-color: #3b5998;}
.sns-follow-brand-text-color>.sns-btn-line {background-color: #00b900;}
.sns-follow-brand-text-color>.sns-btn-pinterest {background-color: #bd081c;}
.sns-follow-brand-text-color>.sns-btn-linkedin {background-color: #0077b5;}
.sns-follow-brand-text-color>.sns-btn-instagram {background-color: #cf2e92;}
.sns-follow-brand-text-color>.sns-btn-youtube {background-color: #da1725;}
.sns-follow-brand-text-color>.sns-btn-twitch {background-color: #6441a4;}
.sns-follow-brand-text-color>.sns-btn-github {background-color: #4183c4;}
.sns-follow-brand-text-color>.sns-btn-codepen {background-color: #000;}
.sns-follow-brand-text-color>.sns-btn-rss {background-color:#ee802f;}
.sns-follow-brand-text-color>.sns-btn-tiktok {background-color:#000000;}
/* SNSフォローボタン 背景色ブランドカラー:hover */
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-twitter:is(:hover, :focus-visible)  {color: #0F1419;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-facebook:is(:hover, :focus-visible)  {color: #3b5998;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-line:is(:hover, :focus-visible)  {color: #00b900;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-pinterest:is(:hover, :focus-visible)  {color: #bd081c;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-linkedin:is(:hover, :focus-visible)  {color: #0077b5;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-instagram:is(:hover, :focus-visible)  {color: #cf2e92;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-youtube:is(:hover, :focus-visible)  {color: #da1725;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-twitch:is(:hover, :focus-visible)  {color: #6441a4;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-github:is(:hover, :focus-visible)  {color: #4183c4;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-codepen:is(:hover, :focus-visible)  {color: #000;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-rss:is(:hover, :focus-visible)  {color:#ee802f;}
.hover-action.hover-color-inversion .sns-follow-brand-text-hover>.sns-btn-tiktok:is(:hover, :focus-visible)  {color:#000000;}
/* SNSフォローボタン ブランドカラー */
.sns-follow-brand-border-color>.sns-btn-twitter {border:solid 1px #0F1419;}
.sns-follow-brand-border-color>.sns-btn-facebook {border:solid 1px #3b5998;}
.sns-follow-brand-border-color>.sns-btn-line {border:solid 1px #00b900;}
.sns-follow-brand-border-color>.sns-btn-pinterest {border:solid 1px #bd081c;}
.sns-follow-brand-border-color>.sns-btn-linkedin {border:solid 1px #0077b5;}
.sns-follow-brand-border-color>.sns-btn-instagram {border:solid 1px #cf2e92;}
.sns-follow-brand-border-color>.sns-btn-youtube {border:solid 1px #da1725;}
.sns-follow-brand-border-color>.sns-btn-twitch {border:solid 1px #6441a4;}
.sns-follow-brand-border-color>.sns-btn-github {border:solid 1px #4183c4;}
.sns-follow-brand-border-color>.sns-btn-codepen {border:solid 1px #000;}
.sns-follow-brand-border-color>.sns-btn-rss {border:solid 1px #ee802f;}
.sns-follow-brand-border-color>.sns-btn-tiktok {border:solid 1px #000000;}

.hover-action.hover-color-inversion .sns-follow-brand-text-hover .sns-follow-button:is(:hover, :focus-visible) {
background-color:white;
}
.sns-follow-brand-border-color{
border: solid 1px transparent;
}

/* CTA。背景は標準カバーで編集し、内部の余白だけを整える。 */
.wp-block-cover.whitedress-cta {
    overflow-wrap: anywhere;
}
.whitedress-cta .wp-block-columns.whitedress-cta__columns,
.whitedress-cta .wp-block-columns.whitedress-cta__columns > .wp-block-column {
    margin-block: 0;
}
.whitedress-cta .wp-block-heading.whitedress-cta__title {
    margin-top: 0;
    margin-bottom: 16px;
}
.whitedress-cta .whitedress-cta__description,
.whitedress-cta .wp-block-buttons.whitedress-cta__buttons {
    margin-block: 0;
}
.whitedress-cta--center .wp-block-buttons.whitedress-cta__buttons {
    margin-top: 24px;
}
.whitedress-cta__buttons > .wp-block-button {
    max-width: 100%;
}
.whitedress-cta__buttons .wp-block-button__link {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* 代表挨拶。見出しと画像の上端を揃え、カラム末尾の余白を除く。 */
.whitedress-greeting > .wp-block-column > :first-child {
    margin-top: 0;
}
.whitedress-greeting > .wp-block-column > :last-child {
    margin-bottom: 0;
}

/* 画像と説明。左右を上揃えにし、モバイルでは画像を先に表示する。 */
.whitedress-image-text > .wp-block-column {
    min-width: 0;
    margin-block: 0;
    overflow-wrap: anywhere;
}
.whitedress-image-text__media > .wp-block-image {
    margin: 0;
}
.whitedress-image-text__media > .wp-block-image img,
.whitedress-service-card > .wp-block-image img {
    display: block;
    width: 100%;
}
.whitedress-image-text__body > .wp-block-heading.whitedress-image-text__title {
    margin: 0 0 16px;
    padding: 0;
}
.whitedress-image-text__body > .whitedress-image-text__description {
    margin: 0;
}
.whitedress-image-text__body > .wp-block-buttons.whitedress-image-text__buttons {
    margin: 24px 0 0;
}
.whitedress-image-text__buttons > .wp-block-button,
.whitedress-image-text__buttons .wp-block-button__link,
.whitedress-service-card__buttons > .wp-block-button,
.whitedress-service-card__buttons .wp-block-button__link,
.whitedress-pricing__buttons > .wp-block-button,
.whitedress-pricing__buttons .wp-block-button__link {
    box-sizing: border-box;
    width: 100%;
}
.whitedress-image-text__buttons > .wp-block-button,
.whitedress-image-text__buttons .wp-block-button__link,
.whitedress-pricing__buttons > .wp-block-button,
.whitedress-pricing__buttons .wp-block-button__link {
    max-width: 100%;
    overflow-wrap: anywhere;
}
@media (max-width: 781px) {
    .whitedress-image-text > .wp-block-column.whitedress-image-text__media {
        order: -1;
    }
}

/* プロフィール・サービス紹介・料金表・比較のカード共通。 */
.whitedress-profile-cards > .wp-block-column.whitedress-profile-card,
.whitedress-service-cards > .wp-block-column.whitedress-service-card,
.whitedress-pricing-cards > .wp-block-column.whitedress-pricing-card,
.whitedress-comparison > .wp-block-column.whitedress-comparison__column {
    align-self: stretch;
    box-sizing: border-box;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--main-card-border-color);
    border-radius: var(--theme-border-radius-section);
    overflow-wrap: anywhere;
}

/* プロフィール・3カラム。カラム自身をカードにして、横並び時の高さを揃える。 */
.whitedress-profile-card > .wp-block-image {
    margin: 0 auto 20px;
}
.whitedress-profile-card > .whitedress-profile-card__name {
    margin: 0;
}
.whitedress-profile-card > .whitedress-profile-card__subtitle {
    margin: 4px 0 16px;
}
.whitedress-profile-card > .whitedress-profile-card__description {
    margin: 0;
}

/* サービス紹介・料金表は、内容の長さが異なるカードもボタンを下端に揃える。 */
.whitedress-service-cards > .wp-block-column.whitedress-service-card,
.whitedress-pricing-cards > .wp-block-column.whitedress-pricing-card {
    display: flex;
    flex-direction: column;
}

/* サービス紹介 */
.whitedress-service-card > .wp-block-image {
    width: 100%;
    margin: 0 auto 20px;
}
.whitedress-service-card > .whitedress-service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin: 0 0 20px;
    font-size: 64px;
    line-height: 1;
    text-align: center;
}
.whitedress-service-card__icon:not(.has-text-color) {
    color: var(--main-accent-color);
}
.whitedress-service-card > .whitedress-service-card__name {
    margin: 0;
}
.whitedress-service-card > .whitedress-service-card__subtitle {
    margin: 4px 0 16px;
}
.whitedress-service-card > .whitedress-service-card__description {
    margin: 0;
}
.whitedress-service-card > .wp-block-buttons.whitedress-service-card__buttons,
.whitedress-pricing-card > .wp-block-buttons.whitedress-pricing__buttons {
    margin: auto 0 0;
    padding-top: 24px;
}

/* 料金表。3カラムは高さとボタン下端を揃え、一覧は1プラン1行にする。 */
.whitedress-pricing-cards > .wp-block-column.whitedress-pricing-card {
    text-align: center;
}
:is(.whitedress-pricing-card, .whitedress-pricing-row) .wp-block-heading.whitedress-pricing__name {
    margin: 0;
    padding: 0;
}
:is(.whitedress-pricing-card, .whitedress-pricing-row) .whitedress-pricing__price {
    margin: 16px 0 0;
}
:is(.whitedress-pricing-card, .whitedress-pricing-row) .whitedress-pricing__tax {
    margin: 0;
}
:is(.whitedress-pricing-card, .whitedress-pricing-row) .wp-block-list.whitedress-pricing__features {
    padding-left: 1.25em;
    margin: 24px 0 0;
    text-align: left;
}
.whitedress-pricing-list .wp-block-columns.whitedress-pricing-row {
    gap: 24px;
    margin: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--main-card-border-color);
    overflow-wrap: anywhere;
}
.whitedress-pricing-list .wp-block-columns.whitedress-pricing-row:first-child {
    border-top: 1px solid var(--main-card-border-color);
}
.whitedress-pricing-row > .wp-block-column {
    min-width: 0;
    margin-block: 0;
}
.whitedress-pricing-row .wp-block-list.whitedress-pricing__features,
.whitedress-pricing-row .wp-block-buttons.whitedress-pricing__buttons {
    margin: 0;
}

/* 比較。左右の枠を同じ高さにし、内容を上から並べる。 */
.whitedress-comparison > .wp-block-column.whitedress-comparison__column {
    margin-block: 0;
}
.whitedress-comparison .whitedress-comparison__column > .wp-block-heading.whitedress-comparison__title {
    margin: 0 0 16px;
    padding: 0;
}
.whitedress-comparison__column > .whitedress-comparison__description {
    margin: 0;
    padding: 0;
}
.whitedress-comparison__column > .wp-block-list.whitedress-comparison__points {
    margin: 16px 0 0;
    padding-left: 1.25em;
}

/* 店舗情報。定義リストの項目名と内容を上揃えにし、項目間を区切る。 */
.wp-block-group.whitedress-store-info {
    padding: 0;
}
.wp-block-group.whitedress-store-info .wp-block-heading.whitedress-store-info__title {
    margin: 0 0 24px;
    padding: 0;
}
.whitedress-store-info .wp-block-group.whitedress-store-info__list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: stretch;
    gap: 0 12px;
    margin: 0;
    padding: 0;
}
.whitedress-store-info__list > .wp-block-group.whitedress-store-info__item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    box-sizing: border-box;
    width: 100%;
    align-items: start;
    gap: 0 12px;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--main-card-border-color);
    overflow-wrap: anywhere;
}
.whitedress-store-info__item > .wp-block-group.whitedress-store-info__term {
    white-space: nowrap;
    font-weight: 600;
}
.whitedress-store-info__item > .wp-block-group.whitedress-store-info__description {
    min-width: 0;
}
.whitedress-store-info__item > .wp-block-group,
.whitedress-store-info__list .whitedress-store-info__item p {
    margin: 0;
    padding: 0;
}
@media (max-width: 600px) {
    .whitedress-store-info .wp-block-group.whitedress-store-info__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .whitedress-store-info__list > .wp-block-group.whitedress-store-info__item {
        row-gap: 4px;
    }
}

/* リスト：下線・上下線。線は直下の項目だけに付ける。 */
.whitedress-list-underline,
.whitedress-list-topbottomline {
    padding-left: 0;
}
.whitedress-list-underline li,
.whitedress-list-topbottomline li {
    line-height: 1.8;
}
.whitedress-list-underline > li,
.whitedress-list-topbottomline > li {
    list-style: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--main-dark-area-bg-color);
}
.whitedress-list-topbottomline > li:first-child {
    border-top: 1px solid var(--main-dark-area-bg-color);
}

/* 画像付き吹き出し。背景色は2pxの枠としっぽに使い、本文は白で覆う。 */
.wp-block-group.whitedress-speechbubble {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
}
.whitedress-speechbubble > .wp-block-image {
    flex: 0 0 auto;
    max-width: 25%;
    margin: 0;
}
.whitedress-speechbubble > .wp-block-image img {
    display: block;
    max-width: 100%;
    border-radius: var(--theme-border-radius-avatar);
}
.whitedress-speechbubble > .wp-block-group.whitedress-speechbubble__frame {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    padding: 2px;
    margin-block: 0;
    border-radius: var(--theme-border-radius-section);
    text-align: left;
}
.whitedress-speechbubble__frame:not(.has-background) {
    background-color: var(--main-dark-area-bg-color);
}
.whitedress-speechbubble .wp-block-group.whitedress-speechbubble__body {
    padding: 12px;
    margin: 0;
    background: #fff;
    border-radius: max(0px, calc(var(--theme-border-radius-section) - 2px));
    overflow-wrap: anywhere;
}
:is(.whitedress-speechbubble__body, .whitedress-speechbubble__body > .wp-block-group__inner-container) > :first-child {
    margin-top: 0;
}
:is(.whitedress-speechbubble__body, .whitedress-speechbubble__body > .wp-block-group__inner-container) > :last-child {
    margin-bottom: 0;
}
.whitedress-speechbubble__frame::before,
.whitedress-speechbubble__frame::after,
.whitedress-speechbubble-area::before,
.whitedress-speechbubble-area::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.whitedress-speechbubble__frame::before,
.whitedress-speechbubble__frame::after {
    top: 27px;
    width: 15px;
    height: 20px;
}
.whitedress-speechbubble__frame::before {
    background: inherit;
}
.whitedress-speechbubble__frame::after {
    background: #fff;
}
.whitedress-speechbubble-image-left > .whitedress-speechbubble__frame {
    margin-left: 15px;
}
.whitedress-speechbubble-image-left > .whitedress-speechbubble__frame::before,
.whitedress-speechbubble-image-left > .whitedress-speechbubble__frame::after {
    left: 2px;
    translate: -100% -50%;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.whitedress-speechbubble-image-left > .whitedress-speechbubble__frame::after {
    left: 5px;
}
.whitedress-speechbubble-image-right > .whitedress-speechbubble__frame {
    margin-right: 15px;
}
.whitedress-speechbubble-image-right > .whitedress-speechbubble__frame::before,
.whitedress-speechbubble-image-right > .whitedress-speechbubble__frame::after {
    right: 2px;
    translate: 100% -50%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.whitedress-speechbubble-image-right > .whitedress-speechbubble__frame::after {
    right: 5px;
}
@media (max-width: 600px) {
    .wp-block-group.whitedress-speechbubble {
        flex-direction: column;
    }
    .whitedress-speechbubble > .wp-block-image {
        order: 0;
        max-width: 100%;
    }
    .whitedress-speechbubble-image-left > .wp-block-image {
        align-self: flex-end;
    }
    .whitedress-speechbubble > .wp-block-group.whitedress-speechbubble__frame {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        margin: 15px 0 0;
    }
    .whitedress-speechbubble > .whitedress-speechbubble__frame::before,
    .whitedress-speechbubble > .whitedress-speechbubble__frame::after {
        top: 2px;
        left: 40px;
        right: auto;
        width: 20px;
        height: 15px;
        translate: -50% -100%;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
    .whitedress-speechbubble-image-left > .whitedress-speechbubble__frame::before,
    .whitedress-speechbubble-image-left > .whitedress-speechbubble__frame::after {
        left: auto;
        right: 40px;
        translate: 50% -100%;
    }
    .whitedress-speechbubble > .whitedress-speechbubble__frame::after {
        top: 5px;
    }
}

/* 人物画像なしの吹き出しグループ。背景色は本文としっぽの内側に使う。 */
.wp-block-group.whitedress-speechbubble-area {
    position: relative;
    padding: 12px;
    margin-bottom: 16px;
    border-block: 2px solid var(--main-dark-area-bg-color);
    overflow-wrap: anywhere;
    border-radius: 0;
}
.wp-block-group.whitedress-speechbubble-area.has-background {
    border-radius: 0;
}
.whitedress-speechbubble-area:not(.has-background) {
    background-color: #fff;
}
:is(.whitedress-speechbubble-area, .whitedress-speechbubble-area > .wp-block-group__inner-container) > :first-child {
    margin-top: 0;
}
:is(.whitedress-speechbubble-area, .whitedress-speechbubble-area > .wp-block-group__inner-container) > :last-child {
    margin-bottom: 0;
}
.whitedress-speechbubble-area::before,
.whitedress-speechbubble-area::after {
    left: 44px;
}
.whitedress-speechbubble-area::before {
    bottom: -16px;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 16px 14px 0;
    border-top-color: inherit;
}
.whitedress-speechbubble-area::after {
    bottom: -13px;
    width: 28px;
    height: 16px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.whitedress-speechbubble-updown-center {
    text-align: center;
}
.whitedress-speechbubble-updown-center::before,
.whitedress-speechbubble-updown-center::after {
    left: 50%;
    translate: -50% 0;
}
/* ランキング：is-style-接頭辞でスキン標準の見出し装飾を除外する。 */
.wp-block-heading[class*="is-style-whitedress-ranking-"] {
    border-block: 2px solid currentColor;
}

.wp-block-heading[class*="is-style-whitedress-ranking-"]::before {
    content: "\e682";
    font-family: "WhiteDress Icons";
    font-weight: 900;
    left: 0;
    flex-shrink: 0;
    font-size: 1.1em;
    margin-right: 5px;
}
.is-style-whitedress-ranking-gold::before {
    color: #e6c300;
}
.is-style-whitedress-ranking-silver::before {
    color: #a9a9a9;
}
.is-style-whitedress-ranking-bronze::before {
    color: #815a2b;
}
.is-style-whitedress-ranking-others::before {
    color: limegreen;
}

.whitedress-ranking-layout .wp-block-column > :first-child,
.whitedress-ranking-layout .wp-block-media-text__content > .whitedress-rating-list {
    margin-block-start: 0;
}

.whitedress-ranking-layout :is(
    .whitedress-rating-list,
    .whitedress-rating-row,
    .whitedress-rating-row > p,
    .wp-block-whitedress-rating
) {
    padding-block: 0;
}

/* FAQ・アコーディオン共通 */
.whitedress-details-underline,
.whitedress-details-wide {
    display: block;
    position: relative;
    overflow: hidden;
    border: 0;
    border-block: solid 1px var(--main-dark-area-bg-color);
    border-radius: 0;
    padding: 0;
    z-index: 0;
}
.whitedress-details-underline summary,
.whitedress-details-wide > summary {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 1;
}
.whitedress-details-underline summary::after,
.whitedress-faq-underline summary::before,
.whitedress-faq-underline p::before,
.whitedress-faq-wide > summary::before,
.whitedress-faq-wide > p:first-of-type::before {
    font-family: "WhiteDress Icons";
    font-weight: 900;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.whitedress-faq-underline summary::before,
.whitedress-faq-underline p::before,
.whitedress-faq-wide > summary::before,
.whitedress-faq-wide > p:first-of-type::before {
    height: 2rem;
}
/* 下線 */
.whitedress-details-underline {
    --details-inline-space: 10px;
    --details-block-space: 10px;
    --details-icon-size: 2rem;
    --details-icon-gap: 5px;
    transition: all .5s ease;
    margin: auto;
}
.whitedress-details-underline summary {
    padding: var(--details-block-space) calc(var(--details-inline-space) + var(--details-icon-size)) var(--details-block-space) var(--details-inline-space);
    font-size: 1em;
}
.whitedress-details-underline summary::after {
    position: absolute;
    content: "\f107";
    height: 2em;
    font-size: 1rem;
    right: var(--details-inline-space);
    transform: translateY(-50%);
    top: 50%;
}
.whitedress-details-underline[open] summary::after {
    content: "\f106";
}
.whitedress-details-underline > p {
    margin-block: 0;
    padding: var(--details-block-space) var(--details-inline-space);
}
.whitedress-details-underline > p:last-of-type {
    margin-bottom: 0;
}
.whitedress-accordion-underline summary::after,
.whitedress-faq-underline summary::before,
.whitedress-faq-underline p::before {
    color: var(--main-dark-area-text-color);
    background-color: var(--main-dark-area-bg-color);
    border-radius: var(--theme-border-radius-small-parts);
}
.whitedress-faq-underline summary::before {
    content: '\51';
    flex: 0 0 2rem;
    margin-right: 5px;
}

.whitedress-faq-underline p {
    position: relative;
    padding: var(--details-block-space) var(--details-inline-space) var(--details-block-space) calc(var(--details-inline-space) + var(--details-icon-size) + var(--details-icon-gap));
}
.whitedress-faq-underline p::before {
    position: absolute;
    content: "\41";
    top: var(--details-block-space);
    left: var(--details-inline-space);
}
/* ワイド：開閉記号は目次と同じ＋／×。 */
.whitedress-details-wide {
    margin: 0 0 2rem;
    transition: all .3s ease;
}
.whitedress-details-wide > summary {
    min-height: 3.5rem;
    box-sizing: border-box;
    padding: .75rem 3.5rem .75rem 1rem;
    color: var(--main-dark-area-text-color);
    background-color: var(--main-dark-area-bg-color);
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.4;
}
.whitedress-details-wide > summary::after {
    position: absolute;
    display: block;
    top: 50%;
    right: 1rem;
    padding: 0 0 10px;
    content: '+';
    font-size: 30px;
    transform: translateY(-50%);
    transition: transform .5s;
}

.whitedress-details-wide[open] {
    padding: 0 1rem 1rem;
}

.whitedress-details-wide[open] > summary {
    width: calc(100% + 2rem);
    margin: 0 -1rem 1rem;
}

.whitedress-details-wide[open] > :not(summary) {
    margin-top: 0;
    margin-bottom: .75rem;
}

.whitedress-details-wide[open] > :last-child:not(summary) {
    margin-bottom: 0;
}

.whitedress-details-wide[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.whitedress-faq-wide > summary::before,
.whitedress-faq-wide > p:first-of-type::before {
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--theme-border-radius-small-parts);
}
.whitedress-faq-wide > summary::before {
    content: "\51";
    flex: 0 0 2rem;
    margin-right: .5rem;
}

.whitedress-faq-wide > p {
    position: relative;
    min-height: 2rem;
    margin: 0;
    padding: .25rem 0 .25rem 2.75rem;
    line-height: 1.8;
}
.whitedress-faq-wide > p::before {
    content: none;
}
.whitedress-faq-wide > p:first-of-type::before {
    content: "\41";
    position: absolute;
    top: .15rem;
    left: 0;
    margin: 0;
}

/* 色を選んだ場合は、見出し・本文・開閉記号・Q/Aへ反映する。 */
.whitedress-details-wide.has-text-color > summary,
.whitedress-accordion-underline.has-text-color > summary::after,
.whitedress-faq-underline.has-text-color > summary::before,
.whitedress-faq-underline.has-text-color p::before {
    color: inherit;
}
.whitedress-details-wide.has-background > summary,
.whitedress-accordion-underline.has-background > summary::after,
.whitedress-faq-underline.has-background > summary::before,
.whitedress-faq-underline.has-background p::before {
    background-color: transparent;
}
/* 背景付きの標準詳細ブロックに適用される共通丸みを外し、上下線を直線にする。 */
.wp-block-details.whitedress-details-underline.has-background,
.wp-block-details.whitedress-details-wide.has-background {
    border-radius: 0;
}

/* 編集画面の標準段落余白をパターンの余白へ揃える。 */
.editor-styles-wrapper .whitedress-accordion-underline p {
    margin-block: 0;
    padding: var(--details-block-space) var(--details-inline-space);
}
.editor-styles-wrapper .whitedress-faq-underline p {
    margin-block: 0;
    padding: var(--details-block-space) var(--details-inline-space) var(--details-block-space) calc(var(--details-inline-space) + var(--details-icon-size) + var(--details-icon-gap));
}
.editor-styles-wrapper .whitedress-details-wide p {
    padding: 0;
}
.editor-styles-wrapper .whitedress-faq-wide p {
    padding: .25rem 0 .25rem 2.75rem;
}

/* 評価：一覧内の列幅を共有し、項目名と星を揃える。 */
.wp-block-group.whitedress-rating-list {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    align-items: stretch;
    gap: .75em;
}

.wp-block-group.whitedress-rating-list--text-right {
    grid-template-columns: max-content minmax(0, max-content);
}

.whitedress-rating-list > .wp-block-group.whitedress-rating-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    width: 100%;
    min-width: 0;
    margin-block: 0;
    gap: .75em;
    align-items: center;
}

.whitedress-rating-row > p {
    min-width: 0;
    margin-block: 0;
    overflow-wrap: anywhere;
}

.wp-block-whitedress-rating {
    flex: 0 0 auto;
    width: max-content;
    margin-block: 0;
    line-height: 1;
}

.whitedress-rating__stars {
    position: relative;
    display: inline-block;
    font-family: "WhiteDress Icons";
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
}

.whitedress-rating__empty {
    color: #d6d6d6;
}

.whitedress-rating__filled {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #fcc800;
    white-space: nowrap;
}

/* ステップ：既存のリストスタイルとは独立したパターン用の装飾。 */
.whitedress-step-speechbubble {
    padding-inline-start: 0;
}

:is(
    .whitedress-step-leftline,
    .whitedress-step-speechbubble
) > li > :is(ul, ol) {
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding-inline-start: 1.25em;
}

:is(
    .whitedress-step-leftline,
    .whitedress-step-speechbubble
) > li > :is(ul, ol) :is(ul, ol) {
    margin-top: 0.5rem;
}

:is(
    .whitedress-step-leftline,
    .whitedress-step-speechbubble
) > li > :is(ul, ol) li {
    position: static;
    width: auto;
    padding: 0;
    margin: 0.35rem 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1.8;
    text-align: left;
}

:is(
    .whitedress-step-leftline,
    .whitedress-step-speechbubble
) > li > :is(ul, ol) li::before,
:is(
    .whitedress-step-leftline,
    .whitedress-step-speechbubble
) > li > :is(ul, ol) li::after {
    content: none;
}

.whitedress-step-leftline {
    padding-inline-start: 1rem;
}

.whitedress-step-leftline > li,
.whitedress-step-speechbubble > li {
    list-style: none;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
}
.whitedress-step-leftline > li {
    margin: 0;
    border-left: solid 2px var(--main-dark-area-bg-color);
    width: 100%;
    line-height: 1.8;
}
.whitedress-step-leftline > li::first-line {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.8;
}
.whitedress-step-leftline > li::before,
.whitedress-step-leftline > li:last-child::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 2px var(--main-dark-area-bg-color);
    background-color: var(--main-dark-area-bg-color);
    border-radius: var(--theme-border-radius-small-parts);
    left: -6px;
}
.whitedress-step-leftline > li::before {
    top: -5px;
}
.whitedress-step-leftline > li:last-child::after {
    bottom: -5px;
}

.whitedress-step-leftline > li > :is(ul, ol) {
    padding-inline-start: 1.1em;
}

/* 吹き出し */
.whitedress-step-speechbubble > li {
    border: 3px solid var(--main-dark-area-bg-color);
    background-color: #fff;
    text-align: center;
    margin: 0 0 25px;
    line-height: 1.5;
    border-radius: var(--theme-border-radius-section);
}
.whitedress-step-speechbubble > li:not(:last-child)::before,
.whitedress-step-speechbubble > li:not(:last-child)::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    content: '';
    border-width: 20px 30px 0 30px;
    border-style: solid;
    z-index: 1;
}
.whitedress-step-speechbubble > li:not(:last-child)::before {
    bottom: -20px;
    border-color: var(--main-dark-area-bg-color) transparent transparent transparent;
}
.whitedress-step-speechbubble > li:not(:last-child)::after {
    bottom: -17px;
    border-color: #fff transparent transparent transparent;
}

.whitedress-step-speechbubble > li > :is(ul, ol) {
    text-align: left;
}