@charset "UTF-8";

/*reset.css inline*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

:where([hidden]:not([hidden='until-found'])) {
  display: none !important
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light
}

@supports not (min-block-size:100dvb) {
  :where(html) {
    block-size: 100%
  }
}

@media (prefers-reduced-motion:no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth
  }
}

:where(body) {
  block-size: 100%;
  block-size: 100dvb;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit
}

:where(textarea) {
  resize: vertical;
  resize: block
}

:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer
}

:where(:disabled) {
  cursor: not-allowed
}

:where(label:has(>input:disabled), label:has(+input:disabled)) {
  cursor: not-allowed
}

:where(button) {
  border-style: solid
}

:where(a) {
  text-underline-offset: .2ex
}

:where(ul, ol) {
  list-style: none
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem)
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible
}

:where(:focus-visible) {
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px
}

:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important
}

/*
 * init
 * -------------------------------------------------------------------
 */


@media screen and (min-width: 768px) {
  .SP {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .PC {
    display: none;
  }
}

:root {
  --main-black-color: #3d3939;
  --main-yellow-color: #ffff6c;
  --main-pink-color: #ffa8ff;
  --main-pink2-color: #f238b1;
  --main-pink3-color: #fa86d4;
  --main-blue-color: #003893;
  --main-text-color: #5458af;
  --main-lightblue-color: #9ebdff;
  --main-red-color: #ef0606;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3",
    Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.7em;
  line-height: 2;
  font-weight: 500;
  color: var(--main-black-color);
  letter-spacing: -0.1em;
}

a:hover {
  opacity: 0.7;
  transition: all 0.5s;
}

button {
  border: none;
}

/*Animation*/
@keyframes rotation {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.5);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotation2 {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(-180deg) scale(1.7);
  }

  100% {
    transform: rotate(-360deg) scale(1);
  }
}

@keyframes yurayura {

  0%,
  100% {
    transform: rotate(5deg);

  }

  50% {
    transform: rotate(-5deg);
  }

}

@keyframes fluffy {
  0% {
    transform: translateY(0);
  }

  5% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-25px);
  }

  25% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-35px);
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.90);
    opacity: 0;

  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1.3);
    opacity: 0;

  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*
 * scroll-in reveal
 * -------------------------------------------------------------------
 */
[data-reveal] {
  opacity: 0;
}

