@charset "UTF-8";

/* パンくず領域削除 */
#pasha #pageGuide {
  display: none;
}

/* 不要なフッター消去 */
.books div.footerNav.renewal2022hf,
.books ul.spFooter.sp {
  display: none;
}

/* books専用のブレークポイント */
@media screen and (min-width: 821px) {
  .under820 {
    display: none;
  }
}
@media screen and (max-width: 820px) {
  .under820 {
    display: revert;
  }
}
@media screen and (min-width: 601px) {
  .under600 {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .under600 {
    display: revert;
  }
}

/* 変数 */
:root {
  --pasha-navy: #3c4678;
  --pasha-bg-color: #cddbec;

  --font-size-base: 16px;
  --balloon-font-size: 16px;
}
@media screen and (max-width: 600px) {
  :root {
    --font-size-base: 4.25vw;
  }
}

/* ベースフォント */
#pasha {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: #3c3c43;
}

/* 吹き出し｜かっこいい */
/* 変数なしタイプ */
.cool_balloon p {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 5.5px 14px 9.5px 8px;
}
.cool_balloon p::before {
  content: "";
  position: absolute;
  inset: -6px 6px -16px -4px;
  pointer-events: none;

  box-sizing: border-box;

  background-color: black;

  -webkit-mask:
    url(../images/cool_balloon_left_top.svg) left top / 10px 10px no-repeat,
    url(../images/cool_balloon_right_top.svg) right top / 10px 10px no-repeat,
    url(../images/cool_balloon_right_bottom.svg) right bottom / 10px 30px
      no-repeat,
    url(../images/cool_balloon_left_bottom.svg) left bottom / 10px 30px
      no-repeat,
    url(../images/cool_balloon_tail.svg) center bottom / 36px 30px no-repeat;

  mask:
    url(../images/cool_balloon_left_top.svg) left top / 10px 10px no-repeat,
    url(../images/cool_balloon_right_top.svg) right top / 10px 10px no-repeat,
    url(../images/cool_balloon_right_bottom.svg) right bottom / 10px 30px
      no-repeat,
    url(../images/cool_balloon_left_bottom.svg) left bottom / 10px 30px
      no-repeat,
    url(../images/cool_balloon_tail.svg) center bottom / 36px 30px no-repeat;
}
.cool_balloon p::after {
  content: "";
  position: absolute;
  inset: -6px 6px 4px -4px;
  pointer-events: none;
  /*
  border: 1px solid black;
  */
  background:
    /* 左側 */
    linear-gradient(black, black) left 0 top 10px / 1px calc(100% - 10px * 2)
      no-repeat,
    /* 上側 */ linear-gradient(black, black) left 10px top 0 /
      calc(100% - 10px * 2) 1px no-repeat,
    /* 右側 */ linear-gradient(black, black) right 0 top 10px / 1px
      calc(100% - 10px * 2) no-repeat,
    /* 下左側 */ linear-gradient(black, black) left 10px bottom 0 /
      calc((100% - 36px) / 2 - 10px) 1px no-repeat,
    /* 下右側 */ linear-gradient(black, black) right 10px bottom 0 /
      calc((100% - 36px) / 2 - 10px) 1px no-repeat;
}
/* 変数タイプ */
@media screen and (max-width: 600px) {
  .cool_balloon p {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: var(--balloon-font-size);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: calc(var(--balloon-font-size) / 18 * 10);
    padding: calc(var(--balloon-font-size) / 18 * 5.5)
      calc(var(--balloon-font-size) / 18 * 14)
      calc(var(--balloon-font-size) / 18 * 9.5)
      calc(var(--balloon-font-size) / 18 * 8);
  }
  .cool_balloon p::before {
    content: "";
    position: absolute;
    inset: calc(var(--balloon-font-size) / 18 * -6)
      calc(var(--balloon-font-size) / 18 * 6)
      calc(var(--balloon-font-size) / 18 * -16)
      calc(var(--balloon-font-size) / 18 * -4);
    pointer-events: none;

    box-sizing: border-box;

    background-color: black;

    -webkit-mask:
      url(../images/cool_balloon_left_top.svg) left top /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 10) no-repeat,
      url(../images/cool_balloon_right_top.svg) right top /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 10) no-repeat,
      url(../images/cool_balloon_right_bottom.svg) right bottom /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 30) no-repeat,
      url(../images/cool_balloon_left_bottom.svg) left bottom /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 30) no-repeat,
      url(../images/cool_balloon_tail.svg) center bottom /
        calc(var(--balloon-font-size) * 2)
        calc(var(--balloon-font-size) / 18 * 30) no-repeat;

    mask:
      url(../images/cool_balloon_left_top.svg) left top /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 10) no-repeat,
      url(../images/cool_balloon_right_top.svg) right top /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 10) no-repeat,
      url(../images/cool_balloon_right_bottom.svg) right bottom /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 30) no-repeat,
      url(../images/cool_balloon_left_bottom.svg) left bottom /
        calc(var(--balloon-font-size) / 18 * 10)
        calc(var(--balloon-font-size) / 18 * 30) no-repeat,
      url(../images/cool_balloon_tail.svg) center bottom /
        calc(var(--balloon-font-size) * 2)
        calc(var(--balloon-font-size) / 18 * 30) no-repeat;
  }
  .cool_balloon p::after {
    content: "";
    position: absolute;
    inset: calc(var(--balloon-font-size) / 18 * -6)
      calc(var(--balloon-font-size) / 18 * 6)
      calc(var(--balloon-font-size) / 18 * 4)
      calc(var(--balloon-font-size) / 18 * -4);
    pointer-events: none;
    /*
  border: 1px solid black;
  */
    background:
    /* 左側 */
      linear-gradient(black, black) left 0 top
        calc(var(--balloon-font-size) / 18 * 10) /
        calc(var(--balloon-font-size) / 18)
        calc(100% - var(--balloon-font-size) / 18 * 10 * 2) no-repeat,
      /* 上側 */ linear-gradient(black, black) left
        calc(var(--balloon-font-size) / 18 * 10) top 0 /
        calc(100% - var(--balloon-font-size) / 18 * 10 * 2)
        calc(var(--balloon-font-size) / 18) no-repeat,
      /* 右側 */ linear-gradient(black, black) right 0 top
        calc(var(--balloon-font-size) / 18 * 10) /
        calc(var(--balloon-font-size) / 18)
        calc(100% - var(--balloon-font-size) / 18 * 10 * 2) no-repeat,
      /* 下左側 */ linear-gradient(black, black) left
        calc(var(--balloon-font-size) / 18 * 10) bottom 0 /
        calc(
          (100% - var(--balloon-font-size) * 2) / 2 - var(--balloon-font-size) /
            18 * 10
        )
        calc(var(--balloon-font-size) / 18) no-repeat,
      /* 下右側 */ linear-gradient(black, black) right
        calc(var(--balloon-font-size) / 18 * 10) bottom 0 /
        calc(
          (100% - var(--balloon-font-size) * 2) / 2 - var(--balloon-font-size) /
            18 * 10
        )
        calc(var(--balloon-font-size) / 18) no-repeat;
  }
}

