@charset "UTF-8";


/* sass */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
#manner-wear-size-qa-page .uc-page-header, #manner-wear-size-qa-page .uc-page-footer { display: none; }

.CMP-CM20-language-select, .communication { display: none; }

.contents { max-width: none; padding: 0; background: #FFFFFF; }

#food-quantity-qa-page > * { font-family: Noto Sans JP, serif; line-height: 1.5; }

#food-quantity-qa-page .uc-page-header, #food-quantity-qa-page .uc-page-footer { display: none; }

.container { padding: 0; background: #fff; }

.content-inner { margin: 48px auto; padding: 0 20px; max-width: calc(592px + 40px); }

.content-inner > .food-quantity-hdg-lv1 { margin-top: calc(48px + 83px); }

.link-txt { color: #666666; text-decoration: underline; }

.mgt-s { margin-top: 16px !important; }

.mgt-m { margin-top: 48px !important; }

.mgt0-32 { margin-top: 0 !important; }

.br-pc { display: none; }

.food-quantity-hdg-lv1 { background-color: #FDE68A; border-radius: 16px; margin-top: 83px; padding: 16px 24px; position: relative; }

.food-quantity-hdg-lv1::before { content: ""; background: url(/content/dam/sites/jp_unicharmpet_com/pet/food_quantity/img_item01.png) no-repeat; background-size: contain; display: inline-block; width: 158px; height: 83px; position: absolute; top: -83px; left: 0; right: 0; margin: 0 auto; }

.food-quantity-hdg-lv1 h1 { font-size: 2.4rem; }

.hdg-lv1-en h1 { font-family: Outfit, serif; font-size: 3.2rem; }

.txt-std { color: #666666; font-size: 1.6rem; line-height: 1.5; text-align: center; margin-top: 24px; }

.note-food-quantity { margin-top: 32px; }

.note-food-quantity ul li { color: #666666; display: flex; font-size: 1.6rem; line-height: 1.5; }

.note-food-quantity ul li + li { margin-top: 12px; }

.note-food-quantity.fit-c ul li { justify-content: center; }

.txt-question { font-size: 2rem; text-align: center; }

.txt-question.with-num { text-align: left; display: flex; justify-content: center; }

.txt-question.with-num .num { color: #CC3939; font-family: Outfit, serif; font-weight: bold; font-size: 2rem; min-width: 2.3em; }

.food-quantity-attention li { font-weight: bold; }

.food-quantity-radio-btn-area > .radio-btn { display: flex; line-height: 1.5; }

.food-quantity-radio-btn-area > .radio-btn + .radio-btn { margin-top: 16px; }

.food-quantity-radio-btn-area > .radio-btn input { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.food-quantity-radio-btn-area > .radio-btn input:checked + .radio-txt { border: 2px solid #666666; }

.food-quantity-radio-btn-area > .radio-btn input:checked + .radio-txt::after { background-color: #CC3939; }

.food-quantity-radio-btn-area > .radio-btn .radio-txt { display: block; position: relative; width: 100%; }

.food-quantity-radio-btn-area > .radio-btn .radio-txt::before, .food-quantity-radio-btn-area > .radio-btn .radio-txt::after { content: ""; border-radius: 50%; display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; }

.food-quantity-radio-btn-area > .radio-btn .radio-txt::before { border: 2px solid #333333; left: 13px; width: 20px; height: 20px; }

.food-quantity-radio-btn-area > .radio-btn .radio-txt::after { left: 18px; width: 10px; height: 10px; }

.food-quantity-radio-btn-area .radio-txt { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 2rem; padding: 13px 16px 13px 52px; }

.food-quantity-radio-btn-area .radio-txt .sub { font-size: 1.4rem; }

.food-quantity-num-area .box-num { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 2rem; margin-right: 8px; padding: 13px 16px; width: 218px; text-align: right; }

.food-quantity-num-area .box-num:disabled, .food-quantity-num-area .box-num.disabled { background-color: #DDDDDD; border-color: #DDDDDD; color: #666666; pointer-events: none; }

.food-quantity-num-area .unit { font-size: 2rem; }

.food-quantity-select-area { position: relative; display: block; z-index: 1; }

.food-quantity-select-area:after { content: ""; position: absolute; top: 50%; right: 16px; display: block; background: url("/content/dam/sites/jp_unicharmpet_com/pet/food_quantity/icon_arrow.svg") no-repeat; background-size: cover; width: 15px; height: 15px; -webkit-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); margin-top: -2px; z-index: -1; }

.food-quantity-select-area select { display: block; width: 100%; font-size: 1.6rem; font-weight: 500; line-height: 1.5; text-align: center; border: 2px solid #CCCCCC; border-radius: 8px; padding: 10px 30px 10px 10px; }

.food-quantity-select-area.pt1 { width: 130px; }

.food-quantity-select-area.pt1.input-wrap-num { display: flex; margin: 0; align-items: center; }

.food-quantity-select-area.pt1.input-wrap-num::after { right: 36px; }

.food-quantity-select-area.pt1.input-wrap-num span { margin-left: 10px; }

.food-quantity-select-area.pt2 { width: 130px; }

.food-quantity-select-area.pt2.input-wrap-num { display: flex; align-items: center; }

.food-quantity-select-area.pt2.input-wrap-num::after { right: 36px; }

.food-quantity-select-area.pt2.input-wrap-num span { font-size: 1.6rem; font-family: 'Zen Maru Gothic', serif; font-weight: bold; margin-left: 10px; }

.box-btn-bottom { margin-top: 64px; }

.box-btn-bottom .btn-food-quantity { font-size: 2rem; line-height: 1.5; display: block; border-radius: 8px; text-align: center; padding: 15px; width: 100%; }

.box-btn-bottom .btn-food-quantity + .btn-food-quantity { margin-top: 16px; }

.box-btn-bottom .btn-food-quantity.pt1 { background-color: #CC3939; color: #fff; font-weight: bold; }

.box-btn-bottom .btn-food-quantity.pt2 { border: 2px solid #CC3939; background-color: #fff; }

.box-btn-bottom .btn-food-quantity:disabled, .box-btn-bottom .btn-food-quantity.disabled { background-color: #DDDDDD; color: #666666; pointer-events: none; }

.box-btn-bottom .btn-food-quantity.compact { line-height: 1.3; padding: 8px; }

.box-btn-bottom .btn-food-quantity:hover { text-decoration: none; }

.box-input-inner { margin-top: 24px; }

.box-result { background-color: #FDE68A; border-radius: 16px; text-align: center; padding: 32px 20px; margin-top: 80px; }

.box-result .txt-result { font-size: 2.4rem; }

.box-result .txt-result + .box-btn-bottom { margin-top: 24px; }

.box-result .num-result { font-family: Outfit, serif; font-weight: bold; font-size: 3.2rem; }

.box-result .txt-sub { font-size: 1.6rem; line-height: 1.5; color: #666666; margin-top: 24px; }

.result-note-food-quantity { text-align: left; }

.result-note-food-quantity > li { display: flex; }

.img-sorry { text-align: center; margin-top: 24px; }

.img-sorry img { width: 160px; }

.lbl-err { position: relative; display: block; color: #E60000; font-size: 1.6rem; font-weight: bold; line-height: 1.5; text-align: center; margin-top: 5px; }

.lbl-err:empty { display: none; }

.lbl-err:before { content: ""; display: inline-block; width: 16px; height: 16px; background: url(/content/dam/sites/jp_unicharmpet_com/pet/food_matching/icon_error.png) no-repeat center; background-size: contain; vertical-align: middle; margin: -4px 4px 0 0; }

.lbl-err-note { display: block; color: #E60000; font-size: 1.6rem; font-weight: bold; line-height: 1.5; text-align: center; margin-top: 5px; }

.lbl-err-note:empty { display: none; }

.lbl-err-note::before { content: "※"; }

@media print, all and (min-width: 769px) { .mgt0-32 { margin-top: 32px !important; } .br-pc { display: block; } .food-quantity-hdg-lv1 h1 { font-size: 3.2rem; } .food-quantity-radio-btn-area { display: flex; flex-wrap: wrap; margin-left: -16px; }
  .food-quantity-radio-btn-area > .radio-btn { margin-left: 16px; width: calc(50% - 16px); }
  .food-quantity-radio-btn-area > .radio-btn + .radio-btn { margin-top: 0; }
  .food-quantity-radio-btn-area > .radio-btn:nth-child(n+3) { margin-top: 16px; }
  .food-quantity-radio-btn-area .radio-txt:has(.sub) { line-height: 1; } .food-quantity-num-area .box-num { width: 268px; } .box-input-inner { padding: 0 76px; }
  .box-input-inner.pc-ta-c { text-align: center; } .img-sorry img { width: 288px; } }