/* Scss Document */ /* Scss Document */
.page_ttl {
  position: relative;
  height: 581px;
  padding: 0;
  background: url("../images/important/page_ttl_bg.png") top center no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 1919px) {
  .page_ttl {
    height: calc((581/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .page_ttl {
    height: calc((360/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .page_ttl {
    height: calc((190/600) * 100vw);
  }
}
.page_ttl h1 {
  position: absolute;
  top: 270px;
  right: 50%;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  width: auto;
  height: auto;
  background: none;
  color: #008000;
  font-size: 6rem;
}
@media only screen and (max-width: 1919px) {
  .page_ttl h1 {
    top: calc((270/1920) * 100vw);
    font-size: calc((60/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .page_ttl h1 {
    top: calc((160/1200) * 100vw);
    font-size: calc((40/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .page_ttl h1 {
    top: calc((60/600) * 100vw);
    padding: 0 calc((40/600) * 100vw) 0 0;
    font-size: calc((30/600) * 100vw);
  }
}
.page_ttl h1:before {
  position: absolute;
  top: -140px;
  left: -120px;
  content: "";
  width: 347px;
  height: 167px;
  background: url("../images/important/page_ttl_baloon.png") top left no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 1919px) {
  .page_ttl h1:before {
    top: calc((-140/1920) * 100vw);
    left: calc((-120/1920) * 100vw);
    width: calc((347/1920) * 100vw);
    height: calc((167/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .page_ttl h1:before {
    top: calc((-90/1200) * 100vw);
    left: calc((-90/1200) * 100vw);
    width: calc((245/1200) * 100vw);
    height: calc((120/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .page_ttl h1:before {
    top: calc((-55/600) * 100vw);
    left: calc((-80/600) * 100vw);
    width: calc((165/600) * 100vw);
    height: calc((80/600) * 100vw);
  }
}

.important .inner {
  padding: 0 125px;
}
@media only screen and (max-width: 1919px) {
  .important .inner {
    padding: 0 calc((125/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .inner {
    padding: 0 calc((30/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .inner {
    padding: 0 calc((20/600) * 100vw);
  }
}
.important .important_text {
  margin-bottom: 65px;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 1919px) {
  .important .important_text {
    margin-bottom: calc((65/1920) * 100vw);
    font-size: calc((32/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_text {
    margin-bottom: calc((40/1200) * 100vw);
    font-size: calc((20/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_text {
    margin-bottom: calc((60/600) * 100vw);
    font-size: calc((22/600) * 100vw);
  }
}
.important .important_img {
  text-align: center;
}
.important .important_img img {
  width: 760px;
}
@media only screen and (max-width: 1919px) {
  .important .important_img img {
    width: calc((760/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_img img {
    width: calc((700/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_img img {
    width: 100%;
  }
}
.important .important_lttl {
  margin: 160px 0 40px;
  padding: 0 0 30px;
  background: url("../images/important/important_lttl_bg.png") bottom center no-repeat;
  background-size: 1270px;
  text-align: center;
  margin: calc((160/1920) * 100vw) 0 calc((40/1920) * 100vw);
  padding-bottom: calc((30/1920) * 100vw);
  background-size: calc((1270/1920) * 100vw);
}
@media only screen and (max-width: 1200px) {
  .important .important_lttl {
    margin: calc((120/1200) * 100vw) 0 calc((30/1200) * 100vw);
    padding: 0 calc((180/1200) * 100vw) calc((20/1200) * 100vw);
    background-size: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .important .important_lttl {
    margin: calc((120/600) * 100vw) 0 calc((60/600) * 100vw);
    padding: 0;
    background: none;
  }
}
.important .important_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 640px) {
  .important .important_list {
    display: block;
  }
}
.important .important_list li {
  position: relative;
  width: 415px;
  padding: 30px;
  background: #FFF;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 14px -7px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 14px -7px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 1919px) {
  .important .important_list li {
    width: calc((415/1920) * 100vw);
    padding: calc((30/1920) * 100vw);
    border-radius: calc((20/1920) * 100vw);
    -webkit-box-shadow: 0 0 calc((14/1920) * 100vw) calc((-7/1920) * 100vw) rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 calc((14/1920) * 100vw) calc((-7/1920) * 100vw) rgba(0, 0, 0, 0.5);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_list li {
    width: calc((315/1200) * 100vw);
    padding: calc((20/1200) * 100vw);
    border-radius: calc((20/1200) * 100vw);
    -webkit-box-shadow: 0 0 calc((10/1200) * 100vw) calc((-5/1200) * 100vw) rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 calc((10/1200) * 100vw) calc((-5/1200) * 100vw) rgba(0, 0, 0, 0.5);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_list li {
    width: 100%;
    margin-top: calc((60/600) * 100vw);
    padding: calc((30/600) * 100vw);
    border-radius: calc((20/600) * 100vw);
    -webkit-box-shadow: 0 0 calc((14/600) * 100vw) calc((-7/600) * 100vw) rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 calc((14/600) * 100vw) calc((-7/600) * 100vw) rgba(0, 0, 0, 0.5);
  }
}
.important .important_list li:after {
  position: absolute;
  top: 50%;
  right: -36px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  width: 35px;
  height: 97px;
  background: url("../images/important/important_list_arrow.png") top center no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 1919px) {
  .important .important_list li:after {
    right: calc((-36/1920) * 100vw);
    width: calc((35/1920) * 100vw);
    height: calc((97/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_list li:after {
    right: calc((-35/1200) * 100vw);
    width: calc((35/1200) * 100vw);
    height: calc((90/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_list li:after {
    top: auto;
    right: auto;
    bottom: calc((-65/600) * 100vw);
    left: 50%;
    width: calc((35/600) * 100vw);
    height: calc((97/600) * 100vw);
    -webkit-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
  }
}
.important .important_list li:last-child:after {
  content: none;
}
.important .important_list li:last-child .ttl {
  background: #e50012;
}
.important .important_list li:last-child .condition dt {
  color: #e50012;
}
.important .important_list .ttl {
  padding: 0.2em;
  background: #8dc21f;
  border-radius: 10px;
  color: #FFF;
  font-size: 3.2rem;
}
@media only screen and (max-width: 1919px) {
  .important .important_list .ttl {
    border-radius: calc((10/1920) * 100vw);
    font-size: calc((32/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_list .ttl {
    border-radius: calc((10/1200) * 100vw);
    font-size: calc((24/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_list .ttl {
    font-size: calc((32/600) * 100vw);
  }
}
.important .important_list .condition {
  margin-bottom: 0.7em;
}
.important .important_list .condition dt,
.important .important_list .condition dd {
  border-bottom: #CCC 1px solid;
}
.important .important_list .condition dt {
  padding: 0.3em 0;
  font-size: 3rem;
  letter-spacing: 0.15em;
}
@media only screen and (max-width: 1919px) {
  .important .important_list .condition dt {
    font-size: calc((30/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_list .condition dt {
    font-size: calc((24/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_list .condition dt {
    font-size: calc((30/600) * 100vw);
  }
}
.important .important_list .condition dd {
  padding: 0.7em 0;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 1919px) {
  .important .important_list .condition dd {
    font-size: calc((22/1920) * 100vw);
  }
}
@media only screen and (max-width: 1200px) {
  .important .important_list .condition dd {
    font-size: calc((16/1200) * 100vw);
  }
}
@media only screen and (max-width: 640px) {
  .important .important_list .condition dd {
    font-size: calc((24/600) * 100vw);
  }
}