/* キービジュアル｜写真 */
.kv_area {
  height: 280px;
  width: 100%;
  overflow: hidden;
  background-color: var(--pasha-navy);
}
.kv_inner {
  position: relative;
  max-width: 1146px;
  margin: 0 auto;
}
.kv_photo {
  position: absolute;
  left: -90px;
  width: 506px;
  height: 280px;
  clip-path: polygon(90px 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
  overflow: hidden;
}
.kv_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 写真の横幅が縮む */
@media screen and (max-width: 1146px) {
  .kv_photo {
    width: calc(100% - 730px + 90px);
  }
}
/* 写真の横幅が下限に達する */
@media screen and (max-width: 1080px) {
  .kv_photo {
    width: 440px;
  }
}
/* コピー部のレイアウト変更で、写真が最大幅になる */
@media screen and (max-width: 900px) {
  .kv_photo {
    width: 506px;
  }
}
/* 写真の横幅が縮む */
@media screen and (max-width: 840px) {
  .kv_photo {
    width: calc(100% - 424px + 90px);
  }
}
/* 写真の横幅が下限に達する */
@media screen and (max-width: 774px) {
  .kv_photo {
    width: 440px;
  }
}
/* スマホ型レイアウト開始 */
@media screen and (max-width: 620px) {
  .kv_photo {
    clip-path: polygon(46px 0, 100% 0, 100% 100%, 46px 100%);
    left: -46px;
    width: calc(100% + 46px);
  }
}
@media screen and (max-width: 600px) {
  .kv_area {
    height: 60vw;
  }
  .kv_photo {
    width: 112vw;
    height: auto;
    left: -12vw;
    clip-path: none;
  }
}
/* キービジュアル｜コピー */
.kv_copy {
  position: relative;
  left: calc(302px + 66px);
  top: 109px;
  font-size: calc(var(--font-size-base) * 1.625);
  font-weight: 600;
  letter-spacing: 0.125em;
  isolation: isolate;
}
.kv_area .copy_text {
  display: inline-flex;
  margin-left: 3.25em;
  position: relative;
}
.kv_area .copy_text.with_parallelogram {
  margin-left: 0;
  margin-top: calc(var(--font-size-base) * 0.625);
}
.kv_area .copy_text.with_parallelogram::before {
  content: "";
  display: block;
  position: absolute;
  inset: -2em -3em -0.25em -0.5em;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.7);
  transform: skewX(-17.8deg);
}
.copy_strong {
  font-size: calc(var(--font-size-base) * 1.875);
  font-weight: 900;
}
@media screen and (max-width: 1146px) {
  .kv_copy {
    left: calc(302px + 100vw - 1080px);
  }
}
@media screen and (max-width: 1080px) {
  .kv_copy {
    left: 302px;
  }
}
@media screen and (max-width: 1020px) {
  .kv_copy {
    letter-spacing: 0.0625em;
  }
}
@media screen and (max-width: 1000px) {
  .kv_area .copy_text {
    margin-left: 1.25em;
  }
  .kv_area .copy_text.with_parallelogram::before {
    inset: -2em -1.5em -0.25em -0.5em;
  }
}
@media screen and (max-width: 900px) {
  .kv_copy {
    left: auto;
    top: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    letter-spacing: 0.125em;
  }
  .kv_area .copy_text {
    flex-direction: column;
    margin-right: 2em;
  }
  .kv_area .copy_text span:nth-child(2) {
    margin-left: calc((1 + 0.125) * 2em);
  }
  .kv_area .copy_text span:nth-child(3) {
    margin-left: calc((1 + 0.125) * 2em * 2);
  }
  .kv_area .copy_text.first_line::before {
    content: "";
    position: absolute;
    inset: -0.25em -0.5em -0.25em -1em;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.7);
    transform: skewX(-17.8deg);
  }
  .kv_area .copy_text.with_parallelogram {
    margin-top: 1em;
  }
  .kv_area .copy_text.with_parallelogram::before {
    inset: -0.25em -0.5em -0.25em -1em;
  }
}
@media screen and (max-width: 774px) {
  .kv_copy {
    letter-spacing: 0.0625em;
  }
  .kv_area .copy_text {
    margin-right: 1.5em;
  }
}
@media screen and (max-width: 740px) {
  .kv_area .copy_text {
    margin-right: 2em;
  }
  .kv_area .copy_text span:nth-child(2) {
    margin-left: calc((1 + 0.125) * 1em);
  }
  .kv_area .copy_text span:nth-child(3) {
    margin-left: calc((1 + 0.125) * 1em * 2);
  }
}
@media screen and (max-width: 700px) {
  .kv_area .copy_text {
    margin-right: 1.5em;
  }
}
@media screen and (max-width: 680px) {
  .kv_area .copy_text {
    margin-right: auto;
    margin-left: calc(350px - 0.5em);
  }
  .kv_area .copy_text.with_parallelogram {
    margin-right: auto;
    margin-left: calc(350px - 2em);
  }
}
@media screen and (max-width: 620px) {
  .kv_area .copy_text {
    margin-right: -0.25em;
    margin-left: auto;
  }
  .kv_area .copy_text.first_line {
    font-weight: 600;
  }
  .kv_area .copy_text.first_line::before {
    inset: -0.25em -0.5em -0.25em -0.25em;
    transform: skewX(17.8deg);
  }
  .kv_area .copy_text.with_parallelogram {
    margin-right: 0.125em;
    margin-left: auto;
  }
  .kv_area .copy_text.copy_text.with_parallelogram::before {
    inset: -0.25em -0.5em -0.25em -1em;
    transform: skewX(-17.8deg);
  }
}
@media screen and (max-width: 600px) {
  .kv_copy {
    font-size: var(--font-size-base);
  }
  .kv_area .copy_text.first_line::before {
    display: none;
  }
  .kv_area .copy_text.with_parallelogram {
    margin-top: 5.18em;
  }

  .copy_strong {
    font-size: calc(var(--font-size-base) * 1.125);
  }
}