[data-reveal].is-inview {
  opacity: 1;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

[data-reveal="zoom-in"].is-inview {
  animation-name: zoomIn;
}

[data-reveal="zoom-out"].is-inview {
  animation-name: zoomOut;
}

[data-reveal="slide-up"].is-inview {
  animation-name: slideUp;
}

[data-reveal="slide-down"].is-inview {
  animation-name: slideDown;
}

@keyframes slideUp {
  0% {
    transform: translateY(28px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-28px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    animation: none !important;
  }

  .key_title,
  .key_item01,
  .key_item02,
  .key_item03,
  .key_btn_link,
  .key_hearts {
    opacity: 1 !important;
    animation: none !important;
  }

  /* 追従ボタンは動かさず、そのまま表示する。
     :not(.is-tapped) で除いているのは、タップ時のアニメーションまで止めると
     animationend が来ずに遷移しなくなるため */
  .key_btn_link.is-fixed:not(.is-tapped) .key_btn {
    animation: none !important;
  }

  .result_key_img,
  .result_key_item01,
  .result_key_item02,
  .result_key_item03,
  .result_key_item04,
  .result_key_item05,
  .result_stars,
  .result_lead,
  .result_rankin_icon_best,
  .result_rankin_icon_worst,
  .result_ranking_drop {
    opacity: 1 !important;
    animation: none !important;
  }

  .question_clip,
  .question_fusen,
  .question_hearts img[alt="♥"],
  .sidemenu,
  .menu_overlay {
    opacity: 1 !important;
    animation: none !important;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
    line-height: 1.7;
  }

  a:hover {
    opacity: unset;
  }
}



/*
 * HOME
 * -------------------------------------------------------------------
 */

body {
  background: url('../img/home_bg02.png') repeat;
  background-color: #c9e5f0;
  text-align: center;
  position: relative;
}

.pcbox {
  background: url('../img/bg.jpg') repeat;
  background-attachment: fixed;
  background-position: center top;
}

/* トップページだけWebPにしている（tools/make-webp.sh が作る）。
   他のページもWebPにするときは、上の .pcbox を書き換えてこれを消す */
#index .pcbox {
  background-image: url('../img/bg.webp');
}

main {
  border-right: solid 2px #5458af;
  border-left: solid 2px #5458af;
  max-width: 400px;
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
}

.keyvisual {
  /* LCP要素。index.html の <link rel="preload"> と同じURLにしておくこと */
  background: url('../img/home_bg01.webp') repeat;
  background-size: cover;
  position: relative;

  min-height: 883px;
}

@keyframes keyEntrancePop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.15) rotate(8deg);
  }

  75% {
    transform: scale(0.92) rotate(-4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.key_title {
  min-width: 170%;
  margin-left: -50px;
  transform-origin: center center;
  opacity: 0;
  animation: keyEntrancePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    keyTitleSway 4s ease-in-out 0.7s infinite;
}

@keyframes keyTitleSway {

  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

.key_item01 {
  position: absolute;
  right: -157px;
  top: 500px;
  transform-origin: center center;
  opacity: 0;
  animation: keyEntrancePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
    keyItemSway01 5.2s ease-in-out 0.85s infinite;
}

.key_item02 {
  position: absolute;
  right: -50px;
  top: 600px;
  transform-origin: center center;
  opacity: 0;
  animation: keyEntrancePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
    keyItemSway02 3.8s ease-in-out 1s infinite;
}

.key_item03 {
  position: absolute;
  left: -30px;
  top: 624px;
  transform-origin: center center;
  opacity: 0;
  animation: keyEntrancePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both,
    keyItemSway03 4.6s ease-in-out 1.15s infinite;
}

@keyframes keyItemSway01 {

  0%,
  100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@keyframes keyItemSway02 {

  0%,
  100% {
    transform: rotate(4.5deg);
  }

  50% {
    transform: rotate(-3.5deg);
  }
}

@keyframes keyItemSway03 {

  0%,
  100% {
    transform: rotate(-3.5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

.key_btn_link {
  position: absolute;
  top: 430px;
  left: 0;
  right: 0;
  width: 75%;
  margin: 0 auto;
  z-index: 10;
  display: block;
  opacity: 0;
  animation: keyEntrancePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
  --ring-color: var(--main-pink-color);
}

.key_btn {
  display: block;
  width: 100%;
}

/* スクロールでキービジュアルの外に出たあと、画面下に残る状態（JSが is-fixed を付ける）。
   もともと position:absolute なので、fixed にしてもキービジュアルのレイアウトは動かない */
.key_btn_link.is-fixed {
  position: fixed;
  top: auto;
  bottom: 15px;
  max-width: 300px;
  z-index: 50;
}

/* 追従で現れるときは画面の下から浮き出させる。
   アニメーションを持たせるのは子の .key_btn（画像）側。
   親の .key_btn_link に付けると animation プロパティを上書きすることになり、
   is-fixed を外した瞬間にキービジュアルの登場アニメーション(keyEntrancePop)が
   再生され直して、ボタンが一度消えてからポップインしてしまう */
.key_btn_link.is-fixed .key_btn {
  animation: keyBtnFloatUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes keyBtnFloatUp {
  from {
    opacity: 0;
    transform: translateY(130%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* タップのアニメーションは追従中も優先させる。
   クリック処理(script.js)が animationend を待って遷移するので、
   上の浮き出るアニメーションに負けると押しても進まなくなる */
.key_btn_link.is-tapped .key_btn,
.key_btn_link.is-fixed.is-tapped .key_btn {
  animation: keyBtnTap 0.35s ease;
}

@keyframes keyBtnTap {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.85);
  }

  70% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.key_btn_link.is-tapped::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 3px solid var(--ring-color);
  pointer-events: none;
  animation: keyBtnRing 0.35s ease-out;
}

@keyframes keyBtnRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.key_hearts {
  position: absolute;
  top: 540px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 10;
  margin-top: 20px;
  opacity: 0;
  animation: keyEntrancePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both;
}

.key_heart {
  width: 37%;
}


.section02 {
  position: relative;
  background: url('../img/home_bg02.png') repeat;
  z-index: 10;
  overflow-x: hidden;
  margin-top: -50px;
}

.sec02_title {
  width: 90%;
  margin: 0 auto 15px;
}

.m-plus-rounded-1c-regular {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-style: normal;
}

.sec02_body {
  font-size: 21px;
  line-height: 1.6;
  font-family: "Yomogi", sans-serif;
  letter-spacing: 0;
  font-weight: bold;
  font-style: normal;
  color: var(--main-text-color);
  background: url('../img/home_sec02_bg.png') no-repeat;
  background-size: cover;
}
/* 背景画像の実寸(517×657)に高さを合わせ、coverで下端（ペン先・携帯）が切れないようにする */
.sec02_title + .sec02_body {
  aspect-ratio: 517 / 657;
  align-content: center;
  background-position: center;
}
.sec02_title03 + .sec02_body{
  background: none;
}
/* トップページだけWebP（16types.html の .sec02_body は png のまま）。
   #index .sec02_body と広く書くと、上の background:none より強くなって
   背景が無いはずの2つめにも出てしまうので、対象を1つめに絞っている */
#index .sec02_title + .sec02_body {
  background-image: url('../img/home_sec02_bg.webp');
}
.sec02_body span {
  background: var(--main-yellow-color);

}

.sec02_body b {
  text-decoration: var(--main-pink-color) wavy underline;
}

.sec02_title02 {
  width: 80%;
  margin: 15px auto;
}

.sec02_icon {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
}

.sec02_loop {
  padding-right: 10px;
  width: max-content;
  display: flex;
  gap: 10px;
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}

.sec02_loop img {
  width: 120px;
}

.sec02_title03 {
  width: 90%;
  margin: 15px auto;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.sec02_wakarukoto {
  width: 82%;
  margin: 15px auto;
}

.sec02_sarani {
  width: 80%;
  margin: 15px auto;
}

.sec02_btn01 {
  width: 65%;
  margin: 15px auto;
}

/* ホームのSNSシェアカード。
   カードの見た目は結果ページと共通の .result_sns_tab / .result_sns / .result_snsicon
   （2×2に並ぶ）をそのまま使い、ここでは配置と説明文だけを足している */
.sec02_share {
  padding: 10px 20px 0;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  color: var(--main-text-color);
  letter-spacing: 0;
}

.sec02_share_title {
  font-size: 21px;
  line-height: 1.6;
  margin: 5px 0;
}

.sec02_share_title span {
  text-decoration: var(--main-pink-color) wavy underline;
}

.sec02_share_note {
  font-size: 15px;
  line-height: 1.6;
}

footer {

  border-right: solid 2px var(--main-text-color);
  border-left: solid 2px var(--main-text-color);
  max-width: 400px;
  padding: 30px 0 0;
  margin: 0 auto;
  letter-spacing: 0;
  color: var(--main-blue-color);
  font-size: 11px;
  background: url('../img/home_bg02.png') repeat;

}

.footer--2nd {
  border-top: solid 3px var(--main-text-color);
  padding: 5px;
}

.footer--3rd {
  position: relative;
  background-image: none;
  background: #cffbff;
  z-index: 0;
}

#result_pink .footer--3rd {
  background: #ffe8f3;
}

#result_green .footer--3rd {
  background: #e9f8d1;
}

#result_purple .footer--3rd {
  background: #e6e6ff;
}

#result_blue .footer--3rd {
  background: #cffbff;
}

.footer_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 14px 1em;
  background: #fff;
  border-bottom: dashed 1px rgba(84, 88, 175, 0.4);
  font-family: "Yomogi", sans-serif;
  font-size: 13px;
}

.footer_links a {
  color: var(--main-text-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer_links a::after {
  content: '\203a';
  margin-left: 4px;
  text-decoration: none;
  display: inline-block;
}

.copyright {
  padding: 1em;
  background: #fff;
}

/* 追従する「さっそく診断」ボタンがコピーライトを隠さないよう、ホームだけ下に余白を足す */
#index footer {
  padding-bottom: 120px;
}

.sidemenu {
  /* 中身の余白（タイトルの上下・区切り線の上下）は % にしてある。
     紙の幅に比例して縮むので、PCの固定表示でもスマホの全面表示でも
     文字と余白のバランスが変わらない。

     ただし padding だけは % にしないこと。この要素は position:fixed なので
     padding の % は「自分の幅」ではなく画面幅を基準に計算される
     （1440pxの10% = 144px になって中身が潰れる）。
     子要素の margin の % は .sidemenu の内容幅が基準なので問題ない */
  padding: 30px;
  position: fixed;
  left: max(calc(50% - 200px - 360px), 0px);
  top: 10vw;
  width: calc((100% - 400px)/2 - 20px);
  max-width: 300px;
  /* 紙は中身の高さに合わせて伸ばす。aspect-ratio で高さを固定すると
     項目を増やしたときに文字が紙からはみ出す（メニューは今後も増減する）。
     background-size: 100% 100% にしているので、伸ばした分だけ紙も伸びる */
  height: auto;
  background: url('../img/sidemenu_bg.svg') no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  animation: zoomIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* サイドメニューの幅は calc((100% - 400px)/2 - 20px) で決まる。
   画面が1000pxを下回ると220px未満になり、紙の枠から文字がはみ出すので常時表示はしない
   （スマホ横向きやiPad縦がこの範囲に入る）。
   代わりに右上のハンバーガーから全面表示で開く（下の「.menu_btn」を参照） */
@media screen and (max-width: 999px) {
  .sidemenu {
    display: none;
  }
}

.sidemenu_title {
  width: 66%;
  margin: 9% auto 10.5%;
}

.sidemenu_hr {
  height: 2px;
  background-color: var(--main-text-color);
  width: 80%;
  border: none;
  margin: 6% auto;
}

.sidemenu_txt00 {
  width: 90%;
  margin: 0 auto;
}

.sidemenu_txt01 {
  width: 90%;
  margin: 0 auto;
}

.sidemenu_txt02 {
  width: 80%;
  margin: 0 auto;
}

.sidemenu_txt03 {
  width: 100%;
  margin: 0 auto;
}

/*===============================*/
/* サイドメニューが出せない幅のときのハンバーガー */
/*===============================*/

/* 常時表示のサイドメニューを出せる幅（1000px以上）では不要なので出さない。
   .sidemenu の display:none と同じ境界にすること。ずらすと
   「メニューが2つ出る」「どちらも出ない」のどちらかになる */
.menu_btn,
.menu_overlay {
  display: none;
}

@media screen and (max-width: 999px) {
  .menu_btn {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    /* 開いた紙(1050)より上。押して閉じられるように常に最前面に置く */
    z-index: 1100;
    width: 52px;
    padding: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
  }

  .menu_btn img {
    width: 100%;
  }

  /* 紙の外側を覆う層。「押したら閉じる」役と、後ろのページをぼかす役を兼ねる。
     backdrop-filter は「自分より奥に描かれたもの」に効くので、
     紙(1050)とハンバーガー(1100)はこの層より手前＝ぼけない。

     色は塗らないこと。背景を塗るとページの絵柄が消えてしまう
     （白っぽくしたい場合だけ background に薄い rgba を足す）。
     -webkit- 付きはSafari(iOS)用。対応していないブラウザでは
     透明のまま＝ぼけないだけで、開閉の動作は変わらない */
  body.is-menu-open .menu_overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* 紙を画面中央に置く。
     幅は3つの上限の小さい方を使う:
       86vw  … 縦画面。左右に下地を覗かせる
       420px … タブレットで大きくなりすぎないように
       50vh  … 横画面。紙の高さは幅の約1.7倍なので、これで高さが収まる
     transform で中央に寄せているため、PC用の zoomIn（scaleのみ）は
     そのままでは使えない。translate を含む menuZoomIn を別に用意している */
  body.is-menu-open .sidemenu {
    /* 紙の幅。padding も同じ値から計算して、PC表示と同じ 1:0.1 の比率にする
       （padding に % が使えない理由は .sidemenu 本体のコメントを参照） */
    --menu-width: min(86vw, 420px, 50vh);

    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    /* アニメーション側にも同じ transform を書いてあるが、こちらにも必要。
       prefers-reduced-motion で animation:none になると、キーフレーム内の
       translate も効かなくなって右下にずれるため */
    transform: translate(-50%, -50%);
    width: var(--menu-width);
    padding: calc(var(--menu-width) * 0.1);
    max-width: none;
    max-height: 94vh;
    overflow-y: auto;
    z-index: 1050;
    opacity: 1;
    animation: menuZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 開いている間は後ろのページを動かさない */
  body.is-menu-open {
    overflow: hidden;
  }
}

@keyframes menuZoomIn {
  0% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  /* スマホでは画面いっぱいに広げるが、広げる幅には上限を設ける。
     上限が無いと横向き（幅が広く高さが低い）のときに崩れる。
     .keyvisual の aspect-ratio と、下のキービジュアル小物の位置指定が
     どちらも画面幅に比例するため、幅667pxのiPhone SE横向きでは
     キービジュアルだけで1591px（縦向きは890px）まで膨らんでしまう。

     --sp-width は main の実際の幅と同じ。小物の位置は vw ではなく
     この値を基準にするので、画面がいくら広くても縦向きと同じ配置になる。
     430pxはiPhone 16 Pro Maxの幅で、縦向きのスマホはこれに収まる */
  :root {
    --sp-width: min(100vw, 430px);
  }

  .keyvisual {
    aspect-ratio: 1/2.4;
    height: auto;
  }

  main,
  footer {
    max-width: var(--sp-width);
    width: 100%;
  }

  .key_btn_link {
    top: calc(1.1 * var(--sp-width));
  }

  .key_hearts {
    top: calc(1.36 * var(--sp-width));
    width: 90%;
    margin: 20px auto 0;
  }

  .key_item01 {
    top: calc(1.3 * var(--sp-width));
  }

  .key_item02 {
    top: calc(1.6 * var(--sp-width));
  }

  .key_item03 {
    top: calc(1.6 * var(--sp-width));
  }
}



/* 診断ページ*/

.shindan01 {
  color: var(--main-text-color);
  background: url(../img/home_bg02.png) repeat;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
}

.shindan_input {
  padding-top: 20px;
  margin-bottom: 60px;
}

.shindan_input dt {
  margin-top: 0.6em;
  font-size: 24px;
  line-height: 1.4;
  padding-bottom: 5px;
}

.shindan_input input,
.shindan_input select {
  font-size: 20px;
  padding: 0.2em 0.5em;
  border: 2px solid var(--main-text-color);
  border-radius: 25px;
  background: #fff;
}

.shindan_input input.is-error,
.shindan_input select.is-error {
  border-color: var(--main-red-color);
  outline: solid 2px var(--main-red-color);
  outline-offset: 2px;
  animation: questionShake 0.4s ease;
}

.shindan_radio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-radius: 25px;
}

.shindan_radio_item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  padding: 0.2em 0.8em;
  border: 2px solid var(--main-text-color);
  border-radius: 25px;
  background: #fff;
}

.shindan_input input[type="radio"] {
  appearance: auto;
  accent-color: var(--main-pink2-color);
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
}

.shindan_radio.is-error {
  outline: solid 2px var(--main-red-color);
  outline-offset: 4px;
  animation: questionShake 0.4s ease;
}

.question_txt {
  position: absolute;
  top: 98px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 25px;
  letter-spacing: -0.05em;
  line-height: 1.3;
}

.question_label {
  position: absolute;
  bottom: 105px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 82%;
  font-size: 24px;
  line-height: 1.1;
}

.question_label p:first-child {
  color: var(--main-lightblue-color);
}

.question_label p:last-child {
  color: var(--main-pink-color);
}

.hidden {
  display: none;
}

.question_btns {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.question_btn {
  position: relative;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: #fff;
  border: solid 4px var(--main-lightblue-color);
  color: #FFF;
  text-decoration: none;
  text-align: center;
  margin: 10px 0;
  transition: transform 0.15s ease;
}

.question_btn:hover {
  transform: scale(1.1);
}

.question_btn01 {
  width: 56px;
  height: 56px;
  border-color: var(--main-lightblue-color);
  --ring-color: var(--main-lightblue-color);
}

.question_btn02 {
  width: 50px;
  height: 50px;
  border-color: #c0d2f3;
  --ring-color: #c0d2f3;
  border-color: var(--main-lightblue-color);
  --ring-color: var(--main-lightblue-color);
}

.question_btn03 {
  width: 42px;
  height: 42px;
  border-color: #d9d9d9;
  --ring-color: #d9d9d9;
}

.question_btn04 {
  width: 50px;
  height: 50px;
  border-color: #f7b8f1;
  --ring-color: #f7b8f1;
  border-color: var(--main-pink-color);
  --ring-color: var(--main-pink-color);
}

.question_btn05 {
  width: 56px;
  height: 56px;
  border-color: var(--main-pink-color);
  --ring-color: var(--main-pink-color);
}

.hidden:checked+.question_btn01 {
  background-color: var(--main-lightblue-color);

}

.hidden:checked+.question_btn02 {
  background-color: #c0d2f3;
  background-color: var(--main-lightblue-color);
}

.hidden:checked+.question_btn03 {
  background-color: #d9d9d9;

}

.hidden:checked+.question_btn04 {
  background-color: #f7b8f1;
  background-color: var(--main-pink-color);
}

.hidden:checked+.question_btn05 {
  background-color: var(--main-pink-color);

}

.question_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 45%;
  height: 45%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.hidden:checked+.question_btn::before {
  opacity: 1;
  transform: scale(1);
}


.question {
  margin: 10px 10px 50px 10px;
  position: relative;
  background: url('../img/shindan_qbg.svg') no-repeat;
  background-size: cover;
  aspect-ratio: 1.1/1;

}



.question_num {
  position: absolute;
  top: 3px;
  left: 30px;
  font-size: 57px;
  color: var(--main-lightblue-color);
}

.question:nth-child(even) .question_num {
  color: var(--main-pink-color);
}

.question_num::first-letter {
  font-size: 85%;
}


.question_clip {
  width: 22px;
  position: absolute;
  top: 3px;
  right: 15px;
  animation: yurayura 3s ease-in-out infinite;
}

.question:nth-child(3n+1) .question_clip {
  animation-delay: 0s;
}

.question:nth-child(3n+2) .question_clip {
  animation-delay: 0.3s;
}

.question:nth-child(3n) .question_clip {
  animation-delay: 0.6s;
}

.question_clip_st1 {
  fill: #ffca84;
}

.question:nth-child(2) .question_clip_st1 {
  fill: #ffca84;
}

.question:nth-child(3) .question_clip_st1 {
  fill: #f15e68;
}

.question:nth-child(4) .question_clip_st1 {
  fill: #a0da83;
}

.question:nth-child(5) .question_clip_st1 {
  fill: #a3e7f0;
}

.question--list {
  background: none;
  border: solid 3px var(--main-text-color);
  border-radius: 2px;
  aspect-ratio: unset;
  background: #fff;
}

.question_list {
  position: relative;
  margin-top: 220px;
  display: flex;
  flex-wrap: wrap;
}

.question_list dt {
  min-width: 16%;
}

.question_list dd {
  min-width: 80%;
  text-align: left;
  font-size: 23px;
  line-height: 1.3;
  padding-bottom: 0.7em;
}

/* 1行が長い選択肢（14文字前後）のある設問用。23pxのままだと390px未満の画面で入りきらず、
   選択肢がラジオの下の行へ落ちるので、狭い画面でだけ文字を縮めて改行位置を保つ */
.question_list--long dd {
  font-size: min(23px, 5.6vw);
}

.hidden2 {
  appearance: none;
  border: 4px solid #d9d9d9;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin: 0;
  position: relative;
  --ring-color: var(--main-text-color);
  transition: transform 0.15s ease;

}

.hidden2:hover {
  transform: scale(1.15);
}

.hidden2::before {
  content: "";
  display: block;
  background-color: var(--main-text-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  height: 32px;
  opacity: 0;
}

.hidden2:checked::before {
  opacity: 1;
}

@keyframes questionBtnSelected {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.question_btn.is-selected,
.hidden2.is-selected {
  animation: questionBtnSelected 0.35s ease;
}

.question_btn.is-selected::after,
.hidden2.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--ring-color);
  pointer-events: none;
  animation: questionBtnRing 0.35s ease-out;
}

@keyframes questionBtnRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.question_fusen {
  position: absolute;
  top: -36px;
  right: -5px;
  width: 96%;
}

.question_pagenation {
  border-top: solid 3px var(--main-text-color);
  border-bottom: solid 3px var(--main-text-color);
  color: var(--main-red-color);
  font-size: 28px;
  background: #fffafc;
}

.question_hearts {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 10px auto;
}

.question_hearts img {
  width: 25px;
}

.question_hearts img[alt="♥"] {
  animation: fluffy 1.8s ease-in-out infinite;
}

.question_navi {
  padding: 20px 10px 5px;
}

.question_navibtn {
  display: block;
  width: 70%;
  margin: 0 auto;
  padding-bottom: 15px;
}

.question_navibtn.is-tapped {
  animation: keyBtnTap 0.35s ease;
}

.question_navibtn img {
  width: 100%;
}

.small {
  font-size: 80%;
}

/*未回答エラー*/
.question.is-error {
  outline: solid 4px var(--main-red-color);
  outline-offset: 2px;
  border-radius: 12px;
  animation: questionShake 0.4s ease;
}

@keyframes questionShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-6px);
  }

  80% {
    transform: translateX(6px);
  }
}

.question_error_toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  z-index: 100;
  background: var(--main-red-color);
  color: #fff;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 18px;
  padding: 0.8em 1.4em;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.question_error_toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {

  .question.is-error,
  .shindan_input input.is-error,
  .shindan_input select.is-error {
    animation: none !important;
  }
}

@media screen and (max-width: 767px) {
  .question_txt {
    font-size: 25px;
    top: 85px;
  }

  #nameInput {
    width: 80%;
  }
}


/*
 * 診断結果ページ
 * -------------------------------------------------------------------
 */
.result_key {
  position: relative;
  overflow: hidden;
}

.result_key_img {
  opacity: 0;
}

.result_key_img.is-shuffling {
  opacity: 1;
}

.result_key_img.is-revealed {
  animation: zoomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.result_key_item01 {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 85px;
}

.result_key_item02 {
  position: absolute;
  top: 50px;
  right: 48px;
  width: 60px;
}

.result_key_item03 {
  position: absolute;
  top: 200px;
  left: 30px;
  width: 70px;
}

.result_key_item04 {
  position: absolute;
  top: 170px;
  right: 15px;
  width: 115px;
}

.result_key_item05 {
  position: absolute;
  top: 470px;
  left: 15px;
  width: 115px;
}

.result_key_item01,
.result_key_item02,
.result_key_item03,
.result_key_item04,
.result_key_item05 {
  opacity: 0;
  animation: keyEntrancePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    yurayura 3.2s ease-in-out infinite;
}

.result_key_item01 {
  animation-delay: 0.1s, 0.7s;
}

.result_key_item02 {
  animation-delay: 0.2s, 0.9s;
}

.result_key_item03 {
  animation-delay: 0.3s, 1.1s;
}

.result_key_item04 {
  animation-delay: 0.4s, 1.3s;
}

.result_key_item05 {
  animation-delay: 0.5s, 1.5s;
}

.result01 {
  color: var(--main-text-color);
  background: url(../img/result_bg_blue.jpg) repeat;
  background-size: contain;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  margin-top: -1px;
  padding: 10px 20px 60px;
  position: relative;
}

#result_pink .result01 {
  background: url(../img/result_bg_pink.jpg) repeat;
  background-size: contain;
}

#result_green .result01 {
  background: url(../img/result_bg_green.jpg) repeat;
  background-size: contain;
}

#result_purple .result01 {
  background: url(../img/result_bg_purple.jpg) repeat;
  background-size: contain;
}

