@charset "utf-8";
/* CSS Document */
:root {
  --gray: #404040;
  --light-gray: #EFEFEF;
  --red: #ED4747;
  --light-red: #FDEDED;
  --blue: #2A6ACB;
  --light-blue: #d9eef9;
  --yellow: #ffffab;
  --light-yellow: #ffffea;
}
.width_100p:nth-of-type(1) {
  z-index: 9999;
}
div.os_upgrade {
  box-sizing: border-box;
  background-color: #FFF;
  margin: 0 auto;
  color: #000;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, Helvetica, "HelveticaNeue", Verdana;
  font-size: 1.25em;
}
div.os_upgrade * {
  box-sizing: border-box;
}
div.os_upgrade strong {
  color: var(--red);
}
div.os_upgrade .note {
  font-size: 0.85em;
}
div.os_upgrade .main {
  margin-top: 3px;
  margin-bottom: 30px !important;
}
div.os_upgrade .schedule {
  margin: 0 auto 40px auto;;
  width: 620px;
}
div.os_upgrade .schedule h4 {
  color: var(--gray);
  font-weight: bold;
  font-size: 1.25em;
  margin-bottom: 0.25em;
  text-align: center;
}
div.os_upgrade .schedule table {
  border-top: solid 1px #b2b2b2;
  border-right: solid 1px #b2b2b2;
}
div.os_upgrade .schedule table td,
div.os_upgrade .schedule table th {
  border-left: solid 1px #b2b2b2;
  border-bottom: solid 1px #b2b2b2;
}
div.os_upgrade .schedule table th {
  font-size: 0.95em;
  font-weight: bold;
  height: 2.25em;
  line-height: 2.25em;
  text-align: center;
}
div.os_upgrade .schedule table td {
  font-size: 0.9em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
}
div.os_upgrade .schedule table tr:first-of-type th:nth-of-type(1) {
  background-color: var(--light-blue);
}
div.os_upgrade .schedule table tr:first-of-type th:nth-of-type(2) {
  padding: 0 20px;
}
div.os_upgrade .schedule table tr:first-of-type th:nth-of-type(3) {
  background-color: var(--yellow);
  font-weight: bold;
}
div.os_upgrade .schedule table tr td:nth-of-type(1) {
  background-color: var(--light-gray);
}
div.os_upgrade .schedule table tr td:nth-of-type(3) {
  background-color: var(--light-yellow);
  color: var(--red);
  font-weight: bold;
}
div.os_upgrade h3 {
  color: var(--gray);
  font-size: 1.55em;
  font-weight: bold;
  margin-bottom: 1em;
  text-align: center;
}
div.os_upgrade .case {
  margin: 0 auto 40px auto;;
  width: 620px;
}
div.os_upgrade .case h4 {
  background-color: var(--light-gray);
  border-left: solid 6px var(--red);
  color: var(--gray);
  font-size: 1.25em;
  font-weight: bold;
  height: 1.85em;
  line-height: 1.85em;
  margin: 0 0 15px 0;
  padding: 0 0 0 10px;
  text-align: left;
}
div.os_upgrade .case > div {
  margin-bottom: 30px;
}
div.os_upgrade .case h4 + div {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
div.os_upgrade .case p {
  line-height: 1.6;
  text-align: left;
  width: 375px;
}
div.os_upgrade .case p strong {
  font-weight: normal;
}
div.os_upgrade .case .img {
  width: 210px;
}
div.os_upgrade .check {
  margin: 0 auto 40px auto;
  text-align: left;
  width: 620px;
}
div.os_upgrade .check p:nth-of-type(1) {
  background-color: var(--red);
  color: #FFF;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0 !important;
  padding: 0.25em 0.75em;
}
div.os_upgrade .check p:nth-of-type(1) img {
  vertical-align: middle;
  margin-right: 0.5em;
  width: 22px;
}
div.os_upgrade .check p:nth-of-type(2) {
  background-color: var(--light-red);
  border: solid 2px var(--red);
  line-height: 1.6;
  font-size: 1.15em;
  padding: 1em 0;
  text-align: center;
}
div.os_upgrade .shop {
  margin: 80px auto 40px auto;
  position: relative;
  width: 620px;
}
div.os_upgrade .shop h4 {
  position: absolute;
  text-align: center;
  top: -20px;
  left: 0;
  right: 0;
  margin: auto;
}
div.os_upgrade .shop h4 p {
  background-color: var(--blue);
  border-radius: 10px;
  color: #FFF;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  position: relative;
  font-size: 1.55em;
  padding: 0.2em 1em;
}
div.os_upgrade .shop h4 p::before {
  border: 15px solid transparent;
  border-top: 15px solid var(--blue);
  content: "";
  left: 50%;
  margin-left: -15px;
  position: absolute;
  top: 100%;
}
div.os_upgrade .shop > div {
  align-items: center;
  background-color: var(--light-blue);
  display: flex;
  justify-content: space-between;
  padding: 50px 30px 30px 30px;
}
div.os_upgrade .shop .img {
  width: 315px;
}
div.os_upgrade .shop .img + div {
  text-align: left;
  width: 240px;
}
div.os_upgrade .shop .img + div ul {
  background-color: #FFF;
  line-height: 1.6;
  margin: 1em 0;
  padding: 0.75em;
}
div.os_upgrade .shop .img + div ul li::before {
  content: "●";
  color: var(--blue);
  font-size: 0.5em;
  padding-right: 0.25em;
}
div.os_upgrade .shop .img + div strong {
  font-size: 2em;
}
div.os_upgrade .catch {
  color: var(--gray);
  display: flex;
  font-size: 2em;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 40px;
  text-align: center;
}
div.os_upgrade .catch::before,
div.os_upgrade .catch::after {
  background-image: url("../os_upgrade/img/catch_bg.svg");
  background-position: bottom;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 78px;
  margin: 0 0.5em;
  width: 50px;
}
div.os_upgrade .catch::after {
  transform: scale(-1, 1);
}
div.os_upgrade .price {
  margin: 0 auto 30px auto;
  width: 620px;
}
div.os_upgrade .price p {
  margin-bottom: 0 !important;
}
div.os_upgrade .price .upgrade {
  background-color: var(--light-red);
  margin-bottom: 20px;
  padding: 50px 20px 20px 20px;
  position: relative;
}
div.os_upgrade .price .upgrade h4 {
  color: #FFF;
  font-size: 1.25em;
  font-weight: bold;
  left: 0;
  margin: auto;
  position: absolute;
  text-align: center;
  right: 0;
  top: -20px;
}
div.os_upgrade .price .upgrade h4 p {
  background-color: var(--red);
  display: inline-block;
  font-size: 1.25em;
  padding: 0.5em 1em;
}
div.os_upgrade .price .upgrade ul.img {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
div.os_upgrade .price .upgrade ul.img li {
  background-color: #FFF;
  border-radius: 10px;
  padding: 1.5em 0;
  text-align: center;
  width: 283px;
}
div.os_upgrade .price .upgrade ul.img li img {
  width: 253px;
}
div.os_upgrade .price .upgrade ul.img + div {
  align-items: center;
  display: flex;
  justify-content: center;
}
div.os_upgrade .price .upgrade ul.img + div .date {
  background-color: var(--red);
  color: #FFF;
  font-size: 1.25em;
  font-weight: bold;
  margin: 0 0.25em;
  padding: 0.25em 0.75em;
}
div.os_upgrade .price .upgrade ul.img + div .date + p {
  color: var(--red);
  font-size: 2.75em;
  font-weight: bold;
}
div.os_upgrade .price .upgrade ul.img + div .date + p span {
  font-size: 0.75em;
  padding-right: 0.15em;
}
div.os_upgrade .price .upgrade ul.img + div .date + p::after {
  color: #000;
  content: "(税込)";
  font-size: 0.35em;
  font-weight: normal;
}
div.os_upgrade .price .update {
  align-items: center;
  display: flex;
  justify-content: center;
}
div.os_upgrade .price .update p:nth-of-type(1) {
  color: var(--gray);
  font-size: 1.15em;
  font-weight: bold;
  margin-right: 15px;
}
div.os_upgrade .price .update p:nth-of-type(1)::before {
  color: var(--red);
  content: "●";
  font-size: 0.85em;
  padding-right: 0.15em;
  vertical-align: middle;
}
div.os_upgrade .price .update p:nth-of-type(2) {
  color: var(--red);
  font-size: 1.75em;
  font-weight: bold;
}
div.os_upgrade .price .update p:nth-of-type(2) span {
  font-size: 0.75em;
  padding-right: 0.15em;
}
div.os_upgrade .price .update p:nth-of-type(2)::after {
  color: #000;
  content: "(税込)";
  font-size: 0.35em;
  font-weight: normal;
}
div.os_upgrade .price .note {
  text-align: left;
}
div.os_upgrade .contact {
  margin: 0 auto 40px auto;
  text-align: center;
  width: 620px;
}
div.os_upgrade .contact h4 {
  align-content: center;
  color: var(--gray);
  display: flex;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
  justify-content: space-between;
}
div.os_upgrade .contact h4::before,
div.os_upgrade .contact h4::after {
  content: "";
  background-image: url("../os_upgrade/img/border_bg.png");
  background-position: center;
  background-repeat: repeat-x;
  display: block;
  height: 1em;
  width: 18%;
}
div.os_upgrade .contact .btn {
  background-color: var(--blue);
  border-bottom: solid 4px #004093;
  border-radius: 10px;
  height: 4em;
  margin: 0 auto;
  width: 80%;
}
div.os_upgrade .contact .btn:hover {
  border-bottom: none;
  margin-bottom: 4px;
  transform: translateY(4px);
}
div.os_upgrade .contact .btn a {
  color: #FFF;
  display: block;
  font-size: 1.65em;
  font-weight: bold;
  padding: 0.55em 0;
  text-decoration: none;
}
div.os_upgrade .contact .btn a::before {
  content: "";
  background-image: url("../os_upgrade/img/icon_shop.svg");
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 33px;
  vertical-align: middle;
  width: 42px;
}
div.os_upgrade .contact .tel {
  padding-top: 2em;
}
div.os_upgrade .contact .tel p {
  margin-bottom: 0 !important;
}
div.os_upgrade .contact .tel p:nth-of-type(1) {
  color: var(--gray);
  font-size: 1.5em;
  font-weight: bold;
}
div.os_upgrade .contact .num {
  align-items: center;
  color: var(--gray);
  display: flex;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 4em;
}
div.os_upgrade .contact .num img {
  height: 52px;
  margin-right: 10px;
  width: 50px;
}