/* style.css */
.pst-wrapper{position: relative;max-width:920px;margin:20px auto;font-family:メイリオ,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;color:#222;font-family: "Kiwi Maru";}
.pst-card{position:relative;display:flex;justify-content:center;align-items:center;gap:20px;background:linear-gradient(90deg, #4c8cff 0%, #4c8cff 49.4%, #ff9087 49.4%, #ff9087 100%);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.08);padding:0 6px;flex-direction:column;height: 346px;}

/* 背景 + 入力フォーム */
.pst-left-right-bg{position:relative;display:flex;justify-content:center;align-items:center;width:100%;gap:20px;}
.pst-bg{position:absolute;}
.pst-bg .pc-img { display: block; width: 100%; height: auto;border-radius: 8px;}
.pst-bg .mobile-img { display: none; }
.pst-form{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content: center;width:100%;max-width:327px;padding:15px;background:#fff; height: 230px;margin-top: 5.5em; border-radius: 10px;border: 3px solid #5682ff;}
.pst-form label{display:block;}
.pst-form label:first-child:not(.pst-bdate-row label) {border-bottom: 1px solid #d7d7d7;padding-bottom: 5px;margin-bottom: 5px;border-bottom-style: dashed;}
.pst-form label:nth-of-type(3):not(.pst-bdate-row label:nth-of-type(3)) {font-weight: 700;color: #363636;}
.pst-name-example {font-size: 13px;font-weight: 400;color: #179ca7;}
.pst-form input[type=number]{width:60px;padding:5px;border:1px solid #ddd;border-radius:6px;margin-left:8px;text-align: center;}
.pst-form.hidden { opacity: 0; pointer-events: none; }
.pst-form-placeholder {height: 210px;}

.pst-bdate-row{display: flex;gap: 8px;align-items: center;justify-content: center;border-bottom: 1px solid #d7d7d7;padding-bottom: 5px;border-bottom-style: dashed;}
.pst-btn { padding: 8px 26px; background: linear-gradient(90deg, #5b7cff, #3aa0ff); color: #fff; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; box-shadow: 0 2px 13px rgba(58, 160, 255, 0.38);}
.pst-btn:active{transform:translateY(1px);}
.pst-error{color:#d93025;font-size:13px;display: none;}

.pst-result{display:none;margin-top:18px;font-family: "Kiwi Maru";}
.pst-result-card {display: flex;flex-direction: column;min-height: 150px;padding: 20px;text-align: center;gap: 18px;border-radius: 12px;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);}
.pst-result-image{width:320px;height:auto;border-radius:10px;object-fit:cover;}
.pst-result-body{display: flex;flex:1;justify-content: center;align-items: center;}
.pst-total{font-size:22px;font-weight:800;margin-bottom:6px;}
.pst-ratio{font-size:16px;margin-bottom:10px;color:#444;}
.pst-lines{margin:0;padding-left:18px;}
.pst-lines li{margin-bottom:6px;color:#333;font-size:18px;}
.pst-reset:not(.result-info .pst-reset) { display: inline-block; padding: 8px 16px; background: #1ac5d2; color: #ffffff; border-radius: 10px; cursor: pointer; font-weight: 700; box-shadow: 0 0px 10px rgb(179 179 179 / 38%);}
.result-info .pst-reset {text-decoration: underline;}

.pst-loading {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;}
.pst-loading-inner{background:#fff;padding:18px 22px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.14);display:flex;flex-direction:column;align-items:center;}
.pst-thinking{font-weight:700;margin-bottom:8px;letter-spacing:1px;}
.pst-dots span{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:#3aa0ff;opacity:0;transform:translateY(0);animation:pst-bounce 1s infinite;}
.pst-dots span:nth-child(1){animation-delay:0s;}
.pst-dots span:nth-child(2){animation-delay:0.15s;}
.pst-dots span:nth-child(3){animation-delay:0.3s;}

@keyframes pst-bounce{0%{opacity:0;transform:translateY(0);}30%{opacity:1;transform:translateY(-8px);}60%{opacity:0.6;transform:translateY(0);}100%{opacity:0;transform:translateY(0);}}


.pst-result-text {font-size: 16px;color: #333;max-width: 800px;margin: auto;border-radius: 15px;padding: 1em 2.5em;}
.pst-reset {display: inline-block; padding: 8px 15px; background-color: #007bff; color: #fff; border-radius: 4px; text-decoration: none;}
.pst-reset:hover { background-color: #0056b3;}
.pst-result-p { font-weight: 700; font-size: 1.5rem; display: inline-block; line-height: 1; position: relative; padding: 0 2.5rem; margin-bottom: 1em;}
.pst-result-p span { display: block; font-size: 5rem;}
.pst-result-p:before, .pst-result-p:after { position: absolute; top: -3px; width: 10px; height: 100%; content: ''; border-top: solid 3px; border-bottom: solid 3px;}
.pst-result-p:before { border-left: solid 3px; left: 0;}
.pst-result-p:after { border-right: solid 3px; right: 0;}
.pst-result-st { margin: 2em auto; width: 100%;}
.pst-result-st span { border-radius: 50px; padding: .5em 2em; margin: .5em; color: #fff; font-weight: 700; font-size: 1.3rem; width: 100%;}
.percent { display: flex; align-items: baseline;}
.pst-result-desc { padding: 1em 2em;border-radius: 13px; position: relative; background: #f0f3f6;}

/* パターン 1~5 */
.pst-result-p.pattern-1 span,
.pst-result-p.pattern-2 span,
.pst-result-p.pattern-3 span,
.pst-result-p.pattern-4 span,
.pst-result-p.pattern-5 span {
    color: #eb5b50;
}
.pst-result-st.pattern-1 span,
.pst-result-st.pattern-2 span,
.pst-result-st.pattern-3 span,
.pst-result-st.pattern-4 span,
.pst-result-st.pattern-5 span {
    background: #eb5b50;
}

/* パターン 6~9 */
.pst-result-p.pattern-6 span,
.pst-result-p.pattern-7 span,
.pst-result-p.pattern-8 span,
.pst-result-p.pattern-9 span {
    color: #174eb1;
}
.pst-result-st.pattern-6 span,
.pst-result-st.pattern-7 span,
.pst-result-st.pattern-8 span,
.pst-result-st.pattern-9 span {
    background: #174eb1;
}

/* レスポンシブ */
@media(max-width:760px){
  .pst-left-right-bg{flex-direction:column;padding: .5em;gap: 0;}
  .pst-bg{height:auto;width:100%;border-radius:12px 12px 0 0;position: unset;}
  .pst-bg .pc-img { display: none; }
  .pst-bg .mobile-img { display: block; border-radius: 8px 8px 0 0;}
  .pst-card { height: unset;padding: 0;}
  .pst-form{max-width: unset;margin-top:unset;border: 1px solid #dedede;border-radius: 0 0 8px 8px;gap: 4px;height: 242px;}
  .pst-bdate-row { justify-content: space-evenly;gap: 2.5em;}
  .pst-result {margin-top: 0;}
  .pst-result-card{flex-direction:column;align-items:center;padding: 20px 0;}
  .pst-result-st { display: flex; flex-direction: column;align-items: center;margin: 1em auto;}
  .pst-result-st span {padding: 0.5em 1em;margin: .2em;}
  .pst-result-desc {font-size: 1rem;padding: 1em 1.5em;}
  .pst-result-image{width:100%;}
  .pst-form input[type=number] { width: 40px; padding: 5px;}
  .pst-result-text {padding: 0;}
}