#result_blue .result01 {
  background: url(../img/result_bg_blue.jpg) repeat;
  background-size: contain;
}

.result_stars {
  position: absolute;
  top: -80px;
  right: 10px;
  width: 25%;
  animation: rotation2 5s ease-in-out infinite;
}

.result_lead {
  font-size: 26px;
  line-height: 1.6;
  padding-bottom: 40px;
  opacity: 0;
  animation: zoomOut 0.6s ease-out 0.2s both;
}

.result_lead span {
  text-decoration: var(--main-pink-color) wavy underline;
}

.result_sns {
  border: solid 3px var(--main-text-color);
  background: #fff;
  margin: 0 0 30px 0;
  padding: 15px;
  border-radius: 3px;
}

.result_sns_title {
  margin: 10px 0;
}

.result_snsicon {
  display: flex;
  flex-wrap: wrap;
}

.result_snsicon li {
  width: 50%;
  padding: 15px;
}

.result_sns_txt {
  width: 50%;
  margin: 10px auto;
}

.result_sns_txt2 {
  font-size: 26px;
  line-height: 1.6;
  padding-bottom: 30px;
}

.result_sns_txt2 span {
  text-decoration: var(--main-pink-color) wavy underline;
}

.result_sns_tab {
  width: 45%;
  margin-left: 10px;
}