/* タイトル部 */
.title_area {
  width: 100%;
  height: 340px;
  background-image: image-set(
    url("../images/pasha_title_bg.avif") type("image/avif") 1x,
    url("../images/pasha_title_bg@2x.avif") type("image/avif") 2x,
    url("../images/pasha_title_bg.webp") type("image/webp") 1x,
    url("../images/pasha_title_bg@2x.webp") type("image/webp") 2x,
    url("../images/pasha_title_bg.png") type("image/png") 1x,
    url("../images/pasha_title_bg@2x.png") type("image/png") 2x
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  --balloon-font-size: calc(var(--font-size-base) * 1.125);
}
/* 背景が1322pxなので、それ以上はcover */
@media screen and (max-width: 1322px) {
  .title_area {
    background-size: 1322px 340px;
  }
}
/* タイトル部｜白帯 */
.title_area::before {
  content: "";
  position: absolute;
  inset: 117px 0 106px 0;
  background-color: white;
}
/* タイトル部｜中身 */
.title_inner {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  height: 100%;
}
/* タイトル部｜グリッド設定 */
.title_grid {
  display: grid;
  /* 左333px、中央は80pxまで・最小1em、右は残り全部 */
  grid-template-columns: max-content max-content;
  column-gap: 80px; /* clampは期待した動作をしないので固定 */
  /* 3段｜空段を数字で指定＆吹き出し高さも指定。１段目は下揃え */
  grid-template-rows: 112px 19px auto 25px auto 22px;
  /* 中央揃え */
  width: fit-content;
  margin-inline: auto;
  grid-template-areas:
    "images balloon"
    "images ."
    "images title"
    "images ."
    "images stores"
    "images .";
}
/* タイトル部｜問題集 */
.mondaishu_and_smartphone {
  grid-area: images;
  display: flex;
  position: relative;
}
.mondaishu_box {
  position: relative;
  margin-top: 22px;
  width: 200px;
  height: 295px;
  box-sizing: border-box;
  border: solid 1px #999;
}
/* タイトル部｜スマホ */
.smartphone_block {
  position: relative;
  margin-top: 35px;
  width: 133px;
  height: 268px;
  transform: rotate(-7.283deg);
}
.smartphone_block::before {
  content: "";
  position: absolute;
  width: 27px;
  height: 29px;
  right: -16px;
  top: -19px;
  background-image: url("../images/smartphone_deco.svg");
  background-size: contain;
}
.smartphone_screen {
  position: absolute;
  top: 5.5px;
  left: 7px;
  width: 119px;
  height: 257px;
}
.smartphone_housing {
  position: absolute;
  top: 0;
  left: 0;
  width: 133px;
  height: 268px;
}
.mondaishu_box img,
.smartphone_screen img,
.smartphone_housing img {
  width: 100%;
  height: 100%;
  object-position: center top;
  object-fit: cover;
}
/* タイトル部｜吹き出し */
.cool_balloon.pashatto {
  grid-area: balloon;
  /* 左右中央＆下揃え */
  justify-self: center;
  align-self: end;
  white-space: nowrap;
  /*
  background-color: rgba(0, 255, 0, 0.1);
  */
}

/* タイトル部｜パシャレクアイコン */
.pasha_title_block {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 22px;
}
.pasha_icon_box {
  position: relative;
  margin-left: 9px;
  width: 90px;
  height: 90px;
}
.pasha_logo_box {
  position: relative;
  width: 291px;
  height: 52px;
}
.pasha_icon_box img,
.pasha_logo_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* タイトル部｜ストア */
.stores_block {
  grid-area: stores;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
.store_button {
  position: relative;
  width: 171px;
  height: 50px;
}
.store_button.app_not_ready::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/app_not_ready.svg");
  background-size: contain;
  pointer-events: auto;
}
.store_button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.store_button.app_not_ready img {
  opacity: 0;
}
/* 1080以下は両端と中央のアキが縮み出す */
@media screen and (max-width: 1080px) {
  .title_grid {
    column-gap: calc(80px - (1080px - 100vw) / 4);
  }
}

/* 820以下は吹き出しを改行する */
@media screen and (max-width: 820px) {
  .cool_balloon.pashatto {
    margin-top: 45px;
    white-space: normal;
  }
}
/* 780以下ではアイコンとロゴのスペースを縮める */
@media screen and (max-width: 780px) {
  .pasha_title_block {
    gap: 0.5em;
  }
}
/* 760でcolumn-gapが０になるので式を変更 */
@media screen and (max-width: 760px) {
  .title_grid {
    column-gap: 0;
  }
}
/* 740以下では問題集の幅を縮める */
@media screen and (max-width: 740px) {
  .mondaishu_box {
    width: 180px;
    height: calc(180px * 295 / 200);
    margin-top: calc(22px + 15px);
  }
}
/* 720以下では問題集をさらに小さくし、スマホの重なりを大きくする */
@media screen and (max-width: 720px) {
  .mondaishu_box {
    width: 160px;
    height: calc(160px * 295 / 200);
    margin-top: calc(22px + 30px);
  }
  .smartphone_block {
    margin-left: -5px;
  }
}
/* 690以下では問題集をさらに小さくし、スマホの重なりを大きくする */
@media screen and (max-width: 690px) {
  .mondaishu_box {
    width: 140px;
    height: calc(140px * 295 / 200);
    margin-top: calc(22px + 45px);
  }
  .smartphone_block {
    margin-left: -10px;
  }
}
/* 660以下では問題集をさらに小さくし、スマホも小さくする */
@media screen and (max-width: 660px) {
  .mondaishu_box {
    width: 120px;
    height: calc(120px * 295 / 200);
    margin-top: calc(22px + 60px);
  }
  .smartphone_block {
    width: 100px;
    height: calc(100px * 268 / 133);
    margin-top: calc(35px + 30px);
    margin-left: -15px;
  }
  .smartphone_screen {
    width: 90px;
    height: calc(90px * 257 / 119);
    top: 4px;
    left: 4px;
  }
  .smartphone_housing {
    width: 100px;
    height: calc(100px * 268 / 133);
  }
}
/* 600以下ではグリッドから変更 */
@media screen and (max-width: 600px) {
  .title_area {
    width: 100vw;
    height: calc(517 * 100vw / 375);
    background-image: image-set(
      url("../images/pasha_title_bg_sp.avif") type("image/avif") 1x,
      url("../images/pasha_title_bg_sp@2x.avif") type("image/avif") 2x,
      url("../images/pasha_title_bg_sp@3x.avif") type("image/avif") 3x,
      url("../images/pasha_title_bg_sp@4x.avif") type("image/avif") 4x,
      url("../images/pasha_title_bg_sp.webp") type("image/webp") 1x,
      url("../images/pasha_title_bg_sp@2x.webp") type("image/webp") 2x,
      url("../images/pasha_title_bg_sp@3x.webp") type("image/webp") 3x,
      url("../images/pasha_title_bg_sp@4x.webp") type("image/webp") 4x,
      url("../images/pasha_title_bg_sp.png") type("image/png") 1x,
      url("../images/pasha_title_bg_sp@2x.png") type("image/png") 2x,
      url("../images/pasha_title_bg_sp@3x.png") type("image/png") 3x,
      url("../images/pasha_title_bg_sp@4x.png") type("image/png") 4x
    );
    background-size: 100vw auto;
    background-position: center bottom;
    --balloon-font-size: var(--font-size-base);
  }
  .title_area::before {
    inset: 0 0 calc(440 * 100vw / 375) 0;
  }
  .title_grid {
    grid-template-columns: 1fr;
    grid-template-rows: calc(77 * 100vw / 375) auto auto auto;
    /* リセット */
    column-gap: 0;
    grid-template-areas:
      "title"
      "balloon"
      "images"
      "stores";
    width: auto;
    margin-inline: 0;
  }
  .pasha_title_block {
    gap: 5.333vw;
    align-items: center;
    justify-content: center;
  }
  .pasha_icon_box {
    margin-left: 0;
    width: 18.667vw;
    height: 18.667vw;
  }
  .pasha_logo_box {
    width: 61.333vw;
    height: 10.96vw;
  }
  .mondaishu_and_smartphone {
    justify-self: center;
  }
  .mondaishu_box {
    position: relative;
    margin-top: 3.733vw;
    width: 40vw;
    height: 59vw;
    box-sizing: border-box;
    border: solid 1px #999;
  }
  /* タイトル部｜スマホ */
  .smartphone_block {
    position: relative;
    margin-top: 15.818vw;
    margin-left: -3.6vw;
    width: 23.733vw;
    height: 47.823vw;
    transform: rotate(-7.283deg);
  }
  .smartphone_block::before {
    content: "";
    position: absolute;
    width: 5.6vw;
    height: 5.867vw;
    right: -2.8vw;
    top: -3.7vw;
    background-image: url("../images/smartphone_deco_sp.svg");
    background-size: contain;
  }
  .smartphone_screen {
    position: absolute;
    top: 0.981vw;
    left: 1.249vw;
    width: 21.235vw;
    height: 45.861vw;
  }
  .smartphone_housing {
    position: absolute;
    top: 0;
    left: 0;
    width: 23.733vw;
    height: 47.823vw;
  }
  .pasha_title_block {
    align-self: center;
    justify-self: center;
  }
  .stores_block {
    margin-top: 6.224vw;
  }
  .store_button {
    width: 40vw;
    height: 11.733vw;
  }
}
/* タイトル部｜開発 */
.developers_box {
  position: absolute;
  right: 0.25em;
  bottom: 0.25em;
  width: 375px;
  height: 21px;
}
.developers_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 600px) {
  .developers_box {
    position: relative;
    margin-inline: auto;
    margin-top: 3.2vw;
    width: 85.714vw;
    height: 4.8vw;
  }
}

