@charset "UTF-8";
html {
  width: 100vw;
  overflow-x: hidden;
}
:root {
  --sp-fs-32: max(8.53333vw, 28px);
  --sp-fs-28: max(7.46666vw, 24px);
  --sp-fs-24: max(6.4vw, 21px);
  --sp-fs-20: max(5.33333vw, 18px);
  --sp-fs-18: max(4.8vw, 16px);
  --sp-fs-16: max(4.26666vw, 14px);
  --sp-fs-14: max(3.73333vw, 12px);
  --sp-fs-13: max(3.46vw, 12px);
  --sp-fs-12: max(3.2vw, 11px);
  --sp-fs-11: max(2.93333vw, 10px);
  --sp-fs-10: max(2.66666vw, 9px);
  --sp-fs-9: max(2.4vw, 8px);
}

.wrap {
  width: 93.33333vw;
  background: #fefaf7;
  margin: 0 auto;
  border-radius: 6.4vw;
  margin-top: 34.1vw;
  transition:
    opacity 1.5s ease,
    background 1.5s ease;
  transition: 0.5s;
  margin-bottom: 6.11111vw;
}

.wrap2 {
  width: 93.33333vw;
  background: #fefaf7;
  margin: 0 auto;
  border-radius: 6.4vw;
  margin-top: 34.1vw;
  transition: 0.5s;
  margin-bottom: 6.11111vw;
}

.txtBlock1,
.txtBlock2 {
  border-radius: 2.13333vw !important;
  padding: 6.4vw !important;
  margin: 3.33333vw 6.4vw !important;
  /* インラインstyleのwidth:100%を打ち消す。100%のままだと左右marginと合算して
     はみ出すため、autoにしてmargin分を引いた幅にする */
  width: auto !important;
}

.txtBlock2 {
  padding-left: 17.06666vw !important;
  position: relative;
}
.txtBlock2:before {
  content: "";
  background: url("/img/common/quote_icon.svg") no-repeat;
  background-size: contain;
  width: 5.645vw;
  height: 4.90333vw;
  position: absolute;
  left: 6.4vw;
  top: 6.4vw;
}

body.background {
  transition:
    opacity 1s ease,
    background-color 0.3s ease;
}
body.background .wrap {
  position: relative;
  z-index: 10;
  background: transparent;
  transition: background 0.3s ease;
}
/* ===== Dream Effect ===== */
body.dream {
  background-color: #fff !important;
  transition: background-color 1.5s ease;
}
body.dream .wrap {
  color: #312928;
  background: transparent;
  opacity: 0;
  transition:
    background 1.5s ease,
    opacity 1.5s ease;
}
body.dream .wrap:has(.dream_block) {
  opacity: 1;
}
.wrap:has(.dream_block) > *:not(.dream_block) {
  transition: opacity 0.4s ease;
}
body.dream .wrap:has(.dream_block) > *:not(.dream_block) {
  opacity: 0;
}
body.dream .wrap.story {
  background: transparent;
}

.anim_background {
  padding: 40vh 0 20vh !important;
}
.anim_background.dream_block {
  will-change: opacity;
  transition: opacity 0.4s ease;
}
.anim_background.dream_block > * {
  padding-right: 6.4vw !important;
  padding-left: 6.4vw !important;
}
.anim_background.dream_block.on {
  opacity: 1;
  transition: opacity 0.8s ease;
}
/* dream child entrance (per-element, grandchildren) */
.dream_block > * > * {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.dream_block > * > .dream-child-on {
  animation: dreamContentIn 1.2s ease-out forwards;
}
.dream_block > * > .dream-child-instant {
  animation: none !important;
  opacity: 1;
}
@keyframes dreamContentIn {
  0% {
    opacity: 0;
    /* filter: blur(10px); */
    transform: translate(-32px, -24px) scale(1.03) skewX(0.4deg);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0) scale(1) skewX(0deg);
  }
}

/* --- dream overlay --- */
.dreamOverlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.8s ease;
}
body.dream .dreamOverlay {
  opacity: 1;
}

.dreamOverlay::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 5%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.9) 100%
  );
  animation: dreamVignetteIn 2s ease-out 0.3s forwards;
}

.dreamOverlay::after {
  content: "";
  position: absolute;
  inset: -25%;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7) rotate(-5deg);
  background: radial-gradient(
    ellipse at center,
    transparent 25%,
    rgba(235, 225, 255, 0.2) 50%,
    transparent 70%
  );
  animation: dreamHazeIn 2.5s ease-out 0.5s forwards;
}

.dreamMist,
.dreamMist2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0;
}
.dreamMist {
  width: 70vw;
  height: 70vw;
  top: 5%;
  left: 0%;
  transform: scale(0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(210, 200, 245, 0.25) 0%,
    transparent 70%
  );
  animation: dreamMistIn1 2.2s ease-out 0.6s forwards;
}
.dreamMist2 {
  width: 60vw;
  height: 60vw;
  bottom: 5%;
  right: 0%;
  transform: scale(0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(245, 215, 200, 0.2) 0%,
    transparent 70%
  );
  animation: dreamMistIn2 2.2s ease-out 0.9s forwards;
}

/* top / bottom soft edge
   白(dream1)と黒(dream2)のグラデを ::before / ::after の別レイヤーに分離し、
   各レイヤーの opacity だけで表示制御する（PC版と同じ意図）。
   背景グラデは CSS transition で補間できず、dream2 解除時に黒→白へ瞬時に
   切り替わって「黒の解除が一瞬」に見えていたのを防ぐ。 */