.result_paper_top {
  display: block;
  border-right: solid 3px var(--main-text-color);
  border-left: solid 3px var(--main-text-color);
}

.result_paper {
  border: solid 3px var(--main-text-color);
  border-top: none;
  background: #fff;
  padding: 15px;
  margin-bottom: 30px;
  position: relative;
}

.result_paper h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 35px 0 25px;
  position: relative;
}

.result_paper h2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--main-text-color);
  transform: translateY(-50%);
}

.result_paper h2 span {
  position: relative;
  z-index: 1;
  background: var(--main-text-color);
  border-radius: 20px;
  font-size: 20px;
  color: #fff;
  display: inline-block;
  padding: 3px 15px;
}

.result_paper h3 span {
  font-size: 30px;
  line-height: 50px;
  background: var(--main-yellow-color);
}

.result_paper_txt {
  line-height: 1.6;
  font-size: 20px;
  text-align: left;
  padding: 10px 0 0;
}

.result_torisetsu_icon01 {
  position: absolute;
  right: -10px;
  top: -20px;
  width: 60px;
}

.result_torisetsu_icon02 {
  position: absolute;
  left: -13px;
  top: -15px;
  width: 60px;
}

.result_torisetsu_icon03 {
  position: absolute;
  right: -20px;
  top: -18px;
  width: 80px;
}