/* お悩みエリア */
.onayami_area {
  font-size: calc(var(--font-size-base) * 1.625);
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pasha-navy);
}
.onayami_area p {
  color: white;
  font-weight: 900;
}
@media screen and (max-width: 600px) {
  .onayami_area {
    font-size: calc(var(--font-size-base) * 1.125);
    height: 10.666vw;
  }
}

/* 会話エリア */
.conversation_area {
  background-image: url("../images/bg_grid.svg");
  background-size: 12px 12px;
  background-position: center top;
  background-repeat: repeat;
  position: relative;
}
.conversation_title {
  font-size: calc(var(--font-size-base) * 1.25);
  font-weight: 700;
  text-align: center;
  padding-top: 17px;
}
/* 会話エリア｜人のかたまりグリッド */
.conversation_grid {
  max-width: 944 px;
  display: grid;
  grid-template-columns: repeat(3, 240px);
  justify-content: space-evenly;
  padding-bottom: 40px;
}
.voice_grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.arrow_box {
  margin-top: 3px;
}
.arrow_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.balloon {
  position: relative;
  width: 100%;
  height: 184px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.balloon::before {
  position: absolute;
  content: "";
  inset: 0;
  background-image: url("../images/balloon_pc.svg");
  background-size: 240px 184px;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
}
.balloon p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--balloon-font-size);
  line-height: 1.875;
  text-align: center;
  margin-bottom: 1em;
}
.charactor_image {
  position: relative;
  width: 122px;
  height: 134px;
}
.charactor_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mom .charactor_image {
  margin-top: 13px;
}
.girl .balloon {
  margin-top: 17px;
}
.girl .balloon::before {
  transform: scaleX(-1);
}
.boy .balloon {
  margin-top: 13px;
}
.boy .charactor_image {
  margin-top: 3px;
}
/* 740px以下ではスマホレイアウトに */
@media screen and (max-width: 740px) {
  .conversation_grid {
    grid-template-columns: 1fr;
    align-items: center;
    width: calc(100% - 2em);
    margin-inline: auto;
  }
  .voice_grid {
    width: max-content;
    grid-template-columns: 210px 1fr;
    justify-items: center;
  }
  .balloon::before {
    background-image: url("../images/balloon_sp.svg");
    background-size: 210px 130px;
  }
  .balloon p {
    margin-bottom: 0;
    font-size: calc(var(--balloon-font-size) * 0.875);
  }
  .voice_grid.girl {
    grid-row: 1;
    justify-self: center;
    column-gap: 10px;
    justify-content: center;
    align-items: center;
  }
  .girl .charactor_image {
    margin-top: 19px;
    margin-left: -5px;
  }
  .arrow_box {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .girl .balloon p {
    margin-right: 1em;
  }
  .girl .balloon::before {
    transform: scaleX(1);
  }
  .voice_grid.mom {
    grid-row: 2;
    justify-self: right;
    grid-template-columns: 1fr 210px;
    margin-top: 5px;
  }
  .mom .balloon {
    grid-row: 1;
    grid-column: 2;
  }
  .mom .balloon::before {
    transform: scaleX(-1);
  }
  .mom .balloon p {
    margin-left: 1.5em;
  }
  .mom .charactor_image {
    grid-column: 1;
  }
  .voice_grid.boy {
    grid-row: 3;
    justify-self: left;
    margin-top: 0;
  }
  .boy .balloon {
    grid-row: 1;
  }
  .boy .charactor_image {
    margin-top: 40px;
    margin-left: 15px;
  }
}
/* 600px以下ではサイズはvw指定に */
@media screen and (max-width: 600px) {
  .conversation_title {
    font-size: var(--font-size-base);
    padding-top: 4vw;
  }
  .conversation_grid {
    margin-top: 2.667vw;
  }
  .voice_grid {
    grid-template-columns: 56vw 1fr;
  }
  .voice_grid.mom {
    grid-template-columns: 1fr 56vw;
    margin-top: 1.333vw;
  }
  .voice_grid.boy {
    margin-top: 4vw;
  }
  .balloon {
    width: 56vw;
    height: 34.667vw;
  }
  .balloon p {
    font-size: 3.75vw;
  }
  .balloon::before {
    background-size: 56vw 34.667vw;
  }
  .charactor_image {
    width: 24.4vw;
    height: 26.8vw;
  }
  .arrow_box {
    width: 10.667vw;
    height: 12vw;
  }
  .girl .charactor_image {
    margin-top: 5.067vw;
    margin-left: -1.333vw;
  }
  .mom .charactor_image {
    margin-top: 7.467vw;
    margin-left: 0;
    margin-right: -1.067vw;
  }
  .boy .charactor_image {
    margin-top: 2.667vw;
    margin-left: 4vw;
  }
}

/* 横ボタン */
#pasha main {
  overflow-x: visible;
  isolation: isolate;
}
.sticky_area {
  position: sticky;
  top: calc(50vh - 80px);
  height: 0; /* レイアウト上の高さを持たせない */
  pointer-events: none;
  z-index: 1;
}
.lets_try_side_button {
  width: 50px;
  height: 160px;
  margin-left: auto;
  pointer-events: auto;
  writing-mode: vertical-rl;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--pasha-navy);
  font-size: calc(var(--font-size-base) * 1.25);
  line-height: 2.1;
  font-weight: 700;
  background-color: white;
  box-sizing: border-box;
  border-radius: 15px 0 0 15px;
  border: solid 4px var(--pasha-navy);
  text-align: center;
}