.dreamEdgeTop,
.dreamEdgeBottom {
  position: fixed;
  left: 0;
  right: 0;
  height: 28vh;
  pointer-events: none;
  z-index: 11;
  background: transparent;
  opacity: 1;
}
.dreamEdgeTop {
  top: 0;
}
.dreamEdgeBottom {
  bottom: 0;
}
.dreamEdgeTop::before,
.dreamEdgeTop::after,
.dreamEdgeBottom::before,
.dreamEdgeBottom::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
  pointer-events: none;
}
/* ::before = dream1（白） / ::after = dream2（黒） */
.dreamEdgeTop::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.95) 20%,
    rgba(255, 255, 255, 0.75) 45%,
    rgba(255, 255, 255, 0.35) 70%,
    transparent 100%
  );
}
.dreamEdgeTop::after {
  background: linear-gradient(
    to bottom,
    rgba(38, 38, 43, 1) 0%,
    rgba(38, 38, 43, 0.95) 20%,
    rgba(38, 38, 43, 0.75) 45%,
    rgba(38, 38, 43, 0.35) 70%,
    transparent 100%
  );
}
.dreamEdgeBottom::before {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.95) 20%,
    rgba(255, 255, 255, 0.75) 45%,
    rgba(255, 255, 255, 0.35) 70%,
    transparent 100%
  );
}
.dreamEdgeBottom::after {
  background: linear-gradient(
    to top,
    rgba(38, 38, 43, 1) 0%,
    rgba(38, 38, 43, 0.95) 20%,
    rgba(38, 38, 43, 0.75) 45%,
    rgba(38, 38, 43, 0.35) 70%,
    transparent 100%
  );
}
body.dream .dreamEdgeTop::before,
body.dream .dreamEdgeBottom::before {
  opacity: 1;
}

@keyframes dreamVignetteIn {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes dreamHazeIn {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes dreamMistIn1 {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-10vw, -4vw);
  }
}
@keyframes dreamMistIn2 {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(6vw, -3vw);
  }
}

/* ========================================
   dream_block2（黒い夢）
   ======================================== */
/* 背景色のtransitionをdream遷移の全状態で0.8sに統一する（PC版と同じ意図）。
   デフォルトの background-color 0.3s と混在すると入りで黒へ「ぱっと」変わるのを防ぐ。 */
body,
body.on,
body.background {
  transition:
    opacity 1s ease,
    background-color 0.8s ease;
}
body.dream2 {
  background-color: #26262b;
  transition:
    background-color 0.8s ease,
    opacity 0s;
}
body.dream2 .wrap {
  color: #e8e6e3;
  background: transparent;
  opacity: 0;
  transition:
    background 0.8s ease,
    opacity 0.3s ease;
}
body.dream2 .wrap:has(.dream_block2) {
  opacity: 1;
}
.wrap:has(.dream_block2) > *:not(.dream_block2) {
  transition: opacity 0.5s ease;
}
body.dream2 .wrap:has(.dream_block2) > *:not(.dream_block2) {
  opacity: 0;
}
body.dream2 .wrap,
body.dream2 .wrap.story {
  background: transparent;
  transition: background 0.8s ease;
}

/* Custom Block干渉を強制上書き（#ffea73 / color） */
body.dream2 .dream_block2 > * > * {
  background-color: transparent !important;
  color: #e8e6e3 !important;
}

.anim_background.dream_block2 {
  will-change: opacity;
  transition: opacity 0.4s ease;
  opacity: 0;
  padding-top: 25vh !important;
  position: relative;
}
/* stickyのコンテンツ領域確保 */
.anim_background.dream_block2::after {
  content: "";
  display: block;
  height: 75vh;
}
.anim_background.dream_block2 > * {
  padding-right: 6.4vw !important;
  padding-left: 6.4vw !important;
}
/* dream / dream2 ブロック内の画像を100vw（フルブリード）にする。
   テキストの左右余白は維持しつつ、画像だけ calc(50% - 50vw) で親paddingを打ち消し
   画面幅いっぱいに広げる（右に見切れさせず、左右を画面端に揃える）。
   anim_fade の scale(1.05) ズームによる横はみ出しは html の overflow-x:clip で
   スクロールバーを出さずにクリップする（clip はスクロールコンテナを作らないため
   dream2-pin の position:sticky は維持される）。
   ※セレクタに .anim_background を付けて詳細度を 0,0,3,0 に上げている。
     後段の `.anim_background .wp-block-image { margin:0 !important }`（0,0,2,0）に
     ソース順で負けて margin-left が打ち消され、左に空白＋右に見切れが出るのを防ぐため。 */