/* 項目が折り返すと中身が増えて、aspect-ratio より縦に伸びる。
   そのとき background-size: cover だと高さに合わせて絵が拡大され、
   左右が切り落とされて波線の縁が欠ける。
   100% 100% にして、伸びたぶんは絵も一緒に伸ばす */
.reslut_box_tokui {
  background: url('../img/result_box_tokui.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 130px;
  aspect-ratio: 1/1.142;
  margin-bottom: 20px;
}

.reslut_box_nigate {
  background: url('../img/result_box_nigate.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 130px;
  aspect-ratio: 1/1.146;
  margin-bottom: 20px;
}

.reslut_box_tokui_list,
.reslut_box_nigate_list {
  text-align: left;
  /* 左右そろえて余白を取る。右が0だと、折り返した行が吹き出しの波線まで届いて
     絵からはみ出して見える。下の余白は最後の行が下端の波線に乗らないため */
  margin: 0 20px;
  padding-bottom: 20px;
  display: block;
  font-size: 24px;
}

.reslut_box_tokui_list li::before,
.reslut_box_nigate_list li::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 36px;
  margin-right: 5px;
  background: url('../img/result_box_tokui_icon.png') no-repeat;
  background-size: cover;
}

.reslut_box_nigate_list li::before {
  width: 38px;
  height: 38px;
  background: url('../img/result_box_nigate_icon.png') no-repeat;
  background-size: cover;
}

.result_clip {
  border: solid 3px var(--main-text-color);
  border-radius: 3px;
  background: #fff;
  padding: 15px;
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: 20px;
  line-height: 1.5;
  text-align: left;
  position: relative;
  padding-top: 166px;
}

.result_clip_list li {
  display: inline;
  background: var(--main-yellow-color);
  line-height: 1.8;
}

.result_clip_list li::after {
  content: ' / ';
  background: #fff;
}

.result_clip_list li:last-child:after {
  content: ' など'
}

.result_clip_title01 {
  position: absolute;
  margin: -230px auto 0;
  width: calc(100% + 30px);
  left: -15px;
  right: 0;
  max-width: unset;
}

.result_clip_title02 {
  position: absolute;
  margin: -240px auto 20px;
  width: calc(100% + 30px);
  left: -15px;
  right: 0;
  max-width: unset;
}

.result_clip02 {
  padding-top: 160px;
}

.result_clip_body,
.result_paper_txt {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.result_clip_body.is-clamped,
.result_paper_txt.is-clamped {
  position: relative;
}

.result_paper_txt {
  margin-bottom: 30px;
}

.result_clip_body.is-clamped::after,
.result_paper_txt.is-clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.result_clip_body.is-clamped.is-expanding::after,
.result_paper_txt.is-clamped.is-expanding::after {
  opacity: 0;
}

.result_readmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 0;
  padding: 0;
  background: #fff;
  color: var(--main-pink2-color);
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

.result_readmore_icon {
  width: 20px;
}

.result_readmore:hover {
  opacity: 0.7;
}

.result_readmore.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.result_lock_unlockbtn_link {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.result_lock_unlockbtn {
  width: 220px;
}

.result_paper_extra--hidden {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.result_torisetsu_title {
  margin-top: -80px;
}

.result_ranking_title {
  width: 80%;
  margin: 20px auto;
}

.result_ranking_01 {
  margin: 10px;
  background: url('../img/result_ranking_box01.png') no-repeat;
  background-size: cover;
  aspect-ratio: 1/1.84;
  margin-bottom: 20px;
  position: relative;
}

.result_ranking {
  background: url('../img/result_ranking_bg_blue.png') repeat;
  background-size: 20px;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  line-height: 1.5;
  color: var(--main-text-color);
}


#result_pink .result_ranking {
  background: url('../img/result_ranking_bg_pink.png') repeat;
  background-size: 20px;
}

#result_green .result_ranking {
  background: url('../img/result_ranking_bg_green.png') repeat;
  background-size: 20px;
}

#result_purple .result_ranking {
  background: url('../img/result_ranking_bg_purple.png') repeat;
  background-size: 20px;
}

#result_blue .result_ranking {
  background: url('../img/result_ranking_bg_blue.png') repeat;
  background-size: 20px;
}