/* パシャレクが解決エリア */
.how_pasha_works_area {
  width: 100%;
  background-color: var(--pasha-bg-color);
  position: relative;
}
.how_pasha_works_area::before {
  content: "";
  position: absolute;
  top: -20px;
  width: 100%;
  height: 40px;
  background-color: var(--pasha-navy);
  -webkit-mask: url("../images/triangle_downward.svg") center bottom / 80px 40px
    no-repeat;
  mask: url("../images/triangle_downward.svg") center bottom / 80px 40px
    no-repeat;
}
.how_pasha_works_inner {
  max-width: 960px;
  width: calc(100% - 2em);
  margin-inline: auto;
}
.how_pasha_works_title {
  font-size: calc(var(--font-size-base) * 1.6875);
  font-weight: 700;
  text-align: center;
  padding-top: 56px;
  margin-bottom: 18px;
}
.white_marker {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.7)
  );
  background-repeat: no-repeat;
  background-size: calc(100% - 0.5em) 15px;
  background-position: center bottom;
}
.how_pasha_works_grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  column-gap: 40px;
  grid-template-areas:
    "title photo"
    "text  photo"
    ".     photo";
  align-items: start;
}
.how_pasha_works_grid.reverse {
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "photo title"
    "photo text"
    "photo .    ";
}
.how_title {
  grid-area: title;
  font-size: calc(var(--font-size-base) * 1.5625);
  font-weight: 900;
  margin-top: 34px;
  padding-bottom: 9px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
}
.how_text {
  grid-area: text;
  align-self: start;
  margin-top: 17px;
}
.how_image {
  grid-area: photo;
  position: relative;
  width: 200px;
  height: 200px;
}
.how_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 780px以下ではhow_titleが２行になるやつが出る */
@media screen and (max-width: 780px) {
  .how_title {
    font-size: calc(var(--font-size-base) * 1.375);
  }
}
/* 720px以下ではhow_titleが２行になるやつが出る */
@media screen and (max-width: 720px) {
  .how_title {
    font-size: calc(var(--font-size-base) * 1.25);
  }
}
/* 600以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .lets_try_side_button {
    display: none;
  }
  .how_pasha_works_title {
    font-size: var(--font-size-base);
    padding-top: 6.4vw;
    margin-bottom: 7.066vw;
  }
  .white_marker {
    background-repeat: no-repeat;
    background-size: calc(100% - 0.5em) 2.667vw;
  }
  .how_pasha_works_grid,
  .how_pasha_works_grid.reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "text";
    row-gap: 2.933vw;
  }
  .how_pasha_works_grid + .how_pasha_works_grid {
    margin-top: 11.333vw;
  }
  .how_title {
    font-size: calc(var(--font-size-base) * 1.125);
    margin-top: 0;
    padding-bottom: 0;
    text-align: center;
    border-bottom: none;
  }
  .how_text {
    margin-top: 0;
  }
  .how_image {
    margin-top: 1.733vw;
    width: 48vw;
    height: 48vw;
    margin-inline: auto;
  }
  .how_image::before {
    content: "";
    position: absolute;
    inset: -2.4vw -6.4vw 0 -6.4vw;
    background-image: url("../images/how_pasha_works_deco.svg");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

/* 今すぐ無料でためすボタン */
.lets_try_area {
  width: 100%;
  background-color: var(--pasha-bg-color);
  padding-top: 39px;
  padding-bottom: 39px;
}
.lets_try_block {
  width: 300px;
  height: 50px;
  margin-inline: auto;
  border-radius: 12.5px;
  border: solid 3px var(--pasha-navy);
  background-color: white;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 3px 0 rgba(155, 155, 155, 0.5);
}
.lets_try_button {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: calc(var(--font-size-base) * 1.5);
  color: var(--pasha-navy);
}
/* 600以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .lets_try_area {
    padding-top: 6.933vw;
    padding-bottom: 6.933vw;
  }
  .lets_try_block {
    width: 69.333vw;
    height: 12.267vw;
    border-radius: 3.333vw;
  }
  .lets_try_button {
    font-size: calc(var(--font-size-base) * 1.25);
  }
}

/* ほかにもあるよエリア */
.extra_area {
  width: 100%;
  background-color: var(--pasha-bg-color);
}
.extra_inner {
  max-width: 670px;
  width: calc(100% - 2em);
  margin-inline: auto;
  padding-top: 20px;
  padding-bottom: 26px;
}
.cool_balloon.extra {
  --balloon-font-size: var(--font-size-base);
  text-align: center;
}
.cool_balloon.extra p {
  font-size: var(--balloon-font-size);
  padding-left: 2em;
  padding-right: 2em;
}
.extra_grid_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 38px;
  margin-top: 35px;
}
.extra_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "text"
    "photo";
  width: 260px;
}
.extra_title {
  grid-area: title;
  font-weight: 700;
  text-align: center;
  position: relative;
}
.extra_title::after {
  content: "";
  display: block;
  width: 130px;
  height: 1px;
  background-color: black;
  margin: 10px auto 14px auto;
}
.extra_text {
  grid-area: text;
  font-weight: 500;
}
.extra_image {
  grid-area: photo;
  position: relative;
  width: 260px;
  height: auto;
  margin-top: 6px;
}
.extra_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 600以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .extra_inner {
    padding-top: 5.333vw;
    padding-bottom: 21.6vw;
    width: calc(100% - 1em);
  }
  .extra_grid_wrapper {
    flex-direction: column;
    row-gap: 17.6vw;
    align-items: center;
  }
  .extra_grid {
    width: 100%;
    max-width: auto;
    grid-template-columns: 48vw 1fr;
    column-gap: 5.867vw;
    grid-template-areas:
      "photo title"
      "photo text"
      "photo .";
  }
  .extra_grid.reverse {
    grid-template-columns: 1fr 48vw;
    grid-template-areas:
      "title photo"
      "text photo"
      ". photo";
  }
  .extra_title::after {
    width: 100%;
    margin: 3.2vw auto 5.333vw auto;
  }
  .extra_image {
    width: 48vw;
    margin-top: 0;
  }
}