html {
  overflow-x: clip;
}
.anim_background.dream_block .wp-block-image,
.anim_background.dream_block .anim_fade > figure,
.anim_background.dream_block2 .wp-block-image,
.anim_background.dream_block2 .anim_fade > figure {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.anim_background.dream_block .wp-block-image img,
.anim_background.dream_block .anim_fade figure img,
.anim_background.dream_block2 .wp-block-image img,
.anim_background.dream_block2 .anim_fade figure img {
  width: 100vw !important;
  max-width: 100vw !important;
}
.anim_background.dream_block2.on {
  animation: dream2BlockIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dream2BlockIn {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* dream2-pin: stickyラッパー（.effect時のみ） */
.dream_block2.effect .dream2-pin {
  position: sticky;
  top: 10vh;
}

/* dream_block2 figure: brightnessフラッシュ（figureに適用→sticky wrapperに影響しない） */
.dream_block2.effect .dream2-pin > figure {
  opacity: 0;
}
.dream2-pin > figure > figure:first-child {
  margin-bottom: 25vh !important;
}
.dream_block2.effect.on .dream2-pin > figure {
  animation: dream2FigIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dream2FigIn {
  0% {
    filter: brightness(1) blur(20px);
    opacity: 1;
  }

  10% {
    filter: brightness(3) blur(0px);
    opacity: 1;
  }
  20% {
    filter: brightness(3) blur(0px);
    opacity: 1;
  }
  100% {
    filter: brightness(1) blur(0px);
    opacity: 1;
  }
}

/* --- dream2 overlay (dark) --- */
body.dream2 .dreamOverlay {
  opacity: 1;
  /* 全画面の暗いビネットも瞬時(step-start)ではなく滑らかにフェードイン。
     body背景・dreamEdgeと同じ0.8sに揃えて、dream2の暗転を一体でふわっと見せる。 */
  transition: opacity 0.8s ease;
}
body.dream2 .dreamOverlay::before {
  animation: none;
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    transparent 10%,
    rgba(38, 38, 43, 0.5) 45%,
    rgba(38, 38, 43, 0.9) 100%
  );
}
body.dream2 .dreamOverlay::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(30, 30, 50, 0.2) 50%,
    transparent 70%
  );
}
body.dream2 .dreamMist {
  background: radial-gradient(
    ellipse at center,
    rgba(40, 40, 65, 0.25) 0%,
    transparent 70%
  );
}
body.dream2 .dreamMist2 {
  background: radial-gradient(
    ellipse at center,
    rgba(50, 40, 55, 0.2) 0%,
    transparent 70%
  );
}
/* dream2 の黒い縁は ::after レイヤーの opacity で出す（背景グラデは固定）。
   入り・抜けとも 0.8s の opacity フェードになり「黒の解除が一瞬」が解消する。 */
body.dream2 .dreamEdgeTop::after,
body.dream2 .dreamEdgeBottom::after {
  opacity: 1;
}

.wp-block-embed {
  margin: 3.3333vw 0;
}

.wp-block-embed iframe {
  width: 100%;
  height: auto;
  border-radius: 2.22222vw;
}

.menuBtn {
  opacity: 1;
}
.subNavWrap {
  position: fixed;
  left: 0;
  bottom: -15vw;
  width: 100vw;
  z-index: 20;
  overflow: scroll;
  transition: 0.7s;
}
body.on .subNavWrap {
  bottom: 0;
  transition: 0.7s;
}

.subNav {
  display: flex;
  width: max-content;
  align-items: center;
  height: 13.3333vw;
  padding-left: 4.2666vw;
  background: #eae3de;
  gap: 4.26666vw;
  min-width: 100vw;
  padding-right: 4.26666vw;
  justify-content: center;
}

.subNav.select1 li:nth-child(1),
.subNav.select2 li:nth-child(2),
.subNav.select3 li:nth-child(3),
.subNav.select4 li:nth-child(4),
.subNav.select5 li:nth-child(5) {
  background: #383533;
  height: 2.9861111vw;
  padding: 3.2vw;
  color: #fefaf7;
  border-radius: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subNav.select1 li:nth-child(1) a,
.subNav.select2 li:nth-child(2) a,
.subNav.select3 li:nth-child(3) a,
.subNav.select4 li:nth-child(4) a,
.subNav.select5 li:nth-child(5) a {
  color: #fefaf7;
  font-weight: 500;
}
h1 {
  position: absolute;
  left: 50%;
  top: 0;
  margin-top: 0;
  padding-top: 2.4vw;
  padding-left: 2.4vw;
  margin-left: -6.13vw;
}

h1 a {
  display: block;
}

h1:before {
  content: "";
  border: #312928 1px solid;
  position: absolute;
  width: 18.466666vw;
  height: 28.933333vw;
  left: -0.9vw;
  top: -2.2vw;
  pointer-events: none;
  opacity: 0.3;
}

h1 img {
  width: 12.26vw;
  margin-left: 0.1vw;
  margin-top: 0.25vw;
}

h1:after {
  content: "";
  border: #312928 1px solid;
  position: absolute;
  width: 16.8vw;
  height: 29.46vw;
  left: 0;
  top: -1.75vw;
  pointer-events: none;
  opacity: 0.3;
}
/* contact
-----------------*/

.wrap.contact input[type="text"],
.wrap.contact input[type="email"],
.wrap.contact textarea {
  border: #cec1b8 1px solid;
  width: 100%;
  background: #f8f2ef;
  height: 12.8vw;
  border-radius: 1.06666vw;
  padding: 4vw;
}

.wrap.contact textarea {
  height: 32vw;
}

.wrap.contact label.fileInput {
  background: #383533;
  border-radius: 8vw;
  height: 11.73vw;
  display: inline-block;
  color: #fff;
  font-weight: 600;
  padding: 0 12.8vw 0 6.4vw;
  position: relative;
  font-size: var(--sp-fs-12);
  min-width: 50%;
}
.mw_wp_form_confirm label.fileInput {
  display: none;
}

.mw_wp_form_confirm label.fileInput {
  display: none;
}

.wrap.contact label.fileInput .mwform-file-delete {
  display: none;
}
.wrap.contact label.fileInput:after {
  background: url(/img/common/arrow1_1.svg) no-repeat;
  background-size: contain;
  content: "";
  width: 1.5vw;
  height: 3vw;
  position: absolute;
  right: 5.5vw;
  top: 4.15vw;
}
.wrap.contact .mw_wp_form_input input[type="file"] {
  display: none;
}

.wrap.contact input[type="submit"] {
  background: #383533;
  color: #fff;
  border-radius: 2.13333vw;
  height: 17.066vw;
  width: 100%;
  font-size: var(--sp-fs-16);
  font-weight: 600;
  margin-top: 4.72222vw;
  letter-spacing: 0.05em;
}
.nametext {
  margin-top: 3.2vw;
  color: #383533;
  display: block;
  font-weight: 400;
}
.wrap.contact .fileSelect {
  color: #fff;
  font-weight: 600;
  /* position: absolute; */
  left: 0;
  margin-top: -17vw;
  display: block;
  position: relative;
  margin-left: 5vw;
}
.mw_wp_form_confirm label.fileInput,
.mw_wp_form_confirm small.fileSelect {
  display: none !important;
}
.mw_wp_form_confirm .fileSelect {
  display: none;
}
.wrap.contact label.fileInput .fileSelect {
  display: flex;
  align-items: center;
  margin-top: 2.35vw;
  margin-left: 0;
}

.wrap.contact .inner input[type="submit"] {
  background: #222;
  color: #fff;
  border-radius: 0.55555vw;
  height: 5vw;
  width: 100%;
  font-size: 1.25vw;
  font-weight: 600;
  margin-top: 4.72222vw;
  letter-spacing: 0.05em;
}

.wrap.contact {
  padding: 4.444444vw 7.77777vw;
}

.wrap.contact strong {
  font-weight: 600;
  font-size: var(--sp-fs-16);
  display: block;
  margin-bottom: 0.4vw;
}

.wrap.contact form > p {
  margin-bottom: 5.33333vw;
}

.wrap.contact form p.backBtn input {
  opacity: 0.5;
  margin-top: 0;
}

.mw_wp_form_confirm p.fileUp {
  margin-bottom: 0 !important;
}

.mw_wp_form_confirm p.fileUp label {
  display: none !important;
}
.mw-wp-form_file a {
  margin-top: -6vw;
  display: block;
}
.wrap.contact strong span {
  font-size: var(--sp-fs-12);
  font-weight: 400;
}

.wrap,
.wrap2 {
  padding: 8.53333vw 6.4vw;
}

.wrap.story {
  background: #ffffff;
  width: 100vw;
  margin-left: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 4.53333vw;
}
.wrap.story > *:not(.wp-block-image) {
  padding-left: 6.4vw;
  padding-right: 6.4vw;
}
.wrap.story > .anim_background {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.anim_background img {
  width: 100vw;
}
.wrap.story a.btn1 {
  width: calc(100% - 12.8vw);
  margin-left: auto;
  margin-right: auto;
}

.wrap img,
.wrap2 img {
  max-width: 100%;
}

.anim_parapara,
.anim_scaleup,
.anim_parallax,
.anim_fade,
.anim_background {
  margin: 12.8vw 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.anim_parapara .wp-block-image,
.anim_scaleup .wp-block-image,
.anim_parallax .wp-block-image,
.anim_fade .wp-block-image,
.anim_background .wp-block-image {
  margin: 0 !important;
}
.anim_parapara .wp-block-image img,
.anim_scaleup .wp-block-image img,
.anim_parallax .wp-block-image img,
.anim_fade .wp-block-image img,
.anim_background .wp-block-image img {
  width: 100%;
  max-width: 100%;
}
.anim_parallax figure,
.anim_fade figure,
.anim_scaleup figure,
.anim_background figure {
  margin: 0;
  width: 100%;
}
.anim_parallax figure img,
.anim_fade figure img,
.anim_scaleup figure img,
.anim_background figure img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

h2.ttl {
  font-size: var(--sp-fs-24);
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  position: relative;
  margin-bottom: 16vw;
  line-height: 1;
  text-align: center;
  width: 100%;
}

h2.ttl:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7.3833333vw;
  width: 100%;
  height: 0.5388888vw;
  background: url("../img/dummy/headline.svg");
}

hr.wp-block-separator {
  border-top: 1px solid #3c3130 !important;
  border-bottom: none !important;
  margin: 12.8vw 0;
  opacity: 0.15;
}

.wp-block-columns {
  margin: 5.55555vw 0 !important;
  display: flex;
}

.wrap > p {
  margin: 3.33333vw 0;
}
.wrap.story p {
  margin: 10.6666vw 0;
}

.authorBlock ruby {
  font-size: var(--sp-fs-24);
  font-weight: 600;
  display: block;
  line-height: 1.5;
}

.authorBlock ruby rb {
  display: block;
  margin-top: 0.3vw;
  margin-bottom: 0.5vw;
  font-size: var(--sp-fs-12);
}

/* iOS Safari ルビ位置の調整
   本文 p の line-height(約2.0) をルビが継承すると、iOS Safari(WebKit) は行の余白分だけ
   ふりがな(rt)を本文から上に離して配置するため「ふりがなが離れて」見える。
   ※ ruby/rt の line-height を詰めても iOS では距離が変わらない（実機シミュレータで確認）。
     rt を translateY で少し下げて本文に近づけるのが有効。
   Chrome/Edge では rt が既に本文近くにあり、下げると逆に近づきすぎるため、
   iOS WebKit 限定(@supports -webkit-touch-callout)でのみ適用する。
   （iPhone SE / iOS Safari シミュレータで現状=離れる→修正後=近接 を目視確認済み） */
@supports (-webkit-touch-callout: none) {
  .wrap.story p rt {
    transform: translateY(0.4em);
  }
}

h3 + style + p,
h4 + style + p,
h5 + style + p,
h3 + p,
h4 + p,
h5 + p {
  margin-top: 0 !important;
}

figure figcaption {
  font-size: var(--sp-fs-10);
  margin-top: 1.1111vw !important;
  color: #c0bbb9;
}

p.small {
  font-size: var(--sp-fs-10);
}

h4.ttl4 {
  font-size: var(--sp-fs-16) !important;
  font-weight: 600;
  margin-top: 6.4vw;
  margin-bottom: 1.11111vw;
  line-height: 1.65;
}

h5.ttl5 {
  font-size: var(--sp-fs-14);
  font-weight: 600;
  margin-top: 3.8vw;
}

h3 + h4,
h4 + h5 {
  margin-top: 0 !important;
}

.wp-block-image {
  margin-bottom: 3.33333vw !important;
}
.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}
figure.height {
  margin-bottom: 3.33333vw;
}
figure.height img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@keyframes sca2 {
  0% {
    left: 0;
    top: 0;
    transform: scale(0.5);
    opacity: 0;
  }
  10% {
    left: -2vw;
    top: -2vw;
    transform: scale(0.55);
    opacity: 0.1;
  }
  20% {
    left: 1vw;
    top: 1vw;
    transform: scale(0.6);
    opacity: 0.2;
  }
  30% {
    left: -1vw;
    top: -1vw;
    transform: scale(0.65);
    opacity: 0.3;
  }
  40% {
    left: 0vw;
    top: 1vw;
    transform: scale(0.7);
    opacity: 0.4;
  }
  50% {
    left: -2vw;
    top: -1vw;
    transform: scale(0.75);
    opacity: 0.5;
  }
  60% {
    left: 0;
    top: 2vw;
    transform: scale(0.8);
    opacity: 0.6;
  }
  70% {
    left: -1vw;
    top: 1vw;
    transform: scale(0.85);
    opacity: 0.7;
  }
  80% {
    left: 1vw;
    top: -1vw;
    transform: scale(0.9);
    opacity: 0.8;
  }
  90% {
    left: -2vw;
    top: 2vw;
    transform: scale(0.95);
    opacity: 0.9;
  }
  100% {
    left: 0;
    top: 0;
    transform: scale(1);
    opacity: 1;
  }
}

strong.frameText {
  font-size: var(--sp-fs-13) !important;
  font-weight: 600;
  padding: 0.6vw 2.1333333vw;
  margin-top: 4.26666vw;
  margin-bottom: 6.4vw;
  border-radius: 1.1111vw;
}

.linkArea {
  margin-top: 9.6vw;
}

a.next {
  width: 100%;
  background: #383533;
  border-radius: 2.1333333vw;
  padding: 2.2222222vw;
  color: #fcf7f3;
  font-size: var(--sp-fs-18);
  display: block;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
  box-shadow: 0.41666vw 0.41666vw 0 0 rgba(173, 158, 155, 0.35);
}

a.next span {
  display: block;
  font-size: var(--sp-fs-14);
  margin-bottom: 0.5vw;
}

.child {
  margin-top: 6.4vw;
  margin-left: -0.2vw;
}

.linkArea a.btn1.back {
  width: 80vw;
  text-align: center;
  line-height: 1.2;
  vertical-align: top;
  /* box-shadow: 0.41666vw 0.41666vw 0 0 rgb(173 158 155 / 35%); */
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.94444444vw 3.4vw 1.94444444vw 8.972222vw;
}

.linkArea a.btn1.original {
  width: 80vw;
  text-align: center;
  line-height: 1.2;
  vertical-align: top;
  /* box-shadow: 0.41666vw 0.41666vw 0 0 rgb(173 158 155 / 35%); */
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.94444444vw 8.972222vw 1.94444444vw 3.4vw;
  margin-top: 4.266666vw;
}

.linkArea a.btn1.back:after {
  transform: scale(-1, 1);
  left: 7%;
}

.storyNav.none {
  opacity: 0;
  transition: 0.7s;
  pointer-events: none;
}

.storyNav {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  font-size: var(--sp-fs-11);
  text-align: center;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: 0.4s;
  background: linear-gradient(
    to top,
    rgba(254, 250, 247, 1),
    rgba(254, 250, 247, 0)
  );
  width: 100vw;
  height: 20vw;
  align-items: flex-end;
  padding-right: 3.1vw;
  padding-bottom: 4.26666vw;
}
.storyNav.show {
  opacity: 1;
  pointer-events: auto;
}

.storyNav ul {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.storyNav figure {
  display: block;
}

.storyNav img {
  display: inline;
  height: 5.63vw;
}

.storyNav ul li {
  width: 12.5333vw;
  display: flex;
  justify-content: center;
  font-weight: 500;
}

.storyNav ul li span {
  display: block;
}

.storyNav ul li {
  opacity: 1;
  transition: 0.4s;
}

.storyNav ul li:hover {
  opacity: 1;
  transition: 0.4s;
}

input,
textarea {
  border: #cec1b8 1px solid;
  width: 100%;
  background: #f8f2ef;
}

.profileBlock figure {
  text-align: center;
}

.profileBlock img {
  width: 65vw;
}

.readBlock {
  margin-top: 12.8vw;
}

.readBlock figure {
  height: 41.3333vw;
  overflow: hidden;
  border-radius: 1.666666vw;
  display: flex;
  align-items: center;
}

.readBlock h2 {
  background: #383533;
  width: 80vw;
  height: 16vw;
  position: relative;
  padding-left: 4.26vw;
  margin-left: -8.44444vw;
  display: flex;
  align-items: center;
}

.readBlock h2 img {
  height: 5.5vw !important;
}

.readBlock h2:after {
  content: "";
  position: absolute;
  right: -15.9vw;
  border: 8vw transparent solid;
  border-left: 8vw #383533 solid;
  top: 0;
}

.readBlock div.block {
  opacity: 0;
  transform: scale(1.05);
}

.readBlock div.block.on {
  opacity: 1;
  transform: scale(1);
  transition: 0.7s;
}

.readBlock > div {
  width: 100%;
  margin: 0 auto 4.8vw;
  margin-top: 9.6vw;
}

.readBlock > div .txtBlock {
  padding: 4.3vw 0;
}

.readBlock figure img {
  width: 100%;
  border-radius: 1.666666vw;
}

.readBlock .txtBlock span {
  font-size: var(--sp-fs-14);
  display: block;
  margin-left: 0.7vw;
}

.readBlock .txtBlock h3 {
  font-size: var(--sp-fs-24);
  font-weight: 600;
  line-height: 1.35;
}

.readBlock .txtBlock p {
  margin-top: 1.2vw !important;
  margin-bottom: 4.8333vw;
}

.readBlock p.linkBlock {
  text-align: center;
  opacity: 0;
}

.readBlock p.linkBlock.on {
  opacity: 1;
  transition: 0.7s;
}

.readBlock a.link {
  position: relative;
  display: inline-block;
}
.readBlock a.link:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0.138888vw;
  background: #383533;
  left: 0;
  bottom: 0vw;
}

.readBlock a.link:after {
  content: "";
  background: url("../img/common/arrowBtn.png") no-repeat;
  background-size: cover;
  background-position: 80% 20%;
  width: 1.5972222vw;
  height: 1.5972222vw;
  display: inline-block;
  margin-left: 0.8vw;
  margin-top: -0.5vw;
}

.readBlock .linkBlock.on a.link:before {
  width: 100%;
  transition: 0.5s;
}

.bookBlock1 {
  margin-top: 8.3333vw;
  position: relative;
  transform: scale(1);
  opacity: 1;
}

.bookBlock1 .area4Bg {
  position: absolute;
  left: 0;
  top: 3.333333vw;
  background: #fefaf7;
  height: 29.652777777vw;
  width: 86.875vw;
  border-radius: 0 1.6666666vw 1.6666666vw 0;
}

.underBlock .bookBlock1 .inner {
  margin-top: -52vw;
}

.unverBlock .bookBlock1 .inner figure {
  margin-right: 3.3vw;
}
.bookBlock1 .inner figure {
  width: 72.5333333vw;
  margin: 0 auto;
  margin-right: 2.8vw;
}
.bookBlock1 .inner figure img {
  width: 100%;
}

.bookBlock1 strong {
  position: relative;
  margin-bottom: 1.8055555vw;
  margin-top: 6.94444444vw;
  font-size: var(--sp-fs-24);
  font-weight: 600;
  line-height: 1.5;
}

.bookBlock1 .ttlItem li:nth-child(1) {
  position: absolute;
  width: 12.3vw;
  height: 3.847222vw;
  left: -0.3vw;
  top: 3.2vw;
}

.bookBlock1 .inner > figure img {
  width: 72.5333333vw;
  margin: 0 auto;
}

.illustList {
  width: 100%;
}

.illustList ul {
  display: flex;
  flex-wrap: wrap;
  /*	padding-top: 7.4666vw;*/
  gap: 4.266666vw;
}
.illustList + .illustList ul {
  padding-top: 4.26666vw;
}

.illustList ul li {
  max-width: 37.6vw;
  max-height: 37.6vw;
  overflow: hidden;
  border-radius: 2.13333vw;
}

.bookBlock1 p {
  margin-top: 2.8vw;
  margin-bottom: 4.83333vw;
}

.bookBlock2 {
  margin: 0 auto;
}

.bookBlock2 strong.ttl {
  text-align: center;
  border-top: 1px solid #312928;
  border-bottom: 1px solid #312928;
  padding: 3.2vw 0;
  margin-top: 12.6vw;
  margin-bottom: 8.53vw;
  width: 100%;
  font-size: var(--sp-fs-20);
  font-weight: 600;
  display: block;
  line-height: 1;
  letter-spacing: 0.15em;
}

.bookBlock2 strong.bookttl {
  font-size: var(--sp-fs-16);
  font-weight: 600;
  line-height: 1.5;
  display: block;
  margin-bottom: 1.1111vw;
}

.bookBlock2 span {
  font-size: var(--sp-fs-11);
  display: block;
  margin-top: 0vw;
}

.bookBlock2 ul li {
  width: 100%;
}
.bookBlock2 ul li a {
  display: flex;
}
.bookBlock2 ul li {
  margin-bottom: 9.6vw;
}

.bookBlock2 ul li figure {
  width: 28vw;
  margin-right: 4.26vw;
}

.bookBlock2 ul li a > div {
  width: 54.66666vw;
}

.bookBlock2 ul li img {
  width: 100%;
  display: block;
}

.author {
  background: #f8f2ef;
  width: 93.33333vw;
  padding: 10.6666vw 6.7vw;
  margin: 10.66666vw 0 10.66666vw -6.4vw;
  align-items: center;
}

h3.ttl3 + .author {
  margin-top: 0 !important;
}

h3.ttl3.center {
  text-align: center;
}

.author figure {
  width: 90%;
  margin: 0 auto;
  margin-left: 8vw;
  display: block;
}

.author figure img {
  width: 100%;
}

.author strong {
  line-height: 1.5;
  font-weight: 600;
  display: block;
  margin-top: 0.8vw;
  /*	margin-bottom: 0.6vw;*/
}

.author > div {
  width: 100%;
}

.author strong p {
  font-size: var(--sp-fs-20) !important;
  margin-bottom: 0.4vw !important;
}
.author a.btn1 {
  width: 100%;
  text-align: center;
  padding: 1.94444444vw 2vw;
}

.author a.btn1:not(:last-child) {
  margin-bottom: 0.66666vw;
  margin-top: 5.33333vw;
}

.author a.btn1:last-child {
  margin-top: 3.2vw;
}

.aboutBlock {
  position: relative;
  margin-top: -1.111111vw;
}

.aboutBlock h3 {
  width: 89.6vw;
  margin-left: -4.722222vw;
  margin-bottom: 2.777777vw;
}

.aboutBlock h3 img {
  width: 100%;
}

.aboutBlock {
  width: 100%;
}

.aboutBlock > figure {
  position: absolute;
  right: -9.6vw;
  top: 25vw;
  width: 40.266666vw;
  overflow: hidden;
}

.aboutBlock figure img {
  width: 48.266666vw;
  margin-left: 9.5vw;
  display: block;
}

.aboutBlock p {
  width: 57vw;
  margin-top: 8.53vw !important;
}
.newsBlock {
  display: flex;
  align-content: center;
}
.newsBlock dt {
  width: 18.8666vw !important;
}

.newsBlock dd {
  width: 62vw;
}

.newsBlock a {
  color: #ba3b35;
}

.newsBlock img {
  width: 6.4vw !important;
  margin-top: 0.8vw !important;
  margin-left: 0.8vw !important;
}

.wrap p strong {
  font-weight: 600;
}

.wrap p a {
  color: #ba3b35;
}

.vk_balloon .vk_balloon_icon {
  flex-shrink: 0;
}
.vk_balloon .vk_balloon_icon figure {
  width: 24.666666vw;
}
.vk_balloon.vk_balloon-position-right .vk_balloon_icon figure {
  margin-left: -7.5vw !important;
}

.vk_balloon.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_icon {
  margin-left: 0 !important;
}
.vk_balloon.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_icon {
  margin-left: 0 !important;
  /* transform: translateX(-7.5vw); */
}
.vk_balloon .vk_balloon_icon_image {
  width: 100%;
  height: auto;
}
.vk_balloon-position-left {
  display: flex;
  margin: 4.8vw 0;
}
.vk_balloon-position-left figure,
.vk_balloon-position-right figure {
  width: 100%;
}

.vk_balloon-position-left > div {
  position: relative;
  /*	margin-left: 2.4305555vw;*/
}
.vk_balloon-position-left,
.vk_balloon-position-right {
  height: calc(100% - 5vw);
}

.vk_balloon-position-left > div > span {
  color: #c0bbb9;
  font-size: 0.83333vw;
}

.vk_balloon-position-left > div > div,
.vk_balloon-position-right > div > div {
  /*	width: 31.25vw;*/
  width: 100%;
  border-radius: 2.136vw;
  position: relative;
  min-height: 8.5416666vw;
  display: flex;
  align-items: center;
  padding: 4.266666vw;
  max-width: 100%;
  height: 100%;
}

.vk_balloon-position-right figcaption,
.vk_balloon-position-left figcaption {
  text-align: center;
  color: #c0bbb9;
  font-size: var(--sp-fs-9);
  line-height: 1.3;
  margin-top: 0.5vw;
  letter-spacing: 0;
}

.vk_balloon-position-right {
  display: flex;
  margin: 4.8vw 0;
  flex-flow: row-reverse;
}

.vk_balloon-position-right > div.vk_balloon_content_outer {
  position: relative;
  margin-right: 12vw;
}

.vk_balloon-position-right > div > span {
  color: #c0bbb9;
  font-size: 0.83333vw;
}

.vk_balloon-position-left .vk_balloon_content_outer {
  margin-left: 4.266666vw;
}

.vk_balloon_content_outer {
  padding-top: 0.4vw;
  flex: 1;
  min-width: 0;
}

.wrap2 .wp-block-columns {
  width: 100%;
  gap: 1.38vw;
}

.wrap2 .wp-block-column {
  flex-basis: 50%;
}

h3.ttl3 {
  font-size: var(--sp-fs-24);
  font-weight: 600;
  margin-top: 12.8vw;
}
h3.ttl3 p {
  position: relative;
  display: inline-block;
  line-height: 1.5;
  margin-bottom: 6.4vw;
}

h3.ttl3.noLine span {
  text-decoration: none;
}
h3.ttl3 span {
  position: relative;
  /*
    text-decoration: underline #F2E0CF 2.113vw;
    text-underline-offset: -2.113vw;
	text-decoration-skip-ink: none;}
*/
  text-decoration: underline #f2e0cf 6vw;
  text-decoration-thickness: 7vw;
  text-underline-offset: -5.75vw;
  text-decoration-skip-ink: none;
  -webkit-text-decoration: underline;
  -webkit-text-decoration-color: #f2e0cf;
  -webkit-text-decoration-thickness: 7vw;
  -webkit-text-underline-offset: -5.75vw;
  -webkit-text-decoration-skip-ink: none;
}

/* iOS Safari: story見出し(h3.ttl3)のクリームのハイライトバーが細線化/消失する問題の修正
   mokuji見出しと同じく、太い text-decoration の下線を文字背後に敷く手法を iOS Safari が
   描画できず、ハイライトバーが出ない。iOS WebKit限定で box-decoration-break:clone +
   background に置換し、折り返しても各行が文字幅のクリームバーになるようにする。
   .noLine（下線なし指定）は除外。Chrome/Edge は元の方式のままなので影響なし。 */
@supports (-webkit-touch-callout: none) {
  h3.ttl3:not(.noLine) span {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: #f2e0cf;
    text-decoration: none;
    -webkit-text-decoration: none;
    padding: 0.02em 0.18em;
    line-height: 1.9;
  }
}

h3.h3_genbun {
  font-size: var(--sp-fs-18);
  border-bottom: 1px solid #3c3130;
  width: 100%;
  margin-top: 5.55555vw;
  font-weight: 500;
}

h4.ttl4_genbun {
  font-size: var(--sp-fs-14);
  font-weight: 600;
  margin-top: 4.8vw;
  background: #ebe4e1;
  border-radius: 1.11111vw;
  padding: 1.11111vw 3.2vw;
}
h3.h3_genbun + p,
h4.ttl4_genbun + p {
  margin-top: 3.33333vw !important;
}

h3.h3_genbun + .wp-block-columns,
h3.h3_genbun + .wp-block-columns + .wp-block-columns,
h3.h3_genbun + .wp-block-columns + .wp-block-columns + .wp-block-columns,
h3.h3_genbun
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns,
h3.h3_genbun
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns,
h3.h3_genbun
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns,
h3.h3_genbun
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns,
h3.h3_genbun
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns,
h3.h3_genbun
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns
  + .wp-block-columns {
  margin-top: 1.2vw !important;
  margin-bottom: 0vw !important;
}

.snsBlock {
  margin: 6.4vw 0 !important;
}

.snsBlock iframe {
  width: 100%;
  height: auto !important;
}
.snsBlock .twitter {
  margin-bottom: 6.4vw;
}

.underBlock.wrap {
  margin-top: 58.8vw;
  width: 100vw;
  margin-left: 0 !important;
  border-radius: 0;
  margin-bottom: 0 !important;
}

.underBlock .bookBlock1 {
  margin-top: -54.8vw !important;
}

.mt {
  margin-top: 6.4vw !important;
}

/* mokuji
-------------------*/

.mokuji.top {
  margin-top: 44.8vw;
}

.mokuji.top h2 {
  width: 80vw;
  margin-left: 10vw;
}

.btnNav {
  position: fixed;
  left: 0;
  bottom: -15vw;
  width: 100vw;
  z-index: 20;
  overflow: scroll;
  transition: 0.7s;
}

body.on .btnNav {
  bottom: 0;
  transition: 0.7s;
  /*    transition-delay: 0.7s;*/
}

.btnNav ul {
  display: flex;
  width: max-content;
  align-items: center;
  height: 13.3333vw;
  padding-left: 4.2666vw;
  background: #eae3de;
  gap: 4.26666vw;
  min-width: 100vw;
}

.btnNav li {
  height: 2.777777vw;
  border-radius: 10vw;
  background: #eae3de;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnNav li.active {
  background: #383533;
  height: 2.9861111vw;
  padding: 3.2vw;
  color: #fefaf7;
  border-radius: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnNav li.active a {
  color: #fefaf7;
  font-weight: 500;
}

.firstBlock,
.mokujiBlock {
  width: 100vw;
  margin: 0 auto;
}

.firstBlock {
  background: #2a4a52;
  color: #fefaf7;
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 10.666vw;
  /*
	height: 36.18055555vw;
	font-size: 1.1111111vw;
*/
}

.firstBlock figure {
  position: absolute;
  height: 36.18055555vw;
  display: block;
  left: 0;
  top: 0;
}
.mokujiBlock figure {
  position: relative;
}

.firstBlock figure:before {
  content: "";
  position: absolute;
  left: 10vw;
  top: 6.4vw;
  height: 88.888vw;
  width: 80vw;
  background: #60777c;
  border-radius: 1.666666vw;
}

.mokujiBlock figure:before {
  content: "";
  position: absolute;
  left: 10vw;
  top: 6.4vw;
  height: 88.888vw;
  width: 80vw;
  background: #f4e3d4;
  border-radius: 1.666666vw;
}

.firstBlock figure img,
.mokujiBlock figure img {
  position: absolute;
  width: 100vw;
  left: -7.477777vw;
  top: -15vw;
}

.firstBlock .right,
.mokujiBlock .right {
  margin-top: 104vw;
  width: 80vw;
  position: relative;
  margin-left: 10vw;
}

.mokujiBlock .right {
  margin-top: 17.06666vw;
}

.firstBlock p.subttl {
  font-weight: 500;
  font-size: var(--sp-fs-14);
}

.firstBlock h3 {
  font-size: var(--sp-fs-32);
  font-weight: 500;
  line-height: 1;
  margin-top: 0.5555vw;
  margin-bottom: 4.8vw;
}
.firstBlock p.txt {
  width: 100%;
}

.firstBlock p.txt {
  margin-bottom: 4.8vw;
}

.firstBlock a.btn_mokuji {
  background: #f8f2ef;
  height: 14.9vw;
  width: 100%;
  border-radius: 1.066666vw;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 1.38888vw 1.94444vw;
}

.firstBlock a.btn_mokuji,
.mokujiBlock li a {
  position: relative;
}

.firstBlock a.btn_mokuji:after,
.mokujiBlock li a:after {
  content: "";
  background: url("../img/common/arrowBtn.png") no-repeat;
  background-size: cover;
  background-position: 80% 20%;
  width: 6.4vw;
  height: 6.4vw;
  position: absolute;
  top: 29%;
}
.mokujiBlock li a:after {
  top: 10%;
}

.firstBlock a.btn_mokuji:after {
  right: 3.2vw;
}

.mokujiBlock li a:after {
  right: 0vw;
}

.mokujiBlock {
  font-size: var(--sp-fs-14);
  background: #fefaf7;
  margin-top: 11.944444vw;
  padding-bottom: 10.66666vw;
}

.mokujiBlock h3 {
  color: #fefaf7;
  display: table;
  border-radius: 0.138888vw;
  line-height: 1.35;
  text-decoration: underline #2a4a52 120%;
  text-decoration-thickness: 9vw;
  text-underline-offset: -7.2vw;
  text-decoration-skip-ink: none;
  -webkit-text-decoration: underline;
  -webkit-text-decoration-color: #2a4a52;
  -webkit-text-decoration-thickness: 9vw;
  -webkit-text-underline-offset: -11.5vw;
  -webkit-text-decoration-skip-ink: none;
}

.mokujiBlock p.subttl {
  color: #fefaf7;
  display: table;
  border-radius: 0.138888vw;
  line-height: 1.35;
  text-decoration: underline #2a4a52 120%;
  text-decoration-thickness: 5vw;
  text-underline-offset: -3.9vw;
  text-decoration-skip-ink: none;
  -webkit-text-decoration: underline;
  -webkit-text-decoration-color: #2a4a52;
  -webkit-text-decoration-thickness: 9vw;
  -webkit-text-underline-offset: -11.5vw;
  -webkit-text-decoration-skip-ink: none;
}

.mokujiBlock div.ttlBlock {
  position: relative;
  padding-top: 92.55vw;
}

.mokujiBlock p.subttl {
  font-size: var(--sp-fs-16);
  font-weight: 500;
}

.mokujiBlock h3 {
  font-size: var(--sp-fs-28);
  font-weight: 500;
  margin-top: 0.5555vw;
  margin-bottom: 2.22222vw;
}

/* iOS Safari: もくじ見出しのハイライトバーが細線化する問題の修正
   subttl/h3 は「太い text-decoration の下線を負オフセットで文字背後に敷く」手法で
   ダークバー＋明色文字を表現しているが、iOS Safari は太い text-decoration-thickness を
   描画できず細い線になり、明色文字が背景に埋もれてしまう（実機シミュレータで確認）。
   iOS WebKit 限定で、下線方式をやめ box-decoration-break:clone + background に置き換える。
   これで折り返しても各行が文字幅のダークバーになり、Chrome と同じ見た目になる。
   （Chrome/Edge は元の text-decoration 方式で正しく出るため @supports で iOS のみ上書き） */
@supports (-webkit-touch-callout: none) {
  .mokujiBlock .ttlBlock p.subttl,
  .mokujiBlock .ttlBlock h3 {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: #2a4a52;
    color: #fefaf7;
    text-decoration: none;
    -webkit-text-decoration: none;
    padding: 0.06em 0.28em;
    line-height: 1.95;
  }
  /* subttl の後で改行して h3 を次の行から始める */
  .mokujiBlock .ttlBlock p.subttl::after {
    content: "\A";
    white-space: pre;
  }
}

.mokujiBlock li {
  display: flex;
  width: 100%;
  align-items: center;
  background: #f8f2ef;
  border-radius: 1.066666vw;
  margin-bottom: 1.06666vw;
  font-weight: 500;
  padding: 5.33333vw;
}

.mokujiBlock li a {
  display: flex;
  width: 100%;
  align-items: center;
}

.mokujiBlock .right ul {
  padding-top: 3.666666vw;
}

.wrap2 .wp-block-columns {
  display: block;
}