.result_rankin_pic {
  width: 80%;
  margin: 0 auto 0;
  padding-top: 50px;
}


.result_ranking_txt {
  line-height: 1.6;
  font-size: 20px;
  padding: 20px 20px 0 30px;
  text-align: left;
}

/* 吹き出しは背景画像で、白地の下端は箱の高さ(幅×1.84)の97.5%の位置にある。
   箱の高さは幅に比例して縮むのに文字は20px固定なので、画面が狭いほど
   「必要な行数」が増えて「入る行数」が減り、文字が白地からはみ出す。
   相性ランキングの文言は375px幅で6行に収まるよう調整してあるので、
   それより狭い端末はここで文字を詰めて相殺する。
   (得意・苦手の箱と違い background-size は cover のまま。
    100% 100% にすると絵が縦に伸びるうえ、白地の増分より行の増分が大きく解決にならない) */
@media screen and (max-width: 374px) {
  .result_ranking_txt {
    font-size: 18px;
    padding-left: 24px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 339px) {
  .result_ranking_txt {
    font-size: 16px;
  }
}

.result_rankin_icon_best {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  animation: fluffy 2.2s ease-in-out infinite;
}

.result_ranking_02 {
  margin: 10px;
  background: url('../img/result_ranking_box02.png') no-repeat;
  background-size: cover;
  aspect-ratio: 1/1.84;
  margin-bottom: 20px;
  position: relative;
}

.result_rankin_icon_worst {
  position: absolute;
  top: -20px;
  right: 0;
  width: 30%;
  animation: yurayura 1.6s ease-in-out infinite;
}

.result_rankin_txt_worst {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 34%;
}

.result02 {
  color: var(--main-text-color);
  background: #cffbff;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  margin-top: -1px;
  padding: 10px 20px 60px;
}

#result_pink .result02 {
  background: #ffe8f3;
}