/* 追加のアピールエリア */
.addition_area {
  width: 100%;
  background-color: var(--pasha-bg-color);
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* hiddenより副作用が少ない */
  overflow-y: visible;
}
.addition_area::after {
  content: "";
  position: absolute;

  width: 750px;
  aspect-ratio: 1;
  border-radius: 50%;

  left: 50%;
  top: 0;
  transform: translateX(-50%);

  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, #fff 100%);
  z-index: -1;
}
.addition_inner {
  max-width: 900px;
  width: calc(100% - 2em);
  margin-inline: auto;
  padding-top: 90px;
  padding-bottom: 100px;
  position: relative;
}
.addition_headline {
  font-size: calc(var(--font-size-base) * 1.25);
  font-weight: 700;
  text-align: center;
}
.addition_image {
  margin-top: 43px;
  width: 500px;
  height: 424px;
  margin-inline: auto;
}
.addition_grid {
  position: absolute;
  width: 320px;
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 40px 110px;
  grid-template-areas:
    "title title"
    "icon text";
  align-items: stretch;
}
.addition_title {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--font-size-base) * 1.125);
  font-weight: 700;
  color: white;
  background-color: var(--pasha-navy);
  text-align: center;
}
.addition_icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  box-sizing: border-box;
  border: solid 1px var(--pasha-navy);
  border-right: none;
  background-color: white;
}
.addition_icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.addition_text {
  grid-area: text;
  display: flex;
  align-items: center;
  padding-right: 20px;
  justify-content: flex-start;
  box-sizing: border-box;
  border: solid 1px var(--pasha-navy);
  border-left: none;
  background-color: white;
}
.addition_grid.grid_one {
  left: 0px;
  top: 197px;
}
.addition_grid.grid_two {
  right: 14px;
  top: 252px;
}
.addition_grid.grid_three {
  left: 50px;
  bottom: 53px;
}
/* 800px以下ではグリッド部をスマホサイズに */
@media screen and (max-width: 800px) {
  .addition_grid {
    width: 212px;
    grid-template-columns: 74px 1fr;
    grid-template-rows: 30px auto;
  }
  .addition_title {
    font-size: var(--font-size-base);
  }
  .grid_two .addition_title {
    letter-spacing: -0.05em;
  }
  .addition_icon {
    padding-left: 12px;
    padding-right: 12px;
  }
  .addition_icon img {
    width: 50px;
    height: 50px;
  }
  .addition_text {
    font-size: calc(var(--font-size-base) * 0.875);
    padding-right: 10px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
/* 600px以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .addition_area::after {
    width: 213.333vw;
    border-radius: 50%;
  }
  .addition_inner {
    padding-top: 12.933vw;
    padding-bottom: 46.4vw;
    max-width: auto;
    width: 100%; /* 女子生徒を幅一杯で配置するので　*/
  }
  .addition_headline {
    font-size: calc(var(--font-size-base) * 1.125);
  }
  .addition_image {
    margin-top: 37.067vw;
    margin-left: calc(100% - 133.333vw);
    width: 133.333vw;
    height: calc(133.333vw * 424 / 500);
  }
  .addition_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .addition_grid {
    width: 56.533vw;
    grid-template-columns: 19.733vw 1fr;
    grid-template-rows: 8vw auto;
  }
  .addition_icon {
    padding-left: 3.2vw;
    padding-right: 3.2vw;
  }
  .addition_icon img {
    width: 13.333vw;
    height: 13.333vw;
  }
  .addition_text {
    padding-right: 2.667vw;
  }
  .addition_grid.grid_one {
    left: 10.4vw;
    top: 36vw;
  }
  .addition_grid.grid_two {
    right: 2.933vw;
    top: 91.2vw;
  }
  .addition_grid.grid_three {
    left: 20vw;
    bottom: 25.067vw;
  }
}

