:root{
  --chicken-color: #96ab9c;
  --horse-color: #beb389;
  --salmon-color: #ce8272;
  --primary-color: #9F8575;
}
/* --共通-- */
.page-calculation .sub__mv {
  background-image: url(https://mishone.co.jp/assets/img/calculation_headerimg.jpg) !important; 
}
.l-container-system {
  margin: 10rem auto!important;
}
.calc-box {
  border-bottom: solid 1px var(--primary-color);
  border-left: solid 1px var(--primary-color);
  border-right: solid 1px var(--primary-color);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 5rem;
  margin: 0 0;
}
.select-box-container {
  display: flex;
}
.select-box-container-item {
  width: 50%;
  display: flex;
}
.select-box-container-age {
  justify-content: flex-end;
  padding-right: 5rem;
}
.select-box-label {
  margin-right: 1rem;
}
.select-box-outer-border{
  border: solid 1px var(--primary-color);
  border-radius: 5px;
  width: fit-content;
  padding-right: 1rem;
  background: #FFF9F3;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #9C8275;
  font-size: 15px;
}
.select-box-outer-border select {
  height: auto;
  background: #FFF9F3;
}
.button-container {
  width: 100%;
  text-align: center;
  margin-top: 4rem;
}
#caluculate-dogfood-button {
  border: solid 1px var(--primary-color);
  color: var(--primary-color);
  padding: 1rem 3rem;
}
.triangle-container {
  margin: 3rem 10%;
}
.triangle-container #result-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 2.8rem solid transparent;
  border-left: 2.8rem solid transparent;
  border-top: 3.5rem solid var(--primary-color);
  border-bottom: 0;
  margin: 0 auto;
}
.text-about-day {
  font-size: 2.5rem;
}
.text-important {
  background: linear-gradient(transparent 75%, #FFB200 75%);
  font-size: 3rem;
}
.text-about-day .text-bold {
  font-weight: bold;
  font-size: 3.5rem;
}
.text-important .text-jp {
  font-size: 2.5rem;
}
.text-about-month {
  margin-top: 1rem;
}
.text-about-month .text-bold {
  font-weight: bold;
  font-size: 2.2rem;
}
.text-attention-box {
  margin: 2rem 0 8rem;
  font-size: 1.3rem;
}
.br-sp {
  display: none;
}
#calc-box-tab-container {
  margin: 0 0;
  display: flex;
}
.calc-box-tab {
  width: calc(100% / 3);
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
}

/* --サーモン-- */
/*タブ*/
div#calc-box-wrapper.salmon div.calc-box-tab.chicken {
  background-color: var(--chicken-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #fff;
}
div#calc-box-wrapper.salmon div.calc-box-tab.horse {
  background-color: var(--horse-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color:#fff;
}
div#calc-box-wrapper.salmon div.calc-box-tab.salmon {
  border-top: solid 5px var(--salmon-color);
  border-left: solid 1px var(--primary-color);
  border-right: solid 1px var(--primary-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
/*セレクトボックス*/
div#calc-box-wrapper.salmon select#dog-age-salmon {
  display: inline-block;
}
div#calc-box-wrapper.salmon select#dog-age-chicken {
  display: none;
}
div#calc-box-wrapper.salmon select#dog-age-horse {
  display: none;
}
div#calc-box-wrapper.salmon select#dog-weight-salmon {
  display: inline-block;
}
div#calc-box-wrapper.salmon select#dog-weight-chicken {
  display: none;
}
div#calc-box-wrapper.salmon select#dog-weight-horse {
  display: none;
}
/*結果*/
div#calc-box-wrapper.salmon div.calc-result-box {
  background: var(--salmon-color);
  padding: 3rem 0 4rem;
  margin: 2rem 0;
  text-align: center;
  color: #fff;
}
div#calc-box-wrapper.salmon div.calc-result-box.salmon {
  display: block;
}
div#calc-box-wrapper.salmon div.calc-result-box.chicken {
  display: none;
}
div#calc-box-wrapper.salmon div.calc-result-box.horse {
  display: none;
}
/*結果アンダーライン*/
.salmon .text-important {
  background: linear-gradient(transparent 75%, #5b60c2 75%);
}
/* --ホース-- */
/*タブ*/
div#calc-box-wrapper.horse div.calc-box-tab.chicken {
  background-color: var(--chicken-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #fff;
}
div#calc-box-wrapper.horse div.calc-box-tab.horse {
  border-top: solid 5px var(--horse-color);
  border-left: solid 1px var(--horse-color);
  border-right: solid 1px var(--horse-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
div#calc-box-wrapper.horse div.calc-box-tab.salmon {
  background-color: var(--salmon-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color:#fff;
}
/*セレクトボックス*/
div#calc-box-wrapper.horse select#dog-age-salmon {
  display: none;
}
div#calc-box-wrapper.horse select#dog-age-chicken {
  display: none;
}
div#calc-box-wrapper.horse select#dog-age--horse {
  display: inline-block;
}