#result_green .result02 {
  background: #e9f8d1;
}

#result_purple .result02 {
  background: #e6e6ff;
}

#result_blue .result02 {
  background: #cffbff;
}


.result_actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
}

.result_btn {
  display: block;
  width: 80%;
  padding: 0.8em 0;
  border-radius: 60px;
  background: var(--main-text-color);
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  transition: transform 0.15s ease;
}

.result_btn:active {
  transform: scale(0.95);
}

.result_btn.is-tapped {
  animation: keyBtnTap 0.35s ease;
}

.result_btn--outline {
  background: #fff;
  color: var(--main-text-color);
  border: solid 4px var(--main-text-color);
}

.result_profsample {
  margin: 20px auto;
  width: 80%;
}

.result_nami {
  aspect-ratio: 396/43;
}

#result_pink .result_nami {
  content: url("../img/result_nami_pink_01.png");
}

#result_pink .result_nami02 {
  content: url("../img/result_nami_pink_02.png");
}

#result_green .result_nami {
  content: url("../img/result_nami_green_01.png");
}

#result_green .result_nami02 {
  content: url("../img/result_nami_green_02.png");
}

#result_purple .result_nami {
  content: url("../img/result_nami_purple_01.png");
}

#result_purple .result_nami02 {
  content: url("../img/result_nami_purple_02.png");
}

#result_blue .result_nami {
  content: url("../img/result_nami_blue_01.png");
}

#result_blue .result_nami02 {
  content: url("../img/result_nami_blue_02.png");
}

.result_ranking_drop {
  position: absolute;
  top: 190px;
  left: 50px;
  width: 80px;
  animation: resultDrip 1.4s ease-in infinite;
}

.result_line_btn {
  width: 90%;
  margin: 0 auto 20px;
}

@keyframes resultDrip {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(14px);
    opacity: 0;
  }
}


/*Lock画面*/
#lock {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;

}

.lock #lock {
  display: block;
}

.result_lock_nami {
  opacity: 0.87;
}

.result_lock {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  background: rgba(125, 176, 255, 0.87);
  padding: 15px;
}

.result_lock_title {
  width: 90%;
  margin: 20px auto;
}

.result_lock_txt {
  color: #fff;
  font-size: 20px;
  line-height: 1.7;
}

.result_lock_txt span {
  background: var(--main-pink3-color);
}

.result_lock_txt b {
  display: inline-block;
  font-size: 30px;
  line-height: 1.0;
  padding: 5px;
  margin: 15px;
  background: var(--main-yellow-color);
  color: var(--main-text-color);
}

.result_lock_line {
  width: 80%;
  margin: 20px auto;
}

.result_lock_box {
  margin: 15px;
  border: solid 3px var(--main-text-color);
  border-radius: 10px;
  padding: 5px;
  background-color: #fff;
  text-align: center;
  color: var(--main-text-color);
}

.result_lock_sns {
  padding: 10px 10px;
  display: flex;
  gap: 15px;
}

.result_lock_dlbtn {
  width: 90%;
  margin: 10px auto 0;
}

.footer--lock {
  background: rgba(125, 176, 255, 0.87);
  border: none;
}

.lock .result_disable {
  display: none;
}

.lock main {
  height: 5400px;
  overflow-y: hidden;
}

/*
 * 16タイプ一覧
 * -------------------------------------------------------------------
 */