/* faqエリア */
.faq_area {
  width: 100%;
  background-color: #f2f2f2;
}
.faq_inner {
  max-width: 624px;
  width: calc(100% - 2em);
  margin-inline: auto;
  padding-top: 52px;
  padding-bottom: 32.5px;
}
.faq_title_box {
  width: 120px;
  height: 36px;
  margin-inline: auto;
  margin-bottom: 18.5px;
  border-radius: 18px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq_title {
  font-size: calc(var(--font-size-base) * 1.25);
  font-weight: 700;
}
.faq_block details + details {
  margin-top: 39px;
}
/* 三角形マークを消す */
.faq_block summary {
  list-style: none;
}
.faq_block summary::-webkit-details-marker {
  display: none;
}
/* pcではfaqは開きっぱなしに */
@media screen and (min-width: 601px) {
  .faq_block summary {
    pointer-events: auto;
    cursor: pointer;
  }
}
.faq_block summary {
  font-size: calc(var(--font-size-base) * 1.125);
  font-weight: 900;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5em;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
}
.faq_block summary::before {
  content: "Q.";
}
.faq_answer {
  margin-top: 5px;
  font-size: var(--font-size-base);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5em;
}
.faq_answer::before {
  content: "A.";
  font-size: calc(var(--font-size-base) * 1.25);
  font-weight: 900;
  position: relative;
  top: -2px;
}
/* 600px以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .faq_inner {
    width: calc(100% - 1em);
    padding-top: 4vw;
    padding-bottom: 4vw;
  }
  .faq_title_box {
    width: 32vw;
    height: 9.6vw;
    margin-bottom: 4.8vw;
    border-radius: 4.8vw;
  }
  .faq_title {
    font-size: calc(var(--font-size-base) * 1.25);
  }
  .faq_block details {
    position: relative;
  }
  .faq_block details::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    right: 0.25em;
    top: 0.25em;
    background-color: #666;
    -webkit-mask: url("../images/arrow_down.svg") center center / 100% 100%
      no-repeat;
    mask: url("../images/arrow_down.svg") center center / 100% 100% no-repeat;
  }
  .faq_block details[open]::after {
    transform: rotate(180deg);
  }
  .faq_block details + details {
    margin-top: 4.8vw;
  }
  .faq_block summary {
    font-size: var(--font-size-base);
    padding-bottom: 1.867vw;
  }
  .faq_block summary::before,
  .faq_answer::before {
    font-size: var(--font-size-base);
  }
  .faq_answer {
    margin-top: 1.067vw;
    font-size: var(--font-size-base);
  }
  .faq_answer::before {
    top: 0;
  }
}

/* ダウンロードエリア */
.download_area {
  width: 100%;
  padding-top: 34px;
  padding-bottom: 52px;
}
.download_block {
  width: 500px;
  height: 170px;
  margin-inline: auto;
  border-radius: 12.5px;
  border: solid 3px var(--pasha-navy);
}
.download_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(var(--font-size-base) * 1.5);
  font-weight: 700;
  color: var(--pasha-navy);
  text-align: center;
  margin-top: 21px;
  margin-bottom: 20px;
}
.download_stores {
  display: flex;
  justify-content: center;
  gap: 19px;
}
.dl_part {
  width: 180px;
  height: 52.8px;
  position: relative;
}
.dl_part.app_not_ready:after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/app_not_ready.svg");
  background-size: contain;
  pointer-events: auto;
}
.dl_part img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dl_part.app_not_ready img {
  opacity: 0;
}
/* 600px以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .download_area {
    padding-top: 10.667vw;
    padding-bottom: 7.467vw;
  }
  .download_block {
    width: 85.333vw;
    height: 48vw;
    border-radius: 3.333vw;
  }
  .download_title {
    font-size: calc(var(--font-size-base) * 1.25);
    margin-top: 2.4vw;
    margin-bottom: 1.6vw;
  }
  .download_stores {
    flex-direction: column;
    align-items: center;
    gap: 2.4vw;
  }
  .dl_part {
    width: 48vw;
    height: 14.08vw;
  }
}

/* お問い合わせエリア　*/
.contact_area {
  width: 100%;
  background-color: var(--pasha-navy);
  padding-top: 28px;
  padding-bottom: 28px;
}
.contact_block {
  width: 340px;
  height: 120px;
  margin-inline: auto;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 600px以下ではスマホレイアウト */
@media screen and (max-width: 600px) {
  .contact_area {
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
  .contact_block {
    width: 90.667vw;
    height: 32vw;
  }
}

/* ヘッダーとフッターのフォント */
#pasha header,
#pasha .footerNav,
#pasha footer {
  font-family: "Noto Sans JP", sans-serif;
}

/* アニメーション */ /* 共通 */
.anim {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.delay0 {
  transition-delay: 0s;
}
.delay1 {
  transition-delay: 0.15s;
}
.delay2 {
  transition-delay: 0.3s;
}
.delay3 {
  transition-delay: 0.45s;
}
.delay4 {
  transition-delay: 1s;
}

/* フェードイン */
.fade_up {
  opacity: 0;
  transform: translateY(10px);
}

.fade_up.js-appeared {
  opacity: 1;
  transform: translateY(0);
}

/* 下からスライド */
.slide_up {
  opacity: 0;
  transform: translateY(24px);
}

.slide_up.js-appeared {
  opacity: 1;
  transform: translateY(0);
}

/* ズームイン */
.zoom {
  opacity: 0;
  transform: scale(0.9);
}

.zoom.js-appeared {
  opacity: 1;
  transform: scale(1);
}

.slide_up.smartphone_block {
  opacity: 0;
  transform: translateY(24px) rotate(-7.283deg);
}
.slide_up.smartphone_block.js-appeared {
  opacity: 1;
  transform: translateY(0) rotate(-7.283deg);
}

/* タイトル部｜キャンペーン用 */
/* タイトル部｜白帯 */
.title_area.campaign::before {
  content: "";
  position: absolute;
  inset: 102px 0 118px 0;
  background-color: white;
}
/* タイトル部｜グリッド設定 */
.campaign .title_grid {
  display: grid;
  /* 左333px、中央は80pxまで・最小1em、右は残り全部 */
  grid-template-columns: max-content 80px max-content 14px 86px;
  /*
  column-gap: 14px; /* clampは期待した動作をしないので固定 */
  /* 3段｜空段を数字で指定＆吹き出し高さも指定。１段目は下揃え */
  gap: 0;
  grid-template-rows: 97px 5px 117px 33px auto 38px;
  /* 中央揃え */
  width: fit-content;
  margin-inline: auto;
  grid-template-areas:
    "images . balloon balloon balloon"
    "images . . . ."
    "images . title . badge"
    "images . . . ."
    "images . stores stores stores"
    "images . . . .";
}
/* タイトル部｜バッジ */
.pasha_campaign_block {
  grid-area: badge;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pasha_campaign_text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: calc(var(--font-size-base) / 16 * 10);
  line-height: 1.2;
  color: var(--pasha-navy);
  text-align: center;
  position: relative;
  width: 86px;
}
.pasha_campaign_text::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 15px;
  top: 13px;
  right: 0;
  background-color: var(--pasha-navy);
  -webkit-mask: url("../images/campaign_deco.svg") center center / 86px 15px
    no-repeat;
  mask: url("../images/campaign_deco.svg") center center / 86px 15px no-repeat;
}
.pasha_campaign_badge {
  position: relative;
  width: 86px;
  height: 76px;
}
.pasha_campaign_badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(3px 3px 3px rgba(140, 140, 140, 0.75));
}
/* 1080以下は両端と中央のアキが縮み出す */
@media screen and (max-width: 1080px) {
  .campaign .title_grid {
    grid-template-columns:
      max-content calc(80px - (1080px - 100vw) / 4)
      max-content 14px 86px;
  }
}

