@import url("/css/1.0.0/base.css");


@media screen and (min-width: 834px) {
  section.ptn22-form {
  }
  section.ptn22-form .container {
    padding-bottom: 20.0rem;
  }
  section.ptn22-form .form-select-block {
    max-width: 120.0rem;
    margin: 0 auto;
    margin-bottom: 10.0rem;
    padding-bottom: 0.5rem;
  }
  section.ptn22-form .form-select-block {
    position: relative;
  }
  section.ptn22-form .form-select-block .error-message {
    color: #f00;
    margin: 5.0rem 0;
  }
  section.ptn22-form .form-select-block .select-magazine {
    max-width: 60.0rem;
    margin: 0 auto;
    margin-top: 5.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row {
    display: flex;
    padding-bottom: 1.0rem;
    margin-bottom: 1.0rem;
    border-bottom: dotted 1px #999;
    padding-bottom: 3.0rem;
    margin-bottom: 3.0rem;
  }
  section.ptn22-form .select-magazine .wrap-row .row:last-child {
    border-bottom: none;
  }
  section.ptn22-form .form-select-block .wrap-row .row .caption {
    width: 10.0rem;
    line-height: 1.6;
    padding: 0.5rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .select {
    margin-right: 2.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .select select {
    width: 30.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .count {
  }
  section.ptn22-form .form-select-block .wrap-row .row .count select {
    width: 10.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .suffix {
  }
  section.ptn22-form .form-select-block .button {
  }
  section.ptn22-form .form-select-block .c-button {
    margin: 0 auto;
  }
  section.ptn22-form .title {
    text-align: center;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    font-size: 3.0rem;
  }
  section.ptn22-form .privacy-block {
    padding-top: 5.0rem;
  }
  section.ptn22-form .gift-block {
    padding-bottom: 15.0rem;
  }
  section.ptn22-form .gift-block .c-button {
    margin: 0 auto;
    margin-top: 5.0rem;
  }
  section.ptn22-form .radio-group {
    display: flex;
    align-items: center;
  }
  section.ptn22-form .radio-group label {
    margin: 0 5.0rem 0 0;
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 833px) {
  section.ptn22-form {
  }
  section.ptn22-form .container {
  }
  section.ptn22-form .form-select-block {
    margin-bottom: 10.0rem;
  }
  section.ptn22-form .form-select-block .error-message {
    color: #f00;
    margin: 5.0rem 0;
  }
  section.ptn22-form .form-select-block .select-magazine {
    margin-top: 5.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: dotted 1px #999;
    padding-bottom: 4.0rem;
    margin-bottom: 2.0rem;
  }
  section.ptn22-form .select-magazine .wrap-row .row:last-child {
    border-bottom: none;
  }
  section.ptn22-form .form-select-block .wrap-row .row .caption {
    line-height: 1.6;
    padding: 0.5rem;
    width: 100%;
  }
  section.ptn22-form .form-select-block .wrap-row .row .select {
    margin-right: 2.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .select select {
    width: 50.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .count {
  }
  section.ptn22-form .form-select-block .wrap-row .row .count select {
    width: 10.0rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .suffix {
  }
  section.ptn22-form .form-select-block .button {
  }
  section.ptn22-form .form-select-block .c-button {
    margin: 0 auto;
  }
  section.ptn22-form .c-form-block {
  }
  section.ptn22-form .title {
    text-align: center;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    font-size: 3.6rem;
  }
  section.ptn22-form .privacy-block {
  }
  section.ptn22-form .gift-block {
    padding-bottom: 15.0rem;
  }
  section.ptn22-form .gift-block .c-button {
    margin: 0 auto;
    margin-top: 5.0rem;
  }
  section.ptn22-form .radio-group {
    display: flex;
    align-items: center;
  }
  section.ptn22-form .radio-group label {
    margin: 0 5.0rem 0 0;
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 834px) {
}
@media screen and (max-width: 833px) {
}
/* =========================================================================
   repo追加（phptest原本の ptn22.css には無い分）
   ・ptn22モックには品目の「削除ボタン」が無いが、Slimの動的な品目追加/削除には
     削除操作が要る。その削除ボタン(×)を .delete に用意する。
   ・削除ボタンが行に加わって幅が詰まると数量の「冊」(.suffix)が折り返すため、
     .count を flex・.suffix を nowrap にして一行に保つ。
   → 上のデザイナー原本ルールは無改変のまま、この追加分を後方に置いて後勝ちで効かせる
     （デザイナーが ptn22.css を差し替えても、この末尾ブロックを足し直すだけでよい）。
   ========================================================================= */
@media screen and (min-width: 834px) {
  section.ptn22-form .form-select-block .wrap-row .row { align-items: center; }
  section.ptn22-form .form-select-block .wrap-row .row .count { display: flex; align-items: center; }
  section.ptn22-form .form-select-block .wrap-row .row .suffix { white-space: nowrap; margin-left: 0.5rem; }
  section.ptn22-form .form-select-block .wrap-row .row .delete { margin-left: 1.5rem; }
  section.ptn22-form .form-select-block .wrap-row .row .delete a {
    display: block; text-decoration: none; text-align: center;
    color: #999; font-size: 2.4rem; line-height: 1; padding: 0.5rem;
    transition: color 200ms 0s ease;
  }
  section.ptn22-form .form-select-block .wrap-row .row .delete a:hover { color: #c00; }
}
@media screen and (max-width: 833px) {
  section.ptn22-form .form-select-block .wrap-row .row .count { display: flex; align-items: center; }
  section.ptn22-form .form-select-block .wrap-row .row .suffix { white-space: nowrap; margin-left: 0.5rem; }
  section.ptn22-form .form-select-block .wrap-row .row .delete { margin-left: 1.0rem; }
  section.ptn22-form .form-select-block .wrap-row .row .delete a {
    display: block; text-decoration: none; text-align: center;
    color: #999; font-size: 4.0rem; line-height: 1; padding: 0.5rem;
  }
  section.ptn22-form .form-select-block .wrap-row .row .delete a:hover { color: #c00; }
}