.types_head {
  position: relative;
  z-index: 10;
  padding-top: 0;
  background: url('../img/home_bg02.png') repeat;
}

.types_head_body {
  background: none;
  padding: 10px 25px 15px;
}

.types_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 15px 15px 40px;
  background: url('../img/home_bg02.png') repeat;
}

.types_card {
  display: block;
  border: solid 3px var(--main-text-color);
  border-radius: 16px;
  padding: 0;
  color: var(--main-text-color);
  text-decoration: none;
}

.types_card_icon {
  width: 100%;
  border-radius: 20px;
  margin: 0 auto 8px;
}

.types_card_code {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 2px 12px;
  border-radius: 20px;
  background: var(--main-text-color);
  color: #fff;
  margin-bottom: 8px;
}

.types_card_name {
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.types_card_catch {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  margin:0 10px 15px;
}

.types_card_desc {
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

.types_card--pink {
  background: #ffe8f3;
}

.types_card--green {
  background: #e9f8d1;
}

.types_card--purple {
  background: #e6e6ff;
}

.types_card--blue {
  background: #cffbff;
}

.axis {
  --axis-orange: #f6a723;
  --axis-green: #4cb87a;
  --axis-purple: #8c6fe6;
  --axis-blue: #4f8ff0;
  padding: 10px 15px 40px;
  text-align: center;
  background: url('../img/home_bg02.png') repeat;
}

.axis_card_wrap {
  background: linear-gradient(180deg, #f4f6ff 0%, #ffffff 40%);
  border-radius: 28px;
  padding: 24px 16px 28px;
  box-shadow: 0 10px 30px rgba(84, 88, 175, 0.18);
}

.axis_badge {
  display: inline-block;
  background: var(--main-text-color);
  color: #fff;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 16px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.axis_title {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, var(--main-text-color), var(--main-pink2-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.axis_lead {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 15px;
}

.axis_body {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.8;
  color: var(--main-text-color);
  text-align: left;
  margin:20px 15px 22px;
}
.axis_body span{
   background: var(--main-yellow-color);
}
.axis_body b{
  text-decoration: var(--main-pink-color) wavy underline;
}
.axis_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.axis_card {
  background: #fff;
  border: solid 3px var(--main-text-color);
  border-radius: 20px;
  padding: 14px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(84, 88, 175, 0.1);
}

.axis_qnum {
  display: inline-block;
  background: var(--main-text-color);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.axis_q {
  display: inline-block;
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: var(--main-text-color);
  margin:0 0 12px 5px;
}

.axis_pair {
  position: relative;
  display: flex;
}

.axis_pair::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, var(--main-pink2-color), var(--axis-blue));
}

.axis_card:nth-child(2) .axis_pair::before {
  background: linear-gradient(90deg, var(--axis-orange), var(--axis-blue));
}
.axis_card:nth-child(3) .axis_pair::before {
  background: linear-gradient(90deg, var(--axis-green), var(--axis-blue));
}
.axis_card:nth-child(4) .axis_pair::before {
  background: linear-gradient(90deg, var(--axis-purple), var(--axis-blue));
}
.axis_side {
  flex: 1;
  text-align: center;
}

.axis_letter {
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.axis_letter--pink {
  background: var(--main-pink2-color);
}

.axis_letter--orange {
  background: var(--axis-orange);
}

.axis_letter--green {
  background: var(--axis-green);
}

.axis_letter--purple {
  background: var(--axis-purple);
}

.axis_letter--blue {
  background: var(--axis-blue);
}

.axis_word {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.4;
  color: var(--main-text-color);
  margin-bottom: 2px;
}

.axis_en {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--main-lightblue-color);
  margin-bottom: 4px;
}

.axis_desc {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  color: var(--main-text-color);
}

.axis_formula {
  border: dashed 3px var(--main-pink2-color);
  border-radius: 20px;
  background: #fff8fc;
  padding: 16px;
  margin-bottom: 15px;
}

.axis_formula_main {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: var(--main-pink2-color);
  margin-bottom: 10px;
}

.axis_formula_example {
  font-size: 18px;
  line-height: 1.6;
  font-family: "Yomogi", sans-serif;
    font-weight: bold;
  color: var(--main-text-color);
  background: #eef1ff;
  border-radius: 12px;
  padding: 8px 10px;
}

.axis_note {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  background: #fff9d1;
  border: solid 2px #ffe9a3;
  border-radius: 14px;
  padding: 12px 15px;
  color: var(--main-black-color);
  margin-bottom: 20px;
}

.axis_result {
  background: #fff;
  border: solid 2px var(--main-text-color);
  border-radius: 20px;
  padding: 20px 20px 15px;
  text-align: left;
}

.axis_result_title {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: var(--main-text-color);
  text-align: center;
  margin-bottom: 12px;
}

.axis_checklist {
  list-style: none;
}

.axis_checklist li {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--main-text-color);
  margin-bottom: 10px;
}

.axis_checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--main-pink2-color);
  font-weight: bold;
}

.types_cta {
  padding: 10px 25px 60px;
  text-align: center;
  background: url('../img/home_bg02.png') repeat;
}

.types_cta_txt {
  font-family: "Yomogi", sans-serif;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.6;
  color: var(--main-text-color);
  margin-bottom: 25px;
}

@media screen and (max-width: 767px) {


  .types_card_name {
    font-size: 17px;
  }

  .types_card_desc {
    font-size: 13px;
  }
}

/*LINE追加済みの人にはブラインドを出さない。
  assets/js/unlock-state.js が <head> の時点で html に is-unlocked を付ける。
  body側で class を外すとブラインドが一瞬見えるため、ここで打ち消している*/
.is-unlocked .lock #lock { display: none; }
.is-unlocked .lock .result_disable { display: block; }
.is-unlocked .lock main { height: auto; overflow: visible; }