/* 900以下は吹き出しを改行し、グリッド組み替え */
@media screen and (max-width: 900px) {
  .campaign .title_grid {
    grid-template-columns:
      max-content calc(80px - (1080px - 100vw) / 4)
      max-content 14px 86px;
    grid-template-rows: 97px 5px 117px 33px auto auto 38px;
    grid-template-areas:
      "images . balloon . badge"
      "images . . . ."
      "images . title title title"
      "images . . . ."
      "images . stores stores stores"
      "images . . . .";
  }
  .campaign .cool_balloon.pashatto {
    margin-top: 45px;
    white-space: normal;
  }
  .campaign .under820 {
    display: revert;
  }
  .pasha_campaign_block {
    margin-top: 30px;
  }
  .campaign .marker {
    display: inline;
    background-image: linear-gradient(
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    );
    background-repeat: no-repeat;
    background-size: 100% 1em;
    background-position: left bottom 0.2em;
  }
}
/* 780以下ではアイコンとロゴのスペースを縮める */
@media screen and (max-width: 780px) {
  .pasha_title_block {
    gap: 0.5em;
  }
}
/* 760でcolumn-gapが０になるので式を変更 */
@media screen and (max-width: 760px) {
  .campaign .title_grid {
    grid-template-columns: max-content 0 max-content 0 86px;
  }
}
/* 740以下では問題集の幅を縮める */
@media screen and (max-width: 740px) {
  .mondaishu_box {
    width: 180px;
    height: calc(180px * 295 / 200);
    margin-top: calc(22px + 15px);
  }
}
/* 720以下では問題集をさらに小さくし、スマホの重なりを大きくする */
@media screen and (max-width: 720px) {
  .mondaishu_box {
    width: 160px;
    height: calc(160px * 295 / 200);
    margin-top: calc(22px + 30px);
  }
  .smartphone_block {
    margin-left: -5px;
  }
}
/* 690以下では問題集をさらに小さくし、スマホの重なりを大きくする */
@media screen and (max-width: 690px) {
  .mondaishu_box {
    width: 140px;
    height: calc(140px * 295 / 200);
    margin-top: calc(22px + 45px);
  }
  .smartphone_block {
    margin-left: -10px;
  }
}
/* 660以下では問題集をさらに小さくし、スマホも小さくする */
@media screen and (max-width: 660px) {
  .mondaishu_box {
    width: 120px;
    height: calc(120px * 295 / 200);
    margin-top: calc(22px + 60px);
  }
  .smartphone_block {
    width: 100px;
    height: calc(100px * 268 / 133);
    margin-top: calc(35px + 30px);
    margin-left: -15px;
  }
  .smartphone_screen {
    width: 90px;
    height: calc(90px * 257 / 119);
    top: 4px;
    left: 4px;
  }
  .smartphone_housing {
    width: 100px;
    height: calc(100px * 268 / 133);
  }
}
/* 600以下ではグリッドから変更 */
@media screen and (max-width: 600px) {
  .campaign.title_area {
    width: 100vw;
    height: calc(608 * 100vw / 375);
    background-image: image-set(
      url("../images/pasha_title_bg_sp2.avif") type("image/avif") 1x,
      url("../images/pasha_title_bg_sp2@2x.avif") type("image/avif") 2x,
      url("../images/pasha_title_bg_sp2@3x.avif") type("image/avif") 3x,
      url("../images/pasha_title_bg_sp2@4x.avif") type("image/avif") 4x,
      url("../images/pasha_title_bg_sp2.webp") type("image/webp") 1x,
      url("../images/pasha_title_bg_sp2@2x.webp") type("image/webp") 2x,
      url("../images/pasha_title_bg_sp2@3x.webp") type("image/webp") 3x,
      url("../images/pasha_title_bg_sp2@4x.webp") type("image/webp") 4x,
      url("../images/pasha_title_bg_sp2.png") type("image/png") 1x,
      url("../images/pasha_title_bg_sp2@2x.png") type("image/png") 2x,
      url("../images/pasha_title_bg_sp2@3x.png") type("image/png") 3x,
      url("../images/pasha_title_bg_sp2@4x.png") type("image/png") 4x
    );
    background-size: 100vw auto;
    background-position: center bottom;
    --balloon-font-size: var(--font-size-base);
  }
  .campaign.title_area::before {
    inset: 0 0 calc(520 * 100vw / 375) 0;
  }

  .title_grid {
    grid-template-columns: 1fr;
    grid-template-rows: calc(77 * 100vw / 375) auto auto auto;
    /* リセット */
    column-gap: 0;
    grid-template-areas:
      "title"
      "balloon"
      "images"
      "stores";
    width: auto;
    margin-inline: 0;
  }
  .campaign .title_grid {
    grid-template-columns: 1fr;
    grid-template-rows:
      calc(88 * 100vw / 375) auto auto calc(101 * 100vw / 375 + 2vw)
      calc(58 * 100vw / 375) auto;
    /* 中央揃え */
    width: fit-content;
    margin-inline: auto;
    grid-template-areas:
      "title"
      "balloon"
      "images"
      "badge"
      "stores"
      ".";
  }
  /* タイトル部｜バッジ */
  .pasha_campaign_block {
    margin-top: 2vw;
    grid-area: badge;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .pasha_campaign_text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: calc(var(--font-size-base) / 16 * 10);
    line-height: 1.2;
    color: var(--pasha-navy);
    text-align: center;
    position: relative;
    width: calc(86 * 100vw / 375);
  }
  .pasha_campaign_text::after {
    content: "";
    position: absolute;
    width: calc(86 * 100vw / 375);
    height: calc(15 * 100vw / 375);
    top: calc(13 * 100vw / 375);
    right: 0;
    background-color: var(--pasha-navy);
    -webkit-mask: url("../images/campaign_deco.svg") center center /
      calc(86 * 100vw / 375) calc(15 * 100vw / 375) no-repeat;
    mask: url("../images/campaign_deco.svg") center center /
      calc(86 * 100vw / 375) calc(15 * 100vw / 375) no-repeat;
  }
  .pasha_campaign_badge {
    position: relative;
    width: calc(86 * 100vw / 375);
    height: calc(76 * 100vw / 375);
  }
  .pasha_campaign_badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(3px 3px 3px rgba(140, 140, 140, 0.75));
  }
  .campaign .marker {
    display: inline;
    background-image: linear-gradient(
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0)
    );
    background-repeat: no-repeat;
    background-position: left bottom;
  }
  .campaign .cool_balloon.pashatto {
    margin-top: calc(15 * 100vw / 375);
  }

  .pasha_title_block {
    gap: 5.333vw;
    align-items: center;
    justify-content: center;
  }
  .pasha_icon_box {
    margin-left: 0;
    width: 18.667vw;
    height: 18.667vw;
  }
  .pasha_logo_box {
    width: 61.333vw;
    height: 10.96vw;
  }
  .mondaishu_and_smartphone {
    justify-self: center;
  }
  .mondaishu_box {
    position: relative;
    margin-top: 3.733vw;
    width: 40vw;
    height: 59vw;
    box-sizing: border-box;
    border: solid 1px #999;
  }
  /* タイトル部｜スマホ */
  .smartphone_block {
    position: relative;
    margin-top: 15.818vw;
    margin-left: -3.6vw;
    width: 23.733vw;
    height: 47.823vw;
    transform: rotate(-7.283deg);
  }
  .smartphone_block::before {
    content: "";
    position: absolute;
    width: 5.6vw;
    height: 5.867vw;
    right: -2.8vw;
    top: -3.7vw;
    background-image: url("../images/smartphone_deco_sp.svg");
    background-size: contain;
  }
  .smartphone_screen {
    position: absolute;
    top: 0.981vw;
    left: 1.249vw;
    width: 21.235vw;
    height: 45.861vw;
  }
  .smartphone_housing {
    position: absolute;
    top: 0;
    left: 0;
    width: 23.733vw;
    height: 47.823vw;
  }
  .pasha_title_block {
    align-self: center;
    justify-self: center;
  }
  .campaign .stores_block {
    margin-top: 2vw;
  }
  .store_button {
    width: 40vw;
    height: 11.733vw;
  }
}
/* タイトル部｜開発 */
.developers_box {
  position: absolute;
  right: 0.25em;
  bottom: 0.25em;
  width: 375px;
  height: 21px;
}
.developers_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 600px) {
  .developers_box {
    position: relative;
    margin-inline: auto;
    margin-top: 3.2vw;
    width: 85.714vw;
    height: 4.8vw;
  }
}