/*
Theme Name: ypy-style
Theme URI: https://example.com/
Author: YPY / site production
Description: demo1 の表示・アクションを保持しつつ、共通下層ページ・WordPress Core Blocks・Classic Editor・Customizer運用を統合したテーマ。
Version: 1.2.8
Text Domain: ypy-style
*/

/* =========================================================
   Editor / WordPress content styles
   Reusable content layer: Front / Gutenberg / Classic Editor.
   Keep selectors scoped so site-specific fixed UI is not changed.
   ========================================================= */
:root{
  --color-a:#f05a2a;
  --color-b:#68bc43;
  --color-c:#073522;
  --color-d:#0d3c2a;
  --color-e:#5579ba;
  --color-f:#f8f4e8;
  --color-g:#f8e7ef;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body){
  color:var(--color-d);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  line-height:1.9;
  overflow-wrap:anywhere;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img{max-width:100%;height:auto}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) p{margin:0 0 1.5em}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h1,
.archive-page-title{
  margin:1em 0 1.15em;color:var(--color-c);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(1.9rem,4vw,3rem);line-height:1.45;font-weight:700;letter-spacing:.02em;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h2:not(.noh), .m2{
  margin:2.2em 0 .9em;padding:.45em .65em;border-left:7px solid var(--color-a);color:var(--color-c);font-size:clamp(1.5rem,3vw,2rem);line-height:1.45;font-weight:800;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h3:not(.noh), .m3{
  margin:2em 0 .8em;padding:0 0 .45em;border-bottom:3px solid var(--color-b);color:var(--color-c);font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.5;font-weight:800;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h4:not(.noh), .m4{
  margin:1.8em 0 .7em;color:var(--color-c);font-size:1.18rem;line-height:1.55;font-weight:800;
}
/* =========================================================
   HTML basic elements / WordPress Core Blocks
   Front / Gutenberg / Classic Editor
   ========================================================= */


/* ---------------------------------------------------------
   h5 / h6
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h5:not(.noh),
.m5{
  margin:1.6em 0 .6em;
  color:var(--color-c);
  font-size:1.05rem;
  line-height:1.6;
  font-weight:800;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h6:not(.noh),
.m6{
  margin:1.5em 0 .5em;
  color:var(--color-d);
  font-size:.95rem;
  line-height:1.6;
  font-weight:800;
}


/* ---------------------------------------------------------
   hr / separator
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) hr{
  width:100%;
  max-width:100%;
  height:0;
  margin:2.5em auto;
  border:0;
  border-top:1px solid #cfd8d3;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-separator{
  width:100%;
  max-width:100%;
  margin:2.5em auto;
  border:0;
  border-top:1px solid #cfd8d3;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-separator.is-style-wide{
  width:100%;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-separator.is-style-dots{
  border:0;
}


/* ---------------------------------------------------------
   strong / em / small / mark / del / ins / sub / sup
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) strong{
  font-weight:700;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) em{
  font-style:italic;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) small{
  font-size:.85em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) mark{
  padding:.05em .18em;
  background:#fff1a8;
  color:inherit;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) del{
  opacity:.7;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ins{
  text-decoration:none;
  border-bottom:2px solid var(--color-b);
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) sub,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) sup{
  font-size:.75em;
  line-height:0;
}


/* ---------------------------------------------------------
   abbr / cite / q
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) abbr[title]{
  text-decoration:underline dotted;
  text-underline-offset:.15em;
  cursor:help;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) cite{
  font-style:normal;
  color:#66756e;
  font-size:.9em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) q{
  quotes:"“" "”" "‘" "’";
}


/* ---------------------------------------------------------
   Definition list
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) dl{
  margin:0 0 1.6em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) dt{
  margin-top:1em;
  font-weight:700;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) dd{
  margin:.4em 0 1em 1.5em;
}


/* ---------------------------------------------------------
   Code / keyboard / sample
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body)
:is(code,kbd,samp){
  font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:.92em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body)
:not(pre) > code{
  padding:.12em .35em;
  border-radius:4px;
  background:#f1f4f2;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) kbd{
  padding:.12em .4em;
  border:1px solid #bbc6c0;
  border-bottom-width:2px;
  border-radius:4px;
  background:#fff;
}


/* ---------------------------------------------------------
   pre / Code block / Preformatted block
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) pre,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap) .wp-block-code,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap) .wp-block-preformatted{
  max-width:100%;
  overflow-x:auto;
  padding:1em 1.2em;
  border:1px solid #d8dfdb;
  border-radius:8px;
  background:#f5f7f6;
  color:#25352e;
  font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:.9em;
  line-height:1.7;
  white-space:pre;
  -webkit-overflow-scrolling:touch;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-code code{
  padding:0;
  background:none;
  font:inherit;
  white-space:inherit;
}


/* ---------------------------------------------------------
   Verse
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-verse{
  white-space:pre-wrap;
  font-family:inherit;
  line-height:1.9;
}


/* ---------------------------------------------------------
   Common Core Block spacing
   --------------------------------------------------------- */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body)
:is(
  .wp-block-group,
  .wp-block-columns,
  .wp-block-media-text,
  .wp-block-cover,
  .wp-block-gallery,
  .wp-block-image,
  .wp-block-video,
  .wp-block-audio,
  .wp-block-embed,
  .wp-block-file,
  .wp-block-buttons,
  .wp-block-pullquote,
  .wp-block-details,
  .wp-block-code,
  .wp-block-preformatted
){
  margin-top:1.5em;
  margin-bottom:1.5em;
}

/* ---------------------------------------------------------
   Group
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-group{
  box-sizing:border-box;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-group::after{
  content:"";
  display:block;
  clear:both;
}


/* ---------------------------------------------------------
   Columns
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-columns{
  box-sizing:border-box;
  gap:1.5em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-column{
  min-width:0;
  box-sizing:border-box;
}

@media(max-width:700px){

  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
  .wp-block-columns:not(.is-not-stacked-on-mobile){
    flex-direction:column;
  }

  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
    flex-basis:100%!important;
    width:100%;
  }

}


/* ---------------------------------------------------------
   Media & Text
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-media-text{
  box-sizing:border-box;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-media-text__media{
  margin:0;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-media-text__media img{
  width:100%;
  height:auto;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-media-text__content{
  box-sizing:border-box;
}

@media(max-width:700px){

  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
  .wp-block-media-text.is-stacked-on-mobile{
    grid-template-columns:100%!important;
  }

  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content{
    grid-column:1;
  }

}


/* ---------------------------------------------------------
   Cover
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-cover{
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-cover img.wp-block-cover__image-background{
  width:100%;
  height:100%;
  object-fit:cover;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-cover__inner-container{
  position:relative;
  z-index:1;
  width:100%;
}


/* ---------------------------------------------------------
   Gallery
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-gallery{
  box-sizing:border-box;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-gallery .wp-block-image{
  margin:0;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-gallery img{
  width:100%;
  height:auto;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.8em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-buttons.is-content-justification-center{
  justify-content:center;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-buttons.is-content-justification-right{
  justify-content:flex-end;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-button{
  margin:0;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--color-c);
  border:2px solid var(--color-c);
}


/* ---------------------------------------------------------
   Quote / Pullquote
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-quote cite{
  display:block;
  margin-top:.8em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-pullquote{
  padding:2em 1.5em;
  border-top:3px solid var(--color-b);
  border-bottom:3px solid var(--color-b);
  text-align:center;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-pullquote blockquote{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-pullquote p{
  font-size:1.2em;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-pullquote cite{
  display:block;
  margin-top:1em;
}


/* ---------------------------------------------------------
   Details
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-details{
  margin:1.5em 0;
  padding:1em 1.2em;
  border:1px solid #d2ddd6;
  border-radius:8px;
  background:#fff;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-details summary{
  cursor:pointer;
  color:var(--color-c);
  font-weight:700;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-details > :not(summary):first-of-type{
  margin-top:1em;
}


/* ---------------------------------------------------------
   File
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-file{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7em 1em;
  margin:1.5em 0;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-file__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55em 1.2em;
  border-radius:999px;
  background:var(--color-c);
  color:#fff!important;
  text-decoration:none!important;
  font-size:.88em;
  font-weight:700;
}


/* ---------------------------------------------------------
   Audio / Video / Embed
   --------------------------------------------------------- */

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
:is(.wp-block-video, .wp-block-audio, .wp-block-embed){
  max-width:100%;
  margin:1.5em 0;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-video video{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-audio audio{
  width:100%;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-embed__wrapper{
  max-width:100%;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap)
.wp-block-embed iframe{
  max-width:100%;
}


:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ul,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ol{margin:0 0 1.6em;padding-left:1.6em}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) li{margin:.35em 0}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) a{color:var(--color-e);text-underline-offset:.15em}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) blockquote{margin:1.5em 0;padding:1.2em 1.4em;background:var(--color-f);border-left:5px solid var(--color-b)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table{width:100%;border-collapse:collapse;margin:1.5em 0;table-layout:auto}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) th,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) td{background: #fff; padding:.8em;border:1px solid #cfd8d3;vertical-align:top;overflow-wrap:anywhere}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) th{background:var(--color-e);color:#fff;font-weight:700}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) th p,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) td p{margin-bottom:0}

/* Gutenberg tables: scroll the wrapper on narrow screens instead of crushing columns. */
@media(max-width:540px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(figure.wp-block-table,.wp-block-table__container){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(figure.wp-block-table,.wp-block-table__container)>table{width:max-content;min-width:100%;table-layout:auto}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(figure.wp-block-table,.wp-block-table__container)>table :is(td,th){white-space:normal;word-break:break-word;overflow-wrap:anywhere}

  /* Classic Editor tables have no wrapper, so the table itself becomes the scroll area. */
  :where(.mce-content-body) table:not(.t00):not(.tright):not(.tbottom):not(.ttt),
  :where(.entry-content, #wrap) > table:not(.t00):not(.tright):not(.tbottom):not(.ttt){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;table-layout:auto}
  :where(.mce-content-body) table:not(.t00):not(.tright):not(.tbottom):not(.ttt) th,
  :where(.entry-content, #wrap) > table:not(.t00):not(.tright):not(.tbottom):not(.ttt) th{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
  :where(.mce-content-body) table:not(.t00):not(.tright):not(.tbottom):not(.ttt) td,
  :where(.entry-content, #wrap) > table:not(.t00):not(.tright):not(.tbottom):not(.ttt) td{white-space:normal;word-break:normal;overflow-wrap:anywhere}
}

/* Optional utility: wrap a wide comparison table with <div class="table_box">. */
.table_box{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table_box table :is(th,td){white-space:nowrap}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-block-button__link{background:var(--color-c);color:#fff;border-radius:999px;padding:.8em 1.5em;text-decoration:none}

/* Common utility classes retained for in-house authoring */
.lefta{text-align:left!important}.centera{text-align:center!important}.righta{text-align:right!important}
.inner{width:min(1080px,calc(100% - 40px));margin-inline:auto}
.hr0{border:0!important;margin:0!important;height:0!important}


/* =========================================================
   Images: front / Block Editor / Classic Editor in sync
   ========================================================= */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-block-image img{
  display:block;max-width:100%;height:auto;vertical-align:top;margin-left:auto;margin-right:auto;
}

/* No explicit width: use the available content width. */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img:not([width]):not([style*="width"]):not(.is-custom-size),
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img[class*="size-"]:not([style*="width"]):not(.is-custom-size){width:100%}

/* Classic Editor custom dimensions must remain custom. */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img[style*="width"],
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.is-custom-size,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img[class*="wp-image-"][width]:not([class*="size-"]){max-width:100%;height:auto;margin-bottom:1em}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .aligncenter,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.aligncenter{
  display:block;margin-left:auto;margin-right:auto;text-align:center;
}

@media print,screen and (min-width:834.1px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.aligncenter:not([width]):not([style*="width"]):not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.aligncenter[class*="size-"]:not([style*="width"]):not(.is-custom-size){width:90%;max-width:500px}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-block-image.alignleft,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) figure.alignleft:not([style*="width"]),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-caption.alignleft{float:left;width:36%;max-width:36%;margin:0 1em 1em 0;box-sizing:border-box}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-block-image.alignright,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) figure.alignright:not([style*="width"]),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-caption.alignright{float:right;width:36%;max-width:36%;margin:0 0 1em 1em;box-sizing:border-box}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignleft:not([width]):not([style*="width"]):not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignleft[class*="size-"]:not([style*="width"]):not(.is-custom-size){float:left;width:36%;max-width:36%;margin:0 1em 1em 0}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignright:not([width]):not([style*="width"]):not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignright[class*="size-"]:not([style*="width"]):not(.is-custom-size){float:right;width:36%;max-width:36%;margin:0 0 1em 1em}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignleft.is-custom-size,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignleft[style*="width"]{float:left;margin:0 1em 1em 0}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignright.is-custom-size,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignright[style*="width"]{float:right;margin:0 0 1em 1em}
}

@media screen and (max-width:834px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .alignleft,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .alignright{float:none!important;width:auto!important;max-width:100%!important;margin:0 auto 1em!important}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignleft[class*="size-"]:not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignright[class*="size-"]:not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.aligncenter[class*="size-"]:not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignnone[class*="size-"]:not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignleft:not([width]):not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignright:not([width]):not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.aligncenter:not([width]):not(.is-custom-size),
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.alignnone:not([width]):not(.is-custom-size){width:100%;max-width:100%;height:auto;margin:0 auto 1em}
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) figcaption,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-element-caption,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .wp-caption-text{font-size:.9em;color:#666;text-align:center;margin-top:.5em;line-height:1.7}
.entry-content::after,.wp-block-post-content::after,#wrap::after{content:"";display:block;clear:both}

/* =========================================================
 * Manabu Editor Templates compatibility
 * Keep these styles in style.css so front / Gutenberg / TinyMCE match.
 * ========================================================= */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b1{
  width:100%; margin:0; padding:0; display:flow-root;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b55l,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b55r{
  display:block; width:50%; box-sizing:border-box;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b55l{float:left}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b55r{float:right}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b33l,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b33c,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .b33r{
  display:block; width:33.333%; box-sizing:border-box; float:left;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .pdlrx{padding-left:1.5em!important;padding-right:1.5em!important}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .lf2,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .lf3{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:1.5em; width:100%;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .lf2>.bin{flex:1 1 calc(50% - .75em);min-width:0}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .lf3>.bin{flex:1 1 calc(33.333% - 1em);min-width:0}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .bin p{text-align:left}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .slidebox{
  width:100%;max-width:1024px;display:grid;grid-auto-flow:column;grid-auto-columns:min(400px,86vw);gap:12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;align-items:stretch;padding-bottom:.5em;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .sbox{
  border:1px solid #cfd8d3;box-sizing:border-box;height:100%;scroll-snap-align:start;display:flex;flex-direction:column;padding:1em;background:#fff;
}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .btn a,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) a.btn{
  display:inline-block;padding:.8em 1.5em;border-radius:.55em;background:var(--color-c);color:#fff!important;font-weight:700;text-decoration:none!important;
  transition:opacity .2s ease,transform .2s ease;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .btn a:hover,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) a.btn:hover{opacity:.82;transform:translateY(-2px)}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .pr1{
  font-size:120%;font-weight:700;text-decoration-line:underline;text-decoration-color:#ffd00054;text-decoration-thickness:.35em;text-underline-offset:-.15em;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .pr2{
  font-weight:700;text-decoration-line:underline;text-decoration-color:#ffd00054;text-decoration-thickness:.35em;text-underline-offset:-.15em;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .pr3{
  font-weight:700;text-decoration-line:underline;text-decoration-color:#ff007c2e;text-decoration-thickness:.35em;text-underline-offset:-.15em;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(.pr1,.pr2,.pr3) strong{font-size:150%}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .fit{display:inline-block;white-space:nowrap;max-width:100%}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(.box1,.box2,.box3,.box4,.box5,.box6){
  display:block;clear:both;overflow:hidden;margin:.5em 0 3em;padding:1em;text-align:left;line-height:1.8;border-radius:10px;box-sizing:border-box;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .box1{border:5px solid var(--color-c);background:var(--color-g)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .box2{border:5px solid var(--color-a);background:#fff}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .box3{border:5px solid var(--color-c);background:#fff}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .box4{border:1px solid var(--color-a);background:var(--color-g)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .box5{border:1px solid var(--color-b);background:var(--color-g)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .box6{border:1px solid var(--color-c);background:var(--color-g)}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(.mbox1a,.mbox2a,.mbox3a){margin:1em 0 0;padding:.8em 1em;color:#fff;border-radius:10px 10px 0 0;font-weight:700}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(.mbox1b,.mbox2b,.mbox3b){display:block;clear:both;overflow:hidden;margin:0 0 3em;padding:1em;text-align:left;line-height:1.8;border-top:0}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mbox1a{background:var(--color-a);border:1px solid var(--color-a)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mbox1b{border:1px solid var(--color-a);border-top:0}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mbox2a{background:var(--color-b);border:1px solid var(--color-b)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mbox2b{border:1px solid var(--color-b);border-top:0}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mbox3a{background:var(--color-c);border:1px solid var(--color-c)}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mbox3b{border:1px solid var(--color-c);border-top:0}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .centera,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .center{text-align:center!important}

@media(max-width:640px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(.b55l,.b55r,.b33l,.b33c,.b33r){float:none;width:100%;padding-left:0!important;padding-right:0!important}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) :is(.lf2,.lf3)>.bin{flex-basis:100%}
}

/* =========================================================
 * Contact Form 7 / table.ttt
 * Comfortable on desktop, stacked and touch-friendly on mobile.
 * ========================================================= */
:where(.entry-content,#wrap,.mce-content-body) table.ttt{
  width:100%;border-collapse:separate;border-spacing:0;margin:1.5em 0 2em;border:1px solid #d7ddd9;border-radius:10px;overflow:hidden;background:#fff;table-layout:fixed;
}
:where(.entry-content,#wrap,.mce-content-body) table.ttt th,
:where(.entry-content,#wrap,.mce-content-body) table.ttt td{border:0;border-bottom:1px solid #d7ddd9;padding:1.15em 1.25em;vertical-align:middle;box-sizing:border-box}
:where(.entry-content,#wrap,.mce-content-body) table.ttt tr:last-child>th,
:where(.entry-content,#wrap,.mce-content-body) table.ttt tr:last-child>td{border-bottom:0}
:where(.entry-content,#wrap,.mce-content-body) table.ttt th{width:28%;min-width:10em;background:#f3f1e8;color:#123d2d;font-weight:700;text-align:center;overflow-wrap:normal;word-break:normal}
:where(.entry-content,#wrap,.mce-content-body) table.ttt td{width:72%;background:#fff;text-align:left}
:where(.entry-content,#wrap,.mce-content-body) table.ttt tr.bg7 td{background:#fbf0f5}

:where(.entry-content,#wrap) .wpcf7-form input[type="text"],
:where(.entry-content,#wrap) .wpcf7-form input[type="email"],
:where(.entry-content,#wrap) .wpcf7-form input[type="tel"],
:where(.entry-content,#wrap) .wpcf7-form input[type="date"],
:where(.entry-content,#wrap) .wpcf7-form select,
:where(.entry-content,#wrap) .wpcf7-form textarea{
  box-sizing:border-box;border:1px solid #aebbb5;border-radius:6px;background:#fff;color:#173d30;font:inherit;line-height:1.5;padding:.72em .8em;min-height:46px;max-width:100%;box-shadow:inset 0 1px 2px rgba(0,0,0,.04);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
:where(.entry-content,#wrap) .wpcf7-form input[type="text"],
:where(.entry-content,#wrap) .wpcf7-form input[type="email"],
:where(.entry-content,#wrap) .wpcf7-form input[type="tel"]{width:min(100%,48em)}
:where(.entry-content,#wrap) .wpcf7-form textarea{width:100%;min-height:12em;resize:vertical}
:where(.entry-content,#wrap) .wpcf7-form :is(input,select,textarea):focus{outline:0;border-color:var(--color-c);box-shadow:0 0 0 3px rgba(26,116,54,.14);background:#fff}
:where(.entry-content,#wrap) .wpcf7-form .w20{width:min(100%,32em)!important}
:where(.entry-content,#wrap) .wpcf7-form .w10{width:min(100%,22em)!important}
:where(.entry-content,#wrap) .wpcf7-form .w6{width:min(100%,11em)!important}
:where(.entry-content,#wrap) .wpcf7-form .kanarazu{display:inline-block;white-space:nowrap;margin-left:.55em;margin-right:0.5em;padding:.14em .45em;border-radius:4px;background:var(--color-a);color:#fff;font-size:.74em;font-weight:700;vertical-align:.08em}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-list-item{display:inline-block;margin:.3em 1.1em .3em 0}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:.42em;cursor:pointer}
:where(.entry-content,#wrap) .wpcf7-form input[type="checkbox"],
:where(.entry-content,#wrap) .wpcf7-form input[type="radio"]{width:1.1em;height:1.1em;margin:0;accent-color:var(--color-c)}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-acceptance{display:inline-block;margin:.5em 0 1em}
:where(.entry-content,#wrap) .wpcf7-form input[type="submit"],
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-submit{
  appearance:none;border:0;border-radius:999px;background:var(--color-c);color:#fff;font-weight:700;font-size:1.08em;line-height:1.2;padding:1em 3.2em;min-width:220px;min-height:52px;cursor:pointer;box-shadow:0 7px 18px rgba(13,60,42,.14);transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease;
}
:where(.entry-content,#wrap) .wpcf7-form input[type="submit"]:hover,
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-submit:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 10px 22px rgba(13,60,42,.18)}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-spinner{display:block;margin:.7em auto 0}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-not-valid-tip{margin-top:.35em;font-size:.9em}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-response-output{margin:1.5em 0 0;padding:1em 1.2em;border-radius:8px}
:where(.entry-content,#wrap) .wpcf7-form .wpcf7-date{margin-right:1em;}
:where(.entry-content,#wrap) .wpcf7-form #zip{margin-bottom:0.5em;}

@media(max-width:640px){

  :where(.entry-content,#wrap,.mce-content-body) table.ttt,
  :where(.entry-content,#wrap,.mce-content-body) table.ttt tbody,
  :where(.entry-content,#wrap,.mce-content-body) table.ttt tr,
  :where(.entry-content,#wrap,.mce-content-body) table.ttt th,
  :where(.entry-content,#wrap,.mce-content-body) table.ttt td{
    display:block;
    width:100%;
    max-width:100%;
  }

  :where(.entry-content,#wrap,.mce-content-body) table.ttt{
    border-radius:8px;
    table-layout:auto;
  }

  :where(.entry-content,#wrap,.mce-content-body) table.ttt tr{
    border-bottom:1px solid #d7ddd9;
  }

  :where(.entry-content,#wrap,.mce-content-body) table.ttt tr:last-child{
    border-bottom:0;
  }

  :where(.entry-content,#wrap,.mce-content-body) table.ttt th{
    min-width:0;
    padding:.8em 1em;
    text-align:left;
    border-bottom:0;
    background:#edf3ef;
  }

  :where(.entry-content,#wrap,.mce-content-body) table.ttt td{
    padding:1em;
    background:#fff;
    border-bottom:0;
  }

  :where(.entry-content,#wrap,.mce-content-body) table.ttt tr.bg7 td{
    background:#fbf0f5;
  }

  /* 通常の入力欄 */
  :where(.entry-content,#wrap) .wpcf7-form :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea,
    .w20,
    .w10
  ){
    width:100%!important;
    max-width:100%!important;
  }

  /* 郵便番号：〒の右側に配置 */
  :where(.entry-content,#wrap) .wpcf7-form #zip{
    display:inline-block;
    width:calc(100% - 2em)!important;
    max-width:11em!important;
    margin:.5em 0!important;
    vertical-align:middle;
  }

  /* 住所：郵便番号との間隔を確保 */
  :where(.entry-content,#wrap) .wpcf7-form #addr{
    display:block;
    width:100%!important;
    max-width:100%!important;
    margin:.5em 0!important;
  }

  /* 希望日：日付 */
  :where(.entry-content,#wrap) .wpcf7-form input[name="date-810"]{
    margin:.5em 0!important;
  }

  /* 希望日：時間 */
  :where(.entry-content,#wrap) .wpcf7-form select[name="select-111"]{
    margin:.5em 0!important;
  }

  /* チェックボックス・ラジオボタン */
  :where(.entry-content,#wrap) .wpcf7-form .wpcf7-list-item{
    display:block;
    margin:.5em 0;
  }

  /* 送信ボタン */
  :where(.entry-content,#wrap) .wpcf7-form input[type="submit"],
  :where(.entry-content,#wrap) .wpcf7-form .wpcf7-submit{
    width:min(100%,320px);
    min-width:0;
    padding:1em 1.5em;
  }

}

/* =========================================================
   装飾
   ========================================================= */

/* =========================================================
   tright / tbottom
   ========================================================= */
/* まず対象テーブルの既定を無効化・最小限リセット */
table.tright, table.tright th, table.tright td,
table.tbottom, table.tbottom th, table.tbottom td {
  border: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
table.tright, table.tbottom { min-width: auto !important; }

/* ---------------------------
   PCレイアウト（>= 834.1px）
   --------------------------- */
@media (min-width: 834.1px){

  /* = tright：左 th ／右 td（th 右端に右向き三角でつなぐ） = */
  table.tright{
    width:98% !important;
    margin:-0.3em 1% 0.6em !important;
    border-collapse:separate !important;
    border-spacing:0 0.6em !important;   /* 行間 */
    background:transparent !important;
  }
  table.tright > tbody > tr{ background:transparent !important; }
  table.tright > tbody > tr > th{
    width:25% !important;
    background:var(--color-a);
    color:#fff;
    font-weight:700;
    text-align:left;
    padding:.9em 1.0em !important;
    position:relative;
    border-radius:6px 0 0 6px;
  }
  /* （右向き三角） */
  table.tright > tbody > tr > th:after{
    content:"";
    position:absolute;
    left:100%; top:50%;
    margin-top:-.45em;
    border:.45em solid transparent;
    border-left-color:var(--color-a);
  }
  table.tright > tbody > tr > td{
    width:75% !important;
    background:#eee;
    color:var(--color-d);
    padding:1.0em 1.1em .9em 1.1em !important;
    border-radius:0 6px 6px 0;
  }

  /* = tbottom：行間にスペース、th 下に▼ = */
  table.tbottom{
    width:98% !important;
    margin:-1.0em 1% 0.6em !important;
    border-collapse:separate !important;
    border-spacing:0 1.1em !important;   /* 行間 */
    background:transparent !important;
  }
  table.tbottom > tbody > tr{ background:transparent !important; }
  table.tbottom > tbody > tr > th{
    width:25% !important;
    background:var(--color-b);
    color:#fff;
    font-weight:700;
    padding:.9em 1.0em !important;
    position:relative;
    border-radius:6px 0 0 6px;
    text-align:center;
    vertical-align: middle;
  }
  /* ▼（下向き三角）? 最終行は非表示 */
  table.tbottom > tbody > tr > th:before{
    content:"";
    position:absolute;
    left:45%; top:100%;
    border:.5em solid transparent;
    border-top:.6em solid var(--color-b);
  }
  table.tbottom > tbody > tr.lasttr > th:before{ content:none; }

  table.tbottom > tbody > tr > td{
    width:75% !important;
    background:#eee;
    color:var(--color-d);
    padding:1.0em 1.1em .9em 1.1em !important;
    border-radius:0 6px 6px 0;
  }
  table.tbottom td p{ margin-bottom:.5em; }
}

/* ---------------------------
   SPレイアウト（<= 834px）
   --------------------------- */
@media (max-width: 834px){

  /* 共通：縦積み＋行間で余白を確保 */
  table.tright, table.tbottom{
    width:100% !important;
    margin:0 !important;
    border-collapse:separate !important;
    border-spacing:0 1.2em !important;  /* 行間高さは後で個別に上書き可 */
    background:transparent !important;
  }
  table.tright > tbody > tr,
  table.tbottom > tbody > tr{
    display:block !important;
    width:100% !important;
    background:transparent !important;
margin-bottom: 20px;
  }
  table.tright > tbody > tr > th,
  table.tright > tbody > tr > td,
  table.tbottom > tbody > tr > th,
  table.tbottom > tbody > tr > td{
    display:block !important;
    width:auto !important;               /* 汎用tableの width:100% を無効化 */
    max-width:100% !important;
    border-radius:6px !important;
  }

  /* = tright（SP）：th→td を上下に密着、矢印は “下向き” で中央に */
  table.tright{ border-spacing:0 1.0em !important; }
  table.tright > tbody > tr > th{
    background:var(--color-a); color:#fff;
    font-weight:700; text-align:left;
    padding:.9em 1.0em !important;
    border-radius:8px 8px 0 0 !important;
    position:relative;
    margin:0 !important;
  }
  /* PCの?は消して、SPは下向き▼を中央に */
  table.tright > tbody > tr > th:after{
    content:"";
    position:absolute;
    left:50%; top:100%;
    transform:translateX(-50%);
    border:.55em solid transparent;
    border-top-color:var(--color-a);
  }
  table.tright > tbody > tr > td{
    background:#eee; color:var(--color-d);
    padding:1.0em 1.1em .9em 1.1em !important;
    border-radius:0 0 8px 8px !important;
    margin:0 !important;
  }

  /* = tbottom（SP）：th/td を密着。▼は “td の下＝行間” に出す = */
  table.tbottom{
    border-spacing:0 1.4em !important;   /* 行間：好みに応じて 1.2～1.8em */
  }
  table.tbottom > tbody > tr > th{
    background:var(--color-b); color:#fff;
    font-weight:700; text-align:center;
    padding:.9em 1.0em !important;
    border-radius:8px 8px 0 0 !important;
    position:relative;
    margin:0 !important;
  }
  /* PCで使っていた ▼ はSPでは不要 */
  table.tbottom > tbody > tr > th:before{ display:none !important; }

  table.tbottom > tbody > tr > td{
    background:#eee; color:var(--color-d);
    padding:1.0em 1.1em .9em 1.1em !important;
    border-radius:0 0 8px 8px !important;
    position:relative !important;
    margin:0 !important;
  }
  /* ▼（下向き三角）を td の “下” に表示 → tr と tr の間に現れる */
  table.tbottom > tbody > tr > td:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-18px;                        /* 三角の半分が行間に入る位置。-16～-22pxで調整 */
    transform:translateX(-50%);
    border:11px solid transparent;
    border-top-color:var(--color-b);
    pointer-events:none;
  }
  /* 最終行の▼は非表示 */
  table.tbottom > tbody > tr.lasttr > td:after{ display:none; }
}

/* ---------------------------
   lista
   --------------------------- */
.lista a{font-weight:bold;}
.lista::before{
    content:"➜";
    color:var(--color-a);
    margin-right:.5em;
    font-weight:bold;
}

/* ---------------------------
   faqstyle
   --------------------------- */
.faqstyle dt, .editor-styles-wrapper .faqstyle dt {
  margin-bottom: 1em; color: var(--color-a); text-indent: -1.5em; padding-left: 1.5em;
}
.faqstyle dt::before, .editor-styles-wrapper .faqstyle dt::before,
.faqstyle dd::before, .editor-styles-wrapper .faqstyle dd::before { margin-right: .4em; }
.faqstyle dt::before, .editor-styles-wrapper .faqstyle dt::before { color:var(--color-a); content: "Q."; font-weight:700; }
.faqstyle dd, .editor-styles-wrapper .faqstyle dd {
  margin: 0 0 2.5em; padding: 1em 1.5em; background-color: var(--color-g); color: #111;
}
.faqstyle dd::before, .editor-styles-wrapper .faqstyle dd::before { color:var(--color-b); content: "A."; font-weight:700; }

/* 性格診断記事：3列比較表のスマホ用カード表示 */
@media screen and (max-width: 640px) {
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare {
    display:block; width:100%; max-width:100%;
    border:0; background:transparent; overflow:visible;
    table-layout:auto;
  }
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare thead {
    display:none;
  }
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare tbody {
    display:block; width:100%;
  }
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare tbody tr {
    display:block; width:100%; margin:0 0 1.2em;
    border:1px solid #d4dfd7; border-radius:10px;
    overflow:hidden; background:#fff;
  }
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare tbody th {
    display:block; width:100%; box-sizing:border-box;
    padding:.75em 1em; border:0;
    background:var(--color-c); color:#fff;
    text-align:left; font-weight:700;
    white-space:normal; word-break:normal;
  }
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare tbody td {
    display:block; width:100%; box-sizing:border-box;
    padding:.85em 1em; border:0;
    border-top:1px solid #e1e8e2;
    background:#fff; white-space:normal;
    word-break:normal; overflow-wrap:anywhere;
  }
  :where(.entry-content, #wrap, .mce-content-body) table.personality-compare tbody td::before {
    content:attr(data-label); display:block;
    margin-bottom:.3em; color:var(--color-c);
    font-size:.85em; font-weight:700;
  }
}



/* =====================================
   YPY 資料ダウンロードフォーム
===================================== */

/* ------------------------------
   全体・表示切り替え
------------------------------ */
.ypy-download-section {
  max-width: 620px;
  margin: 30px auto;
}

/* ダウンロード開始ボタン */
.ypy-download-trigger {
  display: block;
  width: 100%;
  padding: 18px 25px;
  background: #326e52;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.ypy-download-trigger:hover {
  background: #265740;
  color: #fff;
}

/* 開始前はフォーム非表示 */
.ypy-download-section:not(.is-open) .wpcf7,
.ypy-download-trigger[hidden] {
  display: none !important;
}

/* ------------------------------
   フォーム本体
------------------------------ */
.ypy-dl-form {
  width: 100%;
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-sizing: border-box;
}

/* 現在のSTEP以外を非表示 */
.ypy-dl-form .ypy-dl-step[hidden] {
  display: none !important;
}

/* ------------------------------
   STEP進行状況
------------------------------ */
.ypy-dl-progress {
  margin-bottom: 30px;
}

.ypy-dl-progress-text {
  display: block;
  margin-bottom: 12px;
  color: #326e52;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.ypy-dl-progress-track {
  height: 7px;
  overflow: hidden;
  background: #e7e7e7;
  border-radius: 10px;
}

.ypy-dl-progress-bar {
  display: block;
  width: 20%;
  height: 100%;
  background: #326e52;
  border-radius: 10px;
  transition: width 0.25s ease;
}

/* ------------------------------
   見出し・入力欄
------------------------------ */
.ypy-dl-form .ypy-dl-step h3 {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

.ypy-dl-form .ypy-dl-step input[type="text"],
.ypy-dl-form .ypy-dl-step input[type="email"],
.ypy-dl-form .ypy-dl-step input[type="tel"] {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 16px;
  box-sizing: border-box;
}

.ypy-dl-form .ypy-dl-step input:focus {
  outline: 2px solid #326e52;
  outline-offset: 1px;
}

/* ------------------------------
   ボタン共通
------------------------------ */
.ypy-dl-form .ypy-dl-step button,
.ypy-dl-form .ypy-dl-step input[type="submit"] {
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  box-sizing: border-box;
  text-align: center;
}

/* 次へ・送信ボタン */
.ypy-dl-form .ypy-dl-next,
.ypy-dl-form input[type="submit"] {
  background: #326e52;
  color: #fff;
}

.ypy-dl-form .ypy-dl-next:hover,
.ypy-dl-form input[type="submit"]:hover {
  background: #265740;
  color: #fff;
}

/* 戻るボタン */
.ypy-dl-form .ypy-dl-back {
  background: #eee;
  color: #333;
}

.ypy-dl-form .ypy-dl-back:hover {
  background: #ddd;
  color: #333;
}

/* ------------------------------
   STEP1：次へボタンのみ
------------------------------ */
.ypy-dl-form .ypy-dl-step > .ypy-dl-next {
  display: block;
  width: 100%;
  margin-top: 20px;
}

/* ------------------------------
   STEP2以降：ボタン横並び・中央寄せ
------------------------------ */
.ypy-dl-form .ypy-dl-buttons,
.ypy-dl-form .ypy-dl-buttons > p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px;
}

.ypy-dl-form .ypy-dl-buttons {
  margin-top: 25px;
}

/* CF7が自動挿入するpタグ */
.ypy-dl-form .ypy-dl-buttons > p {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* CF7が自動挿入するbrタグ */
.ypy-dl-form .ypy-dl-buttons br {
  display: none;
}

/* 戻る・次へ・送信ボタンの幅 */
.ypy-dl-form .ypy-dl-buttons button,
.ypy-dl-form .ypy-dl-buttons input[type="submit"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 160px;
  width: 160px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

/* ------------------------------
   エラー・プライバシーポリシー
------------------------------ */
.ypy-dl-form .ypy-dl-error {
  color: #c62828;
  font-size: 14px;
}

.ypy-dl-form .ypy-dl-error:empty {
  display: none;
}

.ypy-dl-form .ypy-dl-policy {
  margin: 25px 0;
  text-align: center;
  line-height: 1.8;
}

.ypy-dl-form .ypy-dl-policy a {
  text-decoration: underline;
}

/* CF7送信中のスピナー */
.ypy-dl-form .wpcf7-spinner {
  margin: 8px;
}

/* ------------------------------
   スマートフォン
------------------------------ */
@media (max-width: 600px) {

  .ypy-dl-form {
    padding: 22px 16px;
  }

  .ypy-dl-form .ypy-dl-step h3 {
    font-size: 18px;
  }

  .ypy-dl-form .ypy-dl-buttons,
  .ypy-dl-form .ypy-dl-buttons > p {
    gap: 10px;
  }

  .ypy-dl-form .ypy-dl-step button,
  .ypy-dl-form .ypy-dl-step input[type="submit"] {
    padding: 12px 8px;
    font-size: 15px;
  }

  .ypy-dl-form .ypy-dl-buttons button,
  .ypy-dl-form .ypy-dl-buttons input[type="submit"] {
    flex: 0 1 45%;
    width: 45%;
    min-width: 0;
    max-width: 180px;
  }
}


/* =====================================
   類人猿分類 タイプ別SNSシェア
===================================== */

.ypy-type-share {
    max-width: 1000px;
    margin: 40px auto;
    padding: 35px 25px;
    background: #f7f9f5;
    border: 1px solid #dce7d8;
    border-radius: 15px;
    text-align: center;
}

.ypy-type-share h3 {
    margin: 0 0 20px;
    color: #215c43;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.5;
}

.ypy-type-share > p {
    line-height: 1.9;
}

/* ボタン */

.ypy-share-buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 25px 0 15px;
}

.ypy-share-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px 5px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity .2s, transform .2s;
}

.ypy-share-buttons a:hover {
    color: #fff;
    opacity: .85;
    transform: translateY(-2px);
}

.ypy-share-line {
    background: #06c755;
}

.ypy-share-x {
    background: #171717;
}

.ypy-share-facebook {
    background: #1877f2;
}

.ypy-share-instagram {
    background: #bd397e;
}

.ypy-share-threads {
    background: #292929;
}

.ypy-type-share .ypy-share-note {
    font-size: 12px;
    color: #697a6e;
}

.ypy-type-share .ypy-share-bottom {
    margin: 20px 0 0;
    color: #506658;
    font-weight: bold;
}

/* スマホ */

@media (max-width: 600px) {

    .ypy-type-share {
        padding: 25px 15px;
    }

    .ypy-share-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ypy-share-buttons a {
        min-height: 48px;
        font-size: 13px;
    }

}


.ypy-subpage .subpage-content-wrap{
  font-size:18px;
}

@media(max-width:700px){
  .ypy-subpage .subpage-content-wrap{
    font-size:16px;
  }
}