div#calc-box-wrapper.horse select#dog-weight-salmon {
  display: none;
}
div#calc-box-wrapper.horse select#dog-weight-chicken {
  display: none;
}
div#calc-box-wrapper.horse select#dog-weight-horse {
  display: inline-block;
}
/*結果*/
div#calc-box-wrapper.horse div.calc-result-box {
  background: var(--horse-color);
  padding: 3rem 0 4rem;
  margin: 2rem 0;
  text-align: center;
  color: #fff;
}
div#calc-box-wrapper.horse div.calc-result-box.salmon {
  display: none;
}
div#calc-box-wrapper.horse div.calc-result-box.chicken {
  display: none;
}
div#calc-box-wrapper.horse div.calc-result-box.horse {
  display: block;
}
/* --チキン-- */
/*タブ*/
div#calc-box-wrapper.chicken div.calc-box-tab.chicken {
  border-top: solid 5px var(--chicken-color);
  border-left: solid 1px var(--primary-color);
  border-right: solid 1px var(--primary-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
div#calc-box-wrapper.chicken div.calc-box-tab.horse {
  background-color: var(--horse-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color:#fff;
}
div#calc-box-wrapper.chicken div.calc-box-tab.salmon {
  background-color: var(--salmon-color);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #fff;
}
/*セレクトボックス*/
div#calc-box-wrapper.chicken select#dog-age-salmon {
  display: none;
}
div#calc-box-wrapper.chicken select#dog-age-chicken {
  display: inline-block;
}
div#calc-box-wrapper.chicken select#dog-age-horse {
  display: none;
}
div#calc-box-wrapper.chicken select#dog-weight-salmon {
  display: none;
}
div#calc-box-wrapper.chicken select#dog-weight-chicken {
  display: inline-block;
}
div#calc-box-wrapper.chicken select#dog-weight-horse {
  display: none;
}
/*結果*/
div#calc-box-wrapper.chicken div.calc-result-box {
  background: var(--chicken-color);
  padding: 3rem 0 4rem;
  margin: 2rem 0;
  text-align: center;
  color: #fff;
}
div#calc-box-wrapper.chicken div.calc-result-box.chicken {
  display: block;
}
div#calc-box-wrapper.chicken div.calc-result-box.salmon {
  display: none;
}
div#calc-box-wrapper.chicken div.calc-result-box.horse {
  display: none;
}

@media screen and (max-width: 767px) {
  .page-calculation .sub__mv {
    background-image: url(https://mishone.co.jp/assets/img/calculation_headerimg_sp.jpg) !important;
  } 
  .l-container-system {
    margin: 5rem auto!important;
  }
  .calc-box {
    margin: 0;
    padding: 3rem 2rem;
  }
  .select-box-container {
    display: block;
  }
  .select-box-container-item {
    width: 100%;
    display: block;
  }
  .select-box-label {
    margin-right: 0;
    font-size: 2rem;
  }
  .select-box-container-age {
    justify-content: initial;
    padding-right: 0;
  }
  .select-box-outer-border {
    width: 100%;
    padding: 0.2rem 1rem;
    margin-bottom: 1rem;
  }
  .select-box-outer-border select {
    height: 4.5rem;
    width: 100%;
  }
  #caluculate-dogfood-button {
    padding: 1rem 4rem;
    font-size: 1.5rem;
  }
  .calc-result-box {
    margin: 2rem 0!important;
  }
  .text-about-day {
    font-size: 2rem;
  }
  .text-about-month {
    margin-top: 1rem;
    font-size: 1.8rem;
  }
  .text-important {
    line-height: 4rem;
  }
  .text-attention-box {
    margin: 0;
  }
  .br-sp {
    display: block;
  }
  #calc-box-tab-container {
    margin: 0;
    display: flex;
  }
  .calc-box-tab {
    width: calc(100% / 2);
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
  }
}