@charset "UTF-8";
/*********************************************************
agency
*********************************************************/
.agency .wrapper_1 {
  background: url("image.php?id=022");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 50px 0;
}

.agency .wrapper_1 .flask {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}

.agency .wrapper_1 .flask .introduction p {
  color: #424242;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 30px;
  text-align: center;
}

.agency .wrapper_1 .flask .introduction p:nth-of-type(n+2) {
  margin: 20px 0 0 0;
}

.agency .wrapper_1 .flask .image {
  width: 50%;
  margin: 50px auto 0 auto;
  box-sizing: border-box;
  font-size: 0;
}

.agency .wrapper_1 .flask .image p {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
}

.agency .wrapper_1 .flask .image p img {
  display: inline-block;
  width: 100%;
  max-width: 190px;
}

.wrapper_2 {
  padding: 50px 0;
}

.agency .wrapper_2 .flask {
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}

.agency .wrapper_2 .flask .subtitle {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}

.agency .wrapper_2 .flask .subtitle:nth-of-type(n+2) {
  margin: 50px auto 0 auto;
}

.agency .wrapper_2 .flask .subtitle h3 {
  display: inline-block;
  padding: 0 0 20px 0;
  border-color: #084B8A;
  border-width: 0 0 5px 0;
  border-style: solid;
  color: #084B8A;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 6px;
  line-height: 40px;
}

@media (max-width: 768px) {
  .agency .wrapper_2 .flask .subtitle h3 {
    font-size: 18px;
    line-height: 1.5;
  }
}
.agency .wrapper_2 .flask .number article {
  display: flex;
  align-items: center;
  margin: 50px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  background: url(image.php?id=021);
}

@media (max-width: 480px) {
  .agency .wrapper_2 .flask .number article {
    flex-direction: column;
  }
}
.agency .wrapper_2 .flask .number article:nth-of-type(n+2) {
  margin: 20px 0 0 0;
}

.agency .wrapper_2 .flask .number article p.text1 {
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  margin-right: 10px;
  width: 50px;
}

.agency .wrapper_2 .flask .number article p.text2 {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 30px;
}

@media (max-width: 768px) {
  .agency .wrapper_2 .flask .number article p.text2 {
    font-size: 18px;
  }
}
.agency .wrapper_2 .flask .number article p.text2 span {
  display: block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 20px;
}

.agency .wrapper_2 .flask .number article:nth-of-type(5) p.text2 span {
  color: #ffff00;
}

.agency .wrapper_3 {
  background: url("image.php?id=022");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 50px 0;
}

.agency .wrapper_3 .flask {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}

.agency .wrapper_3 .flask .subtitle {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}

.agency .wrapper_3 .flask .subtitle:nth-of-type(n+2) {
  margin: 50px auto 0 auto;
}

.agency .wrapper_3 .flask .subtitle h3 {
  display: inline-block;
  padding: 0 0 20px 0;
  border-color: #084B8A;
  border-width: 0 0 5px 0;
  border-style: solid;
  color: #084B8A;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 6px;
  line-height: 40px;
}

@media (max-width: 768px) {
  .agency .wrapper_3 .flask .subtitle h3 {
    font-size: 18px;
  }
}
.agency .wrapper_3 .flask .overview {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 50px 0 0 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .agency .wrapper_3 .flask .overview {
    flex-direction: column-reverse;
  }
}
@media (max-width: 480px) {
  .agency .wrapper_3 .flask .overview {
    margin-top: 30px;
  }
}
.agency .wrapper_3 .overview .left {
  width: 65%;
  padding: 0 10% 0 0;
  vertical-align: middle;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .agency .wrapper_3 .overview .left {
    padding: 0;
    width: 100%;
  }
}
.agency .wrapper_3 .overview .left dl {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.agency .wrapper_3 .overview .left dl dt {
  width: 30%;
  padding: 10px 10px 10px 0;
  border-bottom: solid #424242 1px;
  box-sizing: border-box;
  color: #424242;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 4px;
}

@media (max-width: 600px) {
  .agency .wrapper_3 .overview .left dl dt {
    font-size: 14px;
  }
}
.agency .wrapper_3 .overview .left dl dd {
  width: 70%;
  padding: 10px 0;
  border-bottom: solid #424242 1px;
  box-sizing: border-box;
  color: #424242;
  letter-spacing: 4px;
}

@media (max-width: 600px) {
  .agency .wrapper_3 .overview .left dl dd {
    font-size: 14px;
  }
}
.agency .wrapper_3 .overview .right {
  width: 30%;
  vertical-align: middle;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .agency .wrapper_3 .overview .right {
    text-align: center;
    width: 100%;
  }
}
.agency .wrapper_3 .overview .right p img {
  display: inline-block;
}

.agency .wrapper_4 {
  padding: 100px 0;
}

.agency .wrapper_4 .flask {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}

.agency01,
.agency02,
.agency03,
.agency04 {
  margin-top: 50px;
}

.agency-ttl-wrapper {
  background: #1c149b;
  margin-top: 30px;
  padding: 30px;
  text-align: center;
}

@media (max-width: 480px) {
  .agency-ttl-wrapper {
    padding: 20px;
  }
}
.agency-ttl {
  color: #1c149b;
  font-size: 36px;
  font-weight: bold;
  position: relative;
  padding: 16px 32px 24px;
  background: #fff;
}

@media (max-width: 550px) {
  .agency-ttl {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .agency-ttl {
    padding: 10px 16px 18px;
  }
}
@media (max-width: 330px) {
  .agency-ttl {
    font-size: 18px;
  }
}
.agency-ttl::before {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  content: "";
  border: 4px solid #a4d4ff;
}

@media (max-width: 480px) {
  .agency-ttl::before {
    top: -12px;
    left: -10px;
  }
}
.agency-ttl strong {
  font-size: 200%;
}

@media (max-width: 380px) {
  .agency-ttl strong {
    font-size: 150%;
  }
}
.agency01__container {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .agency01__container {
    flex-direction: column-reverse;
  }
}
.agency01__container p {
  margin-top: 1em;
}

.agency01__img {
  width: 25%;
}

@media (max-width: 768px) {
  .agency01__img {
    margin-top: 15px;
    text-align: center;
    width: 100%;
  }
}
.agency01__txt {
  width: 70%;
}

@media (max-width: 768px) {
  .agency01__txt {
    width: 100%;
  }
}
.agency-contact {
  margin-top: 50px;
  text-align: center;
}

.agency-contact a:hover {
  opacity: 0.8;
}

@media (min-width: 601px) {
  .agency-contact a img {
    width: 700px;
  }
}
.agency-contact__note {
  display: inline-block;
}

.agency-contact__note p {
  color: #f00;
  font-size: 14px;
  font-weight: bold;
  padding-left: 1.5em;
  position: relative;
  text-align: left;
}

.agency-contact__note p::before {
  content: "※";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

.agency-ttl02 {
  color: #999;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 50px;
  text-align: center;
}

@media (max-width: 480px) {
  .agency-ttl02 {
    font-size: 24px;
    margin-bottom: 30px;
  }
}
@media (max-width: 480px) {
  .agency02 .content-ttl {
    font-size: 22px;
    font-size: 7vw;
  }
}
.agency02__content,
.agency04__content {
  font-size: 18px;
  margin: 5px 0 0 80px;
}

@media (max-width: 768px) {
  .agency02__content,
  .agency04__content {
    margin: 5px 0 0 4em;
  }
}
@media (max-width: 480px) {
  .agency02__content,
  .agency04__content {
    font-size: 16px;
    margin: 5px 0 0 3em;
  }
}
.agency02__container,
.agency04__container {
  margin-top: 30px;
}

.agency03__table {
  border: 1px solid #333;
  margin-top: 30px;
}

.agency03__header {
  display: flex;
}

@media (max-width: 480px) {
  .agency03__header {
    display: block;
  }
}
.agency03__header .agency03__th {
  border-top: none;
}

.agency03__box {
  flex: 1;
  width: 33.3333%;
}

@media (max-width: 480px) {
  .agency03__box {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .agency03__box:nth-child(2) {
    border-top: 1px solid #333;
  }
}
.agency03__box:nth-child(2) .agency03__th,
.agency03__box:nth-child(2) .agency03__td {
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

@media (max-width: 480px) {
  .agency03__box:nth-child(2) .agency03__th,
  .agency03__box:nth-child(2) .agency03__td {
    border-left: none;
    border-right: none;
  }
}
@media (max-width: 480px) {
  .agency03__box:nth-child(3) {
    border-top: 1px solid #333;
  }
}
.agency03__th,
.agency03__td {
  padding: 10px;
}

.agency03__th {
  background: #5eb3ff;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 480px) {
  .agency03__th {
    text-align: center;
  }
}
.agency03__td dt {
  font-weight: bold;
}

.agency03__td dd {
  margin: 0.2em 0 0 1em;
  text-indent: -1em;
}

.agency03__td dd:nth-child(2) {
  margin-top: 1em;
}

.agency03__td p:not(:first-child) {
  margin-top: 1em;
}

/*********************************************************
base
*********************************************************/
* {
  box-sizing: border-box;
}

body {
  color: #333333;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  height: auto;
  max-width: 100%;
}

li {
  list-style: none;
}

span {
  font-weight: inherit;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*********************************************************
breadcrumbs
*********************************************************/
.breadcrumbs {
  display: flex;
  justify-content: center;
  margin: 30px 0 15px;
  text-align: center;
}

.breadcrumbs__item {
  font-size: 14px;
}

.breadcrumbs__item a {
  color: #247bfd;
  display: inline-block;
  padding-right: 20px;
  position: relative;
  text-decoration: underline;
}

.breadcrumbs__item a::after {
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  content: "";
  margin-top: -3.5px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: rotate(45deg);
  width: 7px;
  height: 7px;
}

.breadcrumbs__item a:hover {
  text-decoration: none;
}

/*********************************************************
btn
*********************************************************/
.btn,
.btn_close {
  background: #ddd;
  margin-top: 10px;
  padding: 5px;
  position: relative;
}

.btn::before,
.btn_close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
}

.btn::before {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  transform: rotate(135deg);
  margin-top: -8px;
}

.btn_close::before {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  transform: rotate(-45deg);
  margin-top: -2px;
}

/*********************************************************
callcenter
*********************************************************/
.callcenter {
  background: orange;
  border-radius: 10px;
  margin: 100px auto 0;
  max-width: 850px;
  padding: 15px;
  position: relative;
}

@media (max-width: 600px) {
  .callcenter {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .callcenter {
    margin-top: 50px;
  }
}
.callcenter__inner {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
}

.callcenter__head {
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
  .callcenter__head {
    display: block;
    text-align: center;
  }
}
.callcenter__logo {
  margin-right: 30px;
}

@media (max-width: 600px) {
  .callcenter__logo {
    margin-right: 0;
  }
}
.callcenter__ttl {
  font-size: 24px;
  font-weight: bold;
}

@media (max-width: 400px) {
  .callcenter__ttl {
    font-size: 18px;
    margin-top: 15px;
  }
}
.callcenter__time {
  color: #787878;
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  margin: 15px 0 0 30px;
  padding: 0 15px;
  position: relative;
}

@media (max-width: 600px) {
  .callcenter__time {
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .callcenter__time {
    font-size: 18px;
  }
}
@media (max-width: 400px) {
  .callcenter__time {
    font-size: 14px;
  }
}
.callcenter__time::before, .callcenter__time::after {
  background: #787878;
  content: "";
  position: absolute;
  bottom: 14px;
  width: 20px;
  height: 2px;
}

@media (max-width: 400px) {
  .callcenter__time::before, .callcenter__time::after {
    bottom: 10px;
    width: 15px;
  }
}
.callcenter__time::before {
  left: -10px;
  transform: rotate(55deg);
}

.callcenter__time::after {
  right: -10px;
  transform: rotate(-55deg);
}

.callcenter__footer {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

@media (max-width: 480px) {
  .callcenter__footer {
    font-size: 16px;
  }
}
.callcenter__img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
}

@media (max-width: 900px) {
  .callcenter__img {
    width: 200px;
  }
}
@media (max-width: 768px) {
  .callcenter__img {
    width: 150px;
  }
}
@media (max-width: 600px) {
  .callcenter__img {
    display: none;
  }
}
.callcenter__img img {
  display: block;
}

/*********************************************************
campaign
*********************************************************/
.campaign__mv {
  background-image: url(image.php?id=029);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 20% 0;
  position: relative;
}

.campaign__pico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.campaign__100s {
  background-image: linear-gradient(to right, #53a9cc 0, #53a9cc 70%, #4785b9 70%, #4785b9 85%, #506688 85%, #506688 100%);
  color: #fff;
  font-family: Impact, Arial;
  font-size: 160px;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .campaign__100s {
    font-size: 110px;
  }
}
@media (max-width: 800px) {
  .campaign__100s {
    font-size: 80px;
  }
}
@media (max-width: 600px) {
  .campaign__100s {
    font-size: 50px;
  }
}
@media (max-width: 440px) {
  .campaign__100s {
    font-size: 48px;
    font-size: 12vw;
  }
}
.campaign__wrapper {
  margin-top: 50px;
  position: relative;
  text-align: center;
}

@media (max-width: 480px) {
  .campaign__wrapper {
    margin-top: 30px;
  }
}
.campaign__10,
.campaign__month,
.campaign__cp {
  color: #000;
  font-weight: bold;
}

.campaign__month {
  display: flex;
  align-items: center;
  padding-left: 350px;
}

@media (max-width: 1024px) {
  .campaign__month {
    padding-left: 33%;
  }
}
.campaign__month p {
  font-size: 120px;
  font-weight: bold;
  position: relative;
}

@media (max-width: 1024px) {
  .campaign__month p {
    font-size: 80px;
    font-size: 10.9vw;
  }
}
.campaign__month p:first-child {
  font-size: 90px;
  margin-right: 10px;
}

@media (max-width: 1024px) {
  .campaign__month p:first-child {
    font-size: 50px;
    font-size: 8.1vw;
  }
}
.campaign__month p:first-child::before, .campaign__month p:first-child::after {
  background: #000;
  content: "";
  position: absolute;
  left: -2.5%;
  width: 105%;
  height: 2px;
}

.campaign__month p:first-child::before {
  top: 15px;
}

@media (max-width: 1024px) {
  .campaign__month p:first-child::before {
    top: 5%;
  }
}
.campaign__month p:first-child::after {
  bottom: 15px;
}

@media (max-width: 1024px) {
  .campaign__month p:first-child::after {
    bottom: 5%;
  }
}
.campaign__month p:first-child::first-letter {
  font-size: 140%;
}

.campaign__10 {
  background: #66cdba;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  padding: 15px;
  position: absolute;
  top: 0;
  left: 150px;
  width: 180px;
  height: 180px;
}

@media (max-width: 1024px) {
  .campaign__10 {
    font-size: 18px;
    font-size: 3.2vw;
    left: 13%;
    padding: 0;
    width: 18vw;
    height: 18vw;
  }
}
.campaign__10 p {
  font-family: Arial;
  font-size: 90px;
  font-weight: bold;
}

@media (max-width: 1024px) {
  .campaign__10 p {
    font-size: 60px;
    font-size: 8.1vw;
  }
}
.campaign__10 p span {
  font-size: 36px;
}

@media (max-width: 1024px) {
  .campaign__10 p span {
    font-size: 20px;
    font-size: 3.2vw;
  }
}
.campaign__cp {
  font-size: 120px;
}

@media (max-width: 1024px) {
  .campaign__cp {
    font-size: 80px;
    font-size: 10.9vw;
  }
}
.campaign__txt {
  background: #a2a0ff;
  color: #000;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 0.07em;
  margin-top: 30px;
  padding: 30px;
  text-shadow: #fff 0 0 6px, #fff 0 0 6px;
}

@media (max-width: 1024px) {
  .campaign__txt {
    font-size: 24px;
    padding: 5%;
  }
}
@media (max-width: 480px) {
  .campaign__txt {
    font-size: 18px;
    font-size: 3.7vw;
    margin-top: 15px;
  }
}
.campaign__btn {
  box-sizing: border-box;
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  margin: 30px auto 0;
  text-align: center;
  width: 600px;
}
@media (max-width: 610px) {
  .campaign__btn {
    font-size: 36px;
    width: 90%;
  }
}
@media (max-width: 480px) {
  .campaign__btn {
    font-size: 18px;
  }
}
.campaign__btn a {
  background: #66cdba;
  border-radius: 30px;
  display: block;
  padding: 30px;
}
.campaign__btn a:hover {
  background: #40c0a9;
}
@media (max-width: 480px) {
  .campaign__btn a a {
    padding: 15px;
  }
}
.campaign__btn.-utm a {
  background: #267cc7;
}
.campaign__btn.-utm a:hover {
  background: #245eb4;
}
.campaign__btn.-contact a {
  background: #ffbe5c;
}
.campaign__btn.-contact a:hover {
  background: #e0a64f;
}

.campaign__note {
  color: #f00;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}

.cp-banner {
  background: #66cdba;
  margin-top: 50px;
}

.cp-banner__ttl {
  display: flex;
  align-items: center;
  font-size: 36px;
  font-weight: bold;
  padding: 10px;
}

@media (max-width: 768px) {
  .cp-banner__ttl {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .cp-banner__ttl {
    display: block;
    font-size: 36px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .cp-banner__ttl {
    font-size: 24px;
    font-size: 7.5vw;
  }
}
.cp-banner__ttl p {
  font-weight: bold;
}

.cp-banner__ttl p:first-child {
  margin-right: 10px;
}

@media (max-width: 600px) {
  .cp-banner__ttl p:first-child {
    margin-right: 0;
  }
}
.cp-banner__ttl p:first-child img {
  vertical-align: bottom;
}

.cp-banner__ttl p:last-child {
  letter-spacing: 0.07em;
}

@media (max-width: 600px) {
  .cp-banner__ttl p:last-child {
    margin-top: 10px;
  }
}
.cp-banner__img {
  text-align: center;
}

.cp-banner__img img {
  vertical-align: bottom;
}

.limit {
  border: 2px solid #333;
  border-radius: 10px;
  display: flex;
  align-items: center;
  margin: 15px auto;
  overflow: hidden;
}

@media (min-width: 481px) {
  .limit {
    margin: 15px auto;
    max-width: 500px;
  }
}
@media (max-width: 480px) {
  .limit {
    display: block;
  }
}
.limit__1 {
  background: #cd0000;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 50px;
  text-align: center;
}

@media (max-width: 480px) {
  .limit__1 {
    padding: 10px;
  }
}
.limit__2 {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  .limit__2 {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .limit__2 {
    font-size: 18px;
  }
}
@media (max-width: 350px) {
  .limit__2 {
    font-size: 16px;
  }
}
@media (max-width: 320px) {
  .limit__2 {
    font-size: 14px;
  }
}
.limit__2 span {
  color: #cd0000;
  font-size: 120%;
  font-weight: bold;
}

.pack {
  margin-top: 50px;
  text-align: center;
}

.pack__txt {
  height: 50px;
  position: relative;
}

.pack__border span {
  background: #000;
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  z-index: -2;
}
.pack__border span::before, .pack__border span::after {
  background: #000;
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
}
.pack__border span::before {
  margin-left: -45px;
}
.pack__border span::after {
  margin-left: 45px;
}

.pack__circle span {
  background: #fff;
  border-radius: 50%;
  color: #267cc7;
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
}
.pack__circle span:first-child {
  margin-left: -45px;
}
.pack__circle span:last-child {
  margin-left: 45px;
}

.pack__txt2 {
  font-size: 22px;
  margin-top: 15px;
}
@media (max-width: 480px) {
  .pack__txt2 {
    font-size: 18px;
  }
}

.pack__txt3 {
  font-size: 40px;
  font-weight: bold;
  margin-top: 15px;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .pack__txt3 {
    font-size: 30px;
    font-size: 6.6vw;
  }
}

.pack__price {
  border-color: #267cc7;
  border-style: solid;
  border-width: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px auto 0;
  max-width: 600px;
  padding: 10px;
}

.pack__monthly {
  display: flex;
  font-size: 48px;
  margin-right: 15px;
}
@media (max-width: 600px) {
  .pack__monthly {
    font-size: 36px;
    font-size: 8vw;
  }
}
.pack__monthly span {
  align-self: flex-end;
}
.pack__monthly strong {
  color: #ff008d;
  font-size: 170%;
  line-height: 1.2;
}

.pack__payment p {
  font-size: 30px;
}
@media (max-width: 600px) {
  .pack__payment p {
    font-size: 20px;
    font-size: 5vw;
  }
}
.pack__payment p:first-child {
  background: #267cc7;
  color: #fff;
  padding-top: 3px;
}
.pack__payment p:last-child {
  color: #267cc7;
}

.pack__txt4 {
  font-size: 24px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .pack__txt4 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .pack__txt5 {
    font-size: 14px;
    margin-top: 10px;
  }
}

/*********************************************************
case
*********************************************************/
.case__container {
  margin-top: 50px;
}

.case__ttl {
  background: #ffe0a7;
  display: inline-block;
  letter-spacing: 0.07em;
  padding: 3px 5px;
  text-align: center;
}

.case__total {
  font-size: 14px;
  margin-top: 15px;
}

/* case-list */
.case-list {
  margin-top: 30px;
}

@media (min-width: 601px) {
  .case-list.-df {
    display: flex;
    align-items: center;
  }
}
.case-list__ttl {
  font-size: 18px;
  font-weight: bold;
}

@media (min-width: 601px) {
  .-df .case-list__ttl {
    margin-right: 50px;
  }
}
.case-list__content {
  margin-top: 10px;
}

@media (min-width: 601px) {
  .-df .case-list__content {
    margin-top: 0;
  }
}
.case-list__content p {
  margin-top: 0.5em;
}

.case-list__content p:first-child {
  margin-top: 0;
}

.clase-list__list li {
  list-style: disc;
  margin-left: 1.5em;
}

.case-list__link,
.case-box__link {
  color: blue;
  text-decoration: underline;
  word-break: break-all;
}

.case-list__link:hover,
.case-box__link:hover {
  text-decoration: none;
}

@media (max-width: 600px) {
  .case-list__img {
    text-align: center;
  }
}
.case-list__img img {
  width: 400px;
}

/* case-box */
.case-box {
  margin-top: 30px;
}

@media (min-width: 601px) {
  .case-box {
    display: flex;
    align-items: center;
  }
}
@media (min-width: 601px) {
  .case-box__ttl {
    margin-right: 50px;
  }
}
@media (max-width: 600px) {
  .case-box__img {
    margin-top: 0.5em;
    text-align: center;
  }
}
.case-box__img img {
  width: 400px;
}

.-case .caselist__container {
  display: block;
}

.-case .caselist__ttl {
  text-decoration: none;
}

.-case .caselist__img {
  margin-top: 15px;
  text-align: center;
}

.-case .caselist__img img {
  width: 90%;
  max-width: 500px;
}

.case__body {
  margin-top: 30px;
}

.case__top {
  background: #333;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px;
}

.case-dl {
  margin-top: 50px;
}

.case-dl__dt {
  border-left: 10px solid #3bb0da;
  color: #3bb0da;
  font-weight: bold;
  padding-left: 15px;
}

.case-dl__dd {
  margin-top: 15px;
}

.case-dl__list {
  margin-left: 2em;
}

.case-dl__list li {
  line-height: 1.2;
  list-style-type: disc;
}

.case-dl__list li:not(:first-child) {
  margin-top: 10px;
}

.case-utm {
  border: 3px solid #efefef;
  border-radius: 15px;
  margin-top: 50px;
  padding: 30px;
}

@media (max-width: 480px) {
  .case-utm {
    padding: 15px;
  }
}
.case-utm__dt {
  color: #3bb0da;
  font-size: 36px;
  text-align: center;
}

@media (max-width: 480px) {
  .case-utm__dt {
    font-size: 24px;
  }
}
.case-utm__list {
  margin: 30px auto 0;
  width: 90%;
  max-width: 700px;
}

.case-utm__list li {
  font-weight: bold;
  list-style-type: disc;
}

.case-utm__list li:not(:first-child) {
  margin-top: 10px;
}

/*********************************************************
caselist
*********************************************************/
.caselist__overseas {
  margin-top: 30px;
  text-align: center;
}

.caselist__overseas a {
  border-bottom: 1px solid #1e6bc9;
  color: #1e6bc9;
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.15em;
  padding: 10px 35px 3px 5px;
  position: relative;
}

.caselist__overseas a::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(45deg);
  content: "";
  margin-top: -3px;
  position: absolute;
  top: 50%;
  right: 17px;
  transition: 0.3s;
}

.caselist__overseas a:hover::after {
  right: 10px;
}

.caselist__wrapper {
  border-bottom: 2px dotted #333;
  display: block;
  margin-top: 50px;
  padding-bottom: 50px;
  position: relative;
}

.caselist__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.caselist__container {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 380px) {
  .caselist__container {
    display: block;
  }
}
.caselist__txt {
  overflow: hidden;
}

.caselist__ttl {
  color: #3bb0da;
  font-size: 24px;
  font-weight: bold;
  overflow: hidden;
  text-decoration: underline;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caselist__date {
  font-size: 14px;
  margin-top: 30px;
}

.category {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
}

.category dt {
  border: 1px solid #3bb0da;
  color: #3bb0da;
  margin-right: 10px;
  padding: 8px;
}

@media (max-width: 380px) {
  .caselist__img {
    margin-top: 10px;
    text-align: center;
  }
}
.caselist__img img {
  width: 200px;
}

.caselist .caselist__img {
  align-self: flex-end;
}

.pagination {
  margin-top: 30px;
  padding-top: 30px;
  text-align: center;
}

#prevpage,
#nextpage {
  display: inline-block;
  margin-top: 10px;
}

#prevpage a,
#nextpage a {
  white-space: nowrap;
}

#prevpage {
  margin-right: 10px;
}

#nextpage {
  margin-left: 10px;
}

.caselist #pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.caselist #pagination ul li {
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.caselist #pagination ul li:not(:last-child) {
  margin-right: 10px;
}

.caselist #pagination ul a {
  display: block;
  padding: 5px 10px;
}

.case-footer {
  background: #ececec;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding: 15px;
}

@media (max-width: 600px) {
  .case-footer {
    display: block;
  }
}
.case-footer dl {
  width: 30%;
}

@media (max-width: 600px) {
  .case-footer dl {
    width: 100%;
  }
  .case-footer dl:nth-child(2) {
    margin: 15px 0;
  }
}
.case-footer dt {
  background: #3bb0da;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.case-footer dd {
  overflow: hidden;
}

.case-footer dd p {
  background: #fff;
  white-space: nowrap;
}

.case-footer dd p:not(:last-child) {
  margin-bottom: 5px;
}

.case-footer dd a {
  color: #333;
  display: block;
  font-size: 14px;
  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
}

/*********************************************************
comingsoon
*********************************************************/
.comingsoon {
  font-size: 18px;
  font-weight: bold;
  padding: 100px 0;
  text-align: center;
}

.-bg .comingsoon {
  color: #fff;
}

.-bg .content-box .comingsoon {
  color: #333;
}

/*********************************************************
contact-btn
*********************************************************/
.contact-btn {
  margin: 50px auto 0;
  text-align: center;
}

@media (max-width: 480px) {
  .contact-btn {
    top: 38%;
    bottom: auto;
  }
}
@media (max-width: 400px) {
  .contact-btn {
    left: 0;
    margin-left: 2.5%;
    max-width: 95%;
    width: 95%;
  }
}
@media (max-width: 350px) {
  .contact-btn {
    font-size: 14px;
  }
}
.contact-btn a {
  background: orange;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.02em;
  padding: 15px 35px;
}

.contact-btn a:hover {
  background: #ffb733;
}

/*********************************************************
content-box
*********************************************************/
.content-box {
  background: #fff;
  box-shadow: 2px 2px 5px #ccc;
  margin-top: 50px;
  padding: 30px;
}

@media (max-width: 480px) {
  .content-box {
    padding: 15px;
  }
}
.content-box__ttl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.contact-tel {
  color: #246db4;
  margin-top: 30px;
  text-align: center;
}
.contact-tel p:first-child {
  font-size: 14px;
  font-weight: bold;
}
.contact-tel p:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  margin-top: 10px;
}
.contact-tel p:last-child img {
  margin-right: 10px;
  width: 30px;
}

/*********************************************************
emotet03
*********************************************************/
.emotet03.-bgi {
  background-image: url("image.php?id=022");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 30px;
  padding: 15px;
}

.emotet03__top-ttl {
  text-align: center;
}

.emotet03__top-ttl span {
  border-bottom: 5px solid #084B8A;
  color: #084b8a;
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 20px;
}

@media (max-width: 768px) {
  .emotet03__top-ttl span {
    padding-bottom: 10px;
  }
}
@media (max-width: 1200px) {
  .emotet03__top-ttl span {
    font-size: 20px;
  }
}
.emotet03__top {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 50px;
}

@media (max-width: 1200px) {
  .emotet03__top {
    margin-top: 20px;
  }
}
.emotet03__list {
  margin-top: 20px;
}

.emotet03__ttl {
  background: #ddf4fd;
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 1.3;
  padding: 10px;
}

@media (max-width: 480px) {
  .emotet03__ttl {
    display: block;
  }
}
.emotet03__ttl span {
  font-weight: bold;
}

.emotet03__num {
  color: #084b8a;
  font-size: 36px;
  margin-right: 10px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .emotet03__num {
    background: #084B8A;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 24px;
    line-height: 60px;
    margin: 0 auto;
    text-align: center;
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 480px) {
  .emotet03__txt {
    display: block;
    margin-top: 10px;
  }
}
.emotet03__content {
  background: #fff;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 15px;
  padding: 10px;
}

.emotet03__note {
  line-height: 1.5;
}

.emotet03__contact {
  margin-top: 30px;
  text-align: center;
}

/*********************************************************
feature
*********************************************************/
.feature__top {
  font-size: 24px;
  margin-top: 50px;
  text-align: center;
}

@media (max-width: 480px) {
  .feature__top {
    font-size: 18px;
    margin-top: 30px;
  }
}
.feature__container {
  margin-top: 50px;
}

.feature__item {
  padding: 0 50px;
  position: relative;
}

@media (min-width: 481px) {
  .feature__item::after {
    background: #ccc;
    content: "";
    margin-top: -15px;
    position: absolute;
    top: 120px;
    right: -24px;
    width: 1px;
    height: 50px;
  }
}
.feature__icon {
  font-size: 36px;
  text-align: center;
}

.feature__ttl {
  font-size: 18px;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
}

.feature__txt {
  font-size: 14px;
  margin-top: 15px;
}

.feature__img {
  margin-top: 30px;
  text-align: center;
}

/*********************************************************
feature-list
*********************************************************/
.feature-list {
  margin-top: 50px;
}

.feature-list__btn {
  background: #000;
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  position: relative;
}

@media (max-width: 400px) {
  .feature-list__btn {
    padding-right: 50px;
  }
}
.feature-list__btn:hover {
  opacity: 0.8;
}

.feature-list__btn::before, .feature-list__btn::after {
  background: #fff;
  content: "";
  position: absolute;
  top: 50%;
}

.feature-list__btn::before {
  margin-top: -1px;
  right: 10px;
  width: 20px;
  height: 2px;
}

.feature-list__btn::after {
  margin-top: -10px;
  right: 20px;
  transition: 0.3s;
  width: 2px;
  height: 20px;
}

.feature-list__btn.clicked::after {
  opacity: 0;
}

.feature-list__content {
  display: none;
  padding: 30px 0;
}

.feature-list__ttl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 480px) {
  .feature-list__ttl {
    font-size: 18px;
  }
}
.feature-list__txt {
  margin-top: 15px;
}

.feature-list__img {
  margin-top: 15px;
  text-align: center;
}

.feature-list__txt2 {
  color: red;
  font-size: 18px;
  margin-top: 15px;
  text-align: center;
}

@media (max-width: 480px) {
  .feature-list__txt2 {
    font-size: 16px;
  }
}
.feature-list__ttl2 {
  background: pink;
  font-size: 24px;
  font-weight: bold;
  padding: 15px;
  text-align: center;
}

@media (max-width: 480px) {
  .feature-list__ttl2 {
    font-size: 18px;
  }
}
.feature-list__ol {
  margin-top: 15px;
  width: 90%;
}

.feature-list__ol li {
  list-style: decimal;
}

.feature-list__ol li:last-child {
  margin-top: 30px;
}

.feature-list__setting {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
}

.feature-list__setting div:first-child {
  font-size: 36px;
  padding: 0 30px;
}

.feature-list__youtube {
  margin-top: 15px;
  padding-bottom: 60%;
  position: relative;
  text-align: center;
}

.feature-list__youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.feature-list__note li {
  font-weight: bold;
  margin: 0.5em 0 0 1em;
  text-indent: -1em;
}

@media (max-width: 480px) {
  .feature-list__note li {
    font-size: 14px;
  }
}
.feature-list__patent {
  border: 3px solid #f00;
  font-weight: bold;
  margin-top: 15px;
  padding: 10px;
}

.feature-list__chipset {
  font-weight: bold;
  margin: 15px 0 0 1em;
  text-indent: -1em;
}

/*********************************************************
footer
*********************************************************/
.footer {
  background: #000;
  color: #fff;
  padding: 15px 0;
}

.footer__copy {
  font-size: 14px;
  text-align: center;
}

/*********************************************************
フォーム
*********************************************************/
#formWrap {
  margin: 50px auto 0;
  color: #555;
  line-height: 120%;
  font-size: 90%;
  width: 90%;
  max-width: 800px;
}

table.formTable {
  background: #efefef;
  width: 100%;
  margin: 0 auto 30px;
  border-collapse: collapse;
}

table.formTable td, table.formTable th {
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: middle;
}

table.formTable th {
  width: 30%;
  font-weight: normal;
  background: #efefef;
  text-align: left;
}

table.formTable th span {
  color: red;
  display: inline-block;
  margin-left: 1em;
}

table.formTable td {
  background: #fff;
}

form input[type=text], form textarea {
  width: 90%;
}

form input[type=submit], form input[type=reset], form input[type=button] {
  background: #000;
  color: #fff;
  cursor: pointer;
  padding: 5px 25px;
}

form input[type=submit]:hover, form input[type=reset]:hover, form input[type=button]:hover {
  background: #ccc;
  color: #333;
}

@media screen and (max-width: 572px) {
  #formWrap {
    width: 95%;
  }
  table.formTable th, table.formTable td {
    width: auto;
    display: block;
  }
  table.formTable th {
    margin-top: 5px;
    border-bottom: 0;
  }
  form input[type=text], form textarea {
    width: 100%;
    padding: 5px;
    font-size: 110%;
    display: block;
  }
  form input[type=submit], form input[type=reset], form input[type=button] {
    display: block;
    width: 100%;
    height: 40px;
  }
}
/*********************************************************
gnav
*********************************************************/
@media (min-width: 981px) {
  .gnav {
    margin-top: 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  .gnav.scroll {
    background: #fff;
    border-bottom: 1px solid #333;
    margin-top: 0;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
  }
}
@media (max-width: 980px) {
  .gnav {
    background: #fff;
    display: none;
    padding: 50px 2%;
  }
}
@media (min-width: 981px) {
  .gnav__list {
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .gnav__list {
    padding-left: 2%;
    padding-right: 2%;
  }
}
.gnav__item {
  text-align: center;
}

@media (max-width: 980px) {
  .gnav__item {
    position: relative;
  }
  .gnav__item:not(:first-child) {
    margin-top: 15px;
  }
  .gnav__item:not(:last-child) {
    border-bottom: 1px solid #ddd;
    padding: 5px;
    text-align: left;
  }
  .gnav__item:not(:last-child)::after {
    border-style: solid;
    border-width: 1px 1px 0 0;
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
    transform: rotate(135deg);
    content: "";
    margin-top: -9px;
    position: absolute;
    top: 50%;
    right: 10px;
  }
  .gnav__item:last-child {
    margin-top: 30px;
  }
}
.gnav__link,
.gnav__contact {
  font-size: 14px;
  font-weight: bold;
}

@media (min-width: 981px) and (max-width: 1100px) {
  .gnav__link,
  .gnav__contact {
    font-size: 12px;
  }
}
.gnav__link {
  color: #fff;
  display: block;
}

@media (max-width: 980px) {
  .gnav__link {
    color: #333;
  }
  .gnav__link br {
    display: none;
  }
}
.gnav__link:hover {
  color: orange;
}

.scroll .gnav__link {
  color: #333;
}

.scroll .gnav__link:hover {
  color: orange;
}

.gnav__contact {
  background: #fff;
  border: 2px solid orange;
  border-radius: 10px;
  color: orange;
  padding: 5px 15px;
}

.gnav__contact:hover {
  background: orange;
  color: #fff;
}

/*********************************************************
hardwear
*********************************************************/
.hardwear {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .hardwear {
    display: block;
  }
}
.hardwear__img {
  margin-right: 30px;
}

@media (max-width: 600px) {
  .hardwear__img {
    font-size: 0;
    margin-right: 0;
  }
}
@media (max-width: 600px) {
  .hardwear__img p {
    display: inline-block;
    width: 48%;
  }
  .hardwear__img p:first-child {
    margin-right: 4%;
  }
}
.hardwear__ttl {
  background: #5959ff;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 600px) {
  .hardwear__table {
    margin-top: 30px;
    width: 100%;
  }
}
.hardwear__table th,
.hardwear__table td {
  border: 1px solid #333;
  font-size: 14px;
  padding: 5px;
}

.hardwear__table th {
  text-align: left;
}

/*********************************************************
header
*********************************************************/
@media (min-width: 769px) {
  .header {
    position: relative;
  }
}
@media (max-width: 980px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
  }
}
/*********************************************************
qa
*********************************************************/
.qa {
  margin-top: 50px;
}

.qa__item:not(:first-child) {
  margin-top: 30px;
}

.qa__q,
.qa__a {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.qa__q span,
.qa__a span {
  color: #fff;
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  width: 50px;
  height: 50px;
}

@media (max-width: 480px) {
  .qa__q span,
  .qa__a span {
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    height: 30px;
  }
}
.qa__q div,
.qa__a div {
  width: 80%;
  width: calc(100% - 80px);
}

@media (max-width: 480px) {
  .qa__q div,
  .qa__a div {
    width: calc(100% - 50px);
  }
}
.qa__q {
  align-items: center;
  background: #eee;
  margin-right: 15px;
}

.qa__q span {
  background: blue;
}

.qa__q div {
  font-weight: bold;
}

.qa__a {
  border-bottom: 2px dashed #cecece;
  font-size: 14px;
  margin-top: 15px;
  padding-bottom: 15px;
}

.qa__a span {
  background: red;
}

.qa__a ol > li {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

.qa__a ol > li:not(:first-child) {
  margin-top: 15px;
}

.qa__a ol ul {
  font-size: 13px;
  margin: 0 0 0 1em;
}

.qa__a ol ul li {
  margin-top: 5px;
}

.qa__a ul li {
  margin: 10px 0 0 1em;
  text-indent: -1em;
}

.qa-note {
  font-size: 14px;
  margin: 30px 0 0 1em;
  text-indent: -1em;
}

/*********************************************************
menu-btn
*********************************************************/
@media (min-width: 981px) {
  .menu-btn {
    display: none;
  }
}
@media (max-width: 980px) {
  .menu-btn {
    background: #fff;
    border-radius: 5px;
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .menu-btn__inner {
    cursor: pointer;
    height: 30px;
    position: relative;
    width: 35px;
  }
  .menu-btn__bar {
    background: #333;
    height: 3px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    left: 5%;
    transition: 0.5s;
    width: 90%;
  }
  .menu-btn__bar::before, .menu-btn__bar::after {
    background: #333;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    top: 50%;
    transition: 0.5s;
    width: 100%;
  }
  .menu-btn__bar::before {
    margin-top: -11px;
  }
  .menu-btn__bar::after {
    margin-top: 7px;
  }
  .close .menu-btn__bar {
    background: transparent;
  }
  .close .menu-btn__bar::before, .close .menu-btn__bar::after {
    margin-top: 0;
  }
  .close .menu-btn__bar::before {
    transform: rotate(45deg);
  }
  .close .menu-btn__bar::after {
    transform: rotate(-45deg);
  }
}
/***************************************************************
修理日記
***************************************************************/
.blog-wrapper {
  background: #FFF;
  padding: 30px;
}

/*blog-header*/
.blog-header__ttl {
  color: #3bb0da;
  border-bottom: 1px solid #3bb0da;
  font-weight: bold;
  padding-bottom: 8px;
}

.blog-header__date {
  font-size: 14px;
  margin-top: 30px;
}

.blog-header__theme {
  background: #3bb0da;
  color: #FFF;
  display: inline-block;
  margin-top: 30px;
  padding: 10px 20px;
}

/*blog-body*/
.blog-body {
  margin-top: 30px;
}

.blog-body p {
  font-size: 14px;
  line-height: 1.5;
}

/*pagination*/
.pagination {
  display: flex;
  align-items: flex-start;
  text-align: center;
}

.blog-wrapper .pagination ul {
  margin-top: 60px;
}

.pagination li {
  display: inline-block;
}

.pagination a {
  background: #3bb0da;
  color: #FFF;
  display: block;
  font-size: 16px;
  padding: 5px 10px;
  text-decoration: none;
}

.pagination a:hover,
.pagination a.active {
  background: #186CB9;
}

#pagination {
  flex-grow: 1;
}

#pagination li {
  margin: 0 5px;
}

.blog-wrapper #prevpage {
  display: none;
}

.blog-wrapper #nextpage {
  display: none;
}

/*blog-row*/
.blog-row {
  margin-top: 30px;
}

.blog-col.-month {
  margin-top: 15px;
}

.blog-col__ttl {
  background: #3bb0da;
  box-sizing: border-box;
  color: #FFF;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

.blog-col__list {
  background: #eee;
  box-sizing: border-box;
  font-size: 14px;
  height: 100%;
  height: calc(100% - 35px);
  line-height: 1.3;
  padding: 15px;
}

.blog-col__item {
  list-style: none;
  margin-bottom: 10px;
}

.blog-col__item:last-child {
  margin-bottom: 0;
}

.blog-col__link {
  color: #333;
  text-decoration: none;
}

.blog-col__link:hover {
  opacity: 0.8;
}

/*********************************************************
page-top
*********************************************************/
.page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2;
}

.page-top__link {
  background: #666;
  text-decoration: none;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  opacity: 0.6;
  padding: 3px 0;
  height: 50px;
  width: 50px;
  box-sizing: border-box;
}

.page-top__link:hover {
  text-decoration: none;
  background: #999;
  opacity: 1;
}

/*********************************************************
particles
*********************************************************/
/*========= particle js を描画するエリア設定 ===============*/
html, body {
  height: 100%; /*高さを100%にして描画エリアをとる*/
}

#particles-js {
  position: absolute; /*描画固定*/
  z-index: -1; /*描画を一番下に*/
  width: 100%;
  height: 100%;
}

#wrapper {
  position: relative; /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1; /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width: 100%;
  height: 100%;
}

/*********************************************************
partner
*********************************************************/
.goju {
  font-size: 14px;
  margin-top: 50px;
  text-align: center;
}

.card {
  border: 1px solid #eee;
  box-shadow: 3px 3px 3px #eee;
  margin-top: 50px;
}

.card__header {
  background: #eee;
  overflow: hidden;
  padding: 20px 15px 50px;
  position: relative;
  z-index: 1;
}

@media (max-width: 480px) {
  .card__header {
    padding: 25px 15px;
  }
}
.card__header::after {
  border-color: transparent transparent #fff transparent;
  border-width: 0 1100px 70px 1100px;
  border-style: solid;
  height: 0;
  width: 0;
  content: "";
  position: absolute;
  right: -900px;
  bottom: 0;
  z-index: -1;
}

@media (max-width: 768px) {
  .card__header::after {
    border-color: transparent transparent #fff transparent;
    border-width: 0 1100px 50px 1100px;
    border-style: solid;
    height: 0;
    width: 0;
  }
}
@media (max-width: 480px) {
  .card__header::after {
    border-color: transparent transparent #fff transparent;
    border-width: 0 400px 40px 400px;
    border-style: solid;
    height: 0;
    width: 0;
    right: -430px;
  }
}
.card__ttl {
  font-size: 24px;
  font-weight: bold;
}

@media (max-width: 400px) {
  .card__ttl {
    font-size: 20px;
  }
}
.card__body {
  box-sizing: border-box;
  padding: 15px;
  width: 480px;
}

@media (max-width: 480px) {
  .card__body {
    width: 100%;
  }
}
.partner-info__ttl {
  font-size: 18px;
  margin-bottom: 15px;
}

@media (max-width: 400px) {
  .partner-info__ttl {
    font-size: 16px;
  }
}
.partner-info__ttl span {
  border-bottom: 1px solid #666;
  display: block;
  font-weight: bold;
}

.partner-info__txt {
  margin-top: 5px;
}

.partner-info__txt a {
  color: #0909a8;
  word-break: break-all;
}

/*********************************************************
privacy policy
*********************************************************/
.privacy {
  background: #fff;
  margin-top: 30px;
  padding: 50px;
}

@media (max-width: 480px) {
  .privacy {
    padding: 50px 30px;
  }
}
.detail ol {
  display: flex;
  margin-top: 30px;
}

.detail li:first-child {
  margin-right: 30px;
}

/*********************************************************
section
*********************************************************/
.section {
  padding: 100px 0;
}

@media (max-width: 480px) {
  .section {
    padding: 50px 0;
  }
}
.section.-dn {
  display: none;
}

.section.-bg {
  background: #4e54c8;
  background: linear-gradient(to left, #8f94fb, #4e54c8);
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.section.-bg .circles {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section.-bg .circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.section.-bg .circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.section.-bg .circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.section.-bg .circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.section.-bg .circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.section.-bg .circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.section.-bg .circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.section.-bg .circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.section.-bg .circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.section.-bg .circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.section.-bg .circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
.section__inner {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  max-width: 1100px;
}

@media (max-width: 1100px) {
  .section__inner {
    padding-left: 2%;
    padding-right: 2%;
  }
}
.section__ttl {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 480px) {
  .section__ttl {
    font-size: 36px;
  }
}
@media (max-width: 400px) {
  .section__ttl {
    font-size: 30px;
  }
}
.-bg .section__ttl {
  color: #fff;
}

/*********************************************************
support
*********************************************************/
.support {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px auto 0;
  max-width: 1400px;
}

@media (max-width: 1400px) {
  .support {
    width: 95%;
  }
}
.support::after {
  content: "";
  width: 30%;
}

.support__item {
  background: #fff;
  padding: 50px 20px;
  width: 30%;
}

@media (max-width: 768px) {
  .support__item {
    width: 48%;
  }
}
@media (max-width: 480px) {
  .support__item {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .support__item:nth-child(n+2) {
    padding-top: 20px;
  }
}
@media (max-width: 768px) {
  .support__item:nth-child(n+3) {
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  .support__item:nth-child(n+3) {
    margin-top: 0;
    padding-top: 20px;
  }
}
@media (min-width: 769px) {
  .support__item:nth-child(n+4) {
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  .support__item:nth-child(n+4) {
    margin-top: 0;
    padding-top: 20px;
  }
}
.support__item img {
  display: block;
  margin: 1em auto 0;
}

.support__icon {
  font-size: 36px;
  text-align: center;
}

.support__ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.support__note {
  margin: 1em 0 0 1em;
  text-indent: -1em;
}

.support__txt {
  margin-top: 1em;
}

/*********************************************************
タブ切り替え
*********************************************************/
.tab-group {
  display: flex;
  justify-content: center;
}

@media (max-width: 400px) {
  .tab-group {
    flex-direction: column;
  }
}
.tab {
  flex-grow: 1;
  font-size: 24px;
  padding: 5px;
  list-style: none;
  border: solid 1px #CCC;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 768px) {
  .tab {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .tab {
    font-size: 14px;
  }
}
@media (max-width: 400px) {
  .tab {
    font-size: 18px;
  }
}
.tab i {
  display: block;
  margin-bottom: 5px;
}

.panel-group {
  border: solid 1px #CCC;
  border-top: none;
  background: #eee;
}

.panel {
  display: none;
}

.tab.is-active {
  background: #F00;
  color: #FFF;
  transition: all 0.2s ease-out;
}

.panel.is-show {
  display: block;
}

/*********************************************************
tel
*********************************************************/
.tel {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

@media (max-width: 600px) {
  .tel {
    justify-content: center;
    margin-left: 0;
  }
  .tel:not(:last-child) {
    margin-top: 30px;
  }
}
.tel__area {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-right: 15px;
  writing-mode: vertical-rl;
}

.tel:last-child .tel__area {
  color: blue;
}

.tel__icon {
  color: #000078;
  font-size: 30px;
  margin-right: 15px;
}

.tel__num {
  font-size: 36px;
  font-weight: bold;
}

@media (max-width: 480px) {
  .tel__num {
    font-size: 24px;
  }
}
@media (max-width: 400px) {
  .tel__num {
    font-size: 18px;
  }
}
/*********************************************************
tera
*********************************************************/
.tera01 {
  margin-top: 50px;
}

.tera02,
.tera03 {
  margin-top: 100px;
}

.tera01-mv {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .tera01-mv {
    display: block;
  }
}
.tera01-mv__content {
  margin-right: 100px;
}

@media (max-width: 600px) {
  .tera01-mv__content {
    margin-right: 0;
    text-align: center;
  }
}
.tera01-mv__jun {
  font-size: 30px;
  font-weight: bold;
}

.tera01-mv__logo {
  margin-bottom: 30px;
}

.tera01-mv__logo img {
  width: 500px;
}

.tera01-mv__txt {
  font-size: 18px;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .tera01-mv__img {
    margin-top: 15px;
    text-align: center;
  }
}
.tera01-mv__img img {
  width: 250px;
}

.tera01__bg {
  background: #eee;
  margin-top: 30px;
  padding: 30px;
}

@media (max-width: 600px) {
  .tera01__bg {
    padding: 15px;
  }
}
.tera01__container:not(:first-child) {
  margin-top: 30px;
}

.tera01-ttl__container {
  display: flex;
  align-items: center;
}

.tera01-ttl__container h3 {
  font-size: 24px;
  font-weight: bold;
}

.tera01-ttl__num {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  margin-right: 10px;
  text-align: center;
  width: 36px;
  height: 36px;
}

.tera01__content {
  margin: 10px 0 0 45px;
}

.tera01-table {
  overflow: auto;
}

.tera01-table__scroll {
  font-size: 14px;
  margin-top: 5px;
}

@media (min-width: 769px) {
  .tera01-table__scroll {
    display: none;
  }
}
.tera01-table__container {
  border: 1px solid #333;
  display: flex;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .tera01-table__container {
    width: 768px;
  }
}
.tera01-table__tr {
  width: 33.3333%;
}

@media (max-width: 768px) {
  .tera01-table__tr .tera01-table__th,
  .tera01-table__tr .tera01-table__td {
    white-space: nowrap;
  }
}
.tera01-table__tr:nth-child(2) .tera01-table__th,
.tera01-table__tr:nth-child(2) .tera01-table__td {
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

.tera01-table__tr:nth-child(3) .tera01-table__th,
.tera01-table__tr:nth-child(3) .tera01-table__td {
  border-right: 1px solid #333;
}

.tera01-table__th,
.tera01-table__td {
  font-size: 14px;
  padding: 10px 5px;
  text-align: center;
}

.tera01-table__th {
  background: #53a7f3;
  color: #fff;
}

.tera01-table__td {
  border-top: 1px solid #333;
}

.tera01__txt {
  font-size: 14px;
  margin-top: 5px;
}

.tera01__txt:not(:last-child) {
  margin-top: 15px;
}

.tera02-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
}

.tera02-header__icon {
  width: 15%;
}

@media (max-width: 600px) {
  .tera02-header__icon {
    width: 25%;
  }
}
.tera02-header__icon img {
  width: 150px;
}

.tera02-header__ttl {
  width: 80%;
}

@media (max-width: 600px) {
  .tera02-header__ttl {
    width: 70%;
  }
}
.tera02-header__txt01 {
  color: #0086d5;
  font-size: 36px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .tera02-header__txt01 {
    font-size: 24px;
  }
}
.tera02-header__txt02 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 5px;
}

@media (max-width: 768px) {
  .tera02-header__txt02 {
    font-size: 18px;
  }
}
.tera02-content {
  background: #fbfbfb;
  border: 3px solid #666;
  margin-top: 15px;
  padding: 50px;
}

@media (min-width: 601px) {
  .tera02-content input,
  .tera02-content label {
    display: none;
  }
}
@media (max-width: 980px) {
  .tera02-content {
    padding: 30px;
  }
}
.tera02-content__box {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .tera02-content__box {
    display: block;
  }
  .tera02-content__box.on {
    height: 300px;
    overflow: hidden;
    transition: 0.3s;
  }
}
.tera02-content__list.-l, .tera02-content__list.-r {
  width: 49%;
}

@media (max-width: 980px) {
  .tera02-content__list.-l, .tera02-content__list.-r {
    width: 47%;
  }
}
@media (max-width: 600px) {
  .tera02-content__list.-l, .tera02-content__list.-r {
    width: 100%;
  }
}
.tera02-content__item {
  padding-left: 15px;
  position: relative;
}

.tera02-content__item::before {
  background: #2d45bb;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 7.5px;
  left: 0;
  width: 7px;
  height: 7px;
}

.tera02-content__item:not(:first-child) {
  margin-top: 10px;
}

@media (max-width: 480px) {
  .tera03__wrapper {
    overflow: auto;
  }
}
.tera03-table {
  margin: 50px auto 0;
}

@media (max-width: 480px) {
  .tera03-table {
    width: 480px;
  }
}
.tera03-table th,
.tera03-table td {
  border: 1px solid #333;
  font-size: 14px;
}

@media (max-width: 480px) {
  .tera03-table th,
  .tera03-table td {
    white-space: nowrap;
  }
}
.tera03-table th {
  background: #53a7f3;
  color: #fff;
  padding: 5px;
}

.tera03-table td {
  padding: 10px;
}

@media (min-width: 481px) {
  .tera03__scroll {
    display: none;
  }
}
@media (max-width: 480px) {
  .tera03__scroll {
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  .tera02-content *, .tera02-content *:before, .tera02-content *:after {
    box-sizing: border-box;
  }
  .tera02-content {
    position: relative;
  }
  .tera02-content label {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px; /* グラデーションの高さ */
    cursor: pointer;
    text-align: center;
    /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
  }
  .tera02-content input:checked + label {
    background: transparent; /* 開いた時にグラデーションを消す */
  }
  .tera02-content label:after {
    line-height: 2.5rem;
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 50%;
    width: 16rem;
    font-family: FontAwesome;
    content: "\f13a" " 続きをよむ";
    transform: translate(-50%, 0);
    letter-spacing: 0.05em;
    color: #ffffff;
    border-radius: 20px;
    background-color: rgb(27, 37, 56);
  }
  .tera02-content input {
    display: none;
  }
  .tera02-content .tera02-content__box {
    overflow: hidden;
    height: 200px; /* 開く前に見えている部分の高さ */
    transition: all 0.5s;
  }
  .tera02-content input:checked + label {
    /* display: none ; 閉じるボタンを消す場合解放 */
  }
  .tera02-content input:checked + label:after {
    font-family: FontAwesome;
    content: "\f139" " 閉じる";
  }
  .tera02-content input:checked ~ .tera02-content__box {
    height: auto;
    padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
    transition: all 0.5s;
  }
}
/*********************************************************
top-news
*********************************************************/
.top-news {
  margin: 50px auto 0;
  max-width: 800px;
}

@media (max-width: 800px) {
  .top-news {
    padding: 0 2%;
  }
}
@media (max-width: 480px) {
  .top-news {
    margin-top: 30px;
  }
}
.top-news__item {
  border-bottom: 1px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-bottom: 5px;
  white-space: nowrap;
}

.top-news__item:not(:first-child) {
  margin-top: 15px;
}

.top-news__date {
  font-size: 14px;
  margin-right: 30px;
}

.top-news__ttl {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-news__ttl a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-news__ttl a:hover {
  opacity: 0.8;
}

/*********************************************************
Pico-UTM 100 M
*********************************************************/
.setting.-utm100m {
  background: #d4d6ea;
}

.utm-header.-utm100m {
  background-image: url(http://smartsecurity.jp/image.php?id=087);
}

.mv__btn.-blue {
  background: #72c7e8;
}

/*********************************************************
共通
*********************************************************/
* {
  box-sizing: border-box;
}

.inner {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  max-width: 1000px;
}

@media (max-width: 1100px) {
  .inner {
    padding-left: 2%;
    padding-right: 2%;
  }
}
.content {
  margin-top: 100px;
}

.content:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .content {
    margin-top: 15%;
  }
}
.content-ttl {
  color: #1c149b;
  font-size: 50px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding-bottom: 20px;
  position: relative;
  text-align: center;
}

@media (max-width: 1024px) {
  .content-ttl {
    font-size: 48px;
  }
}
@media (max-width: 768px) {
  .content-ttl {
    font-size: 36px;
  }
}
@media (max-width: 480px) {
  .content-ttl {
    font-size: 24px;
    font-size: 8vw;
  }
}
.content-ttl::after {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 10px;
}

@media (max-width: 1024px) {
  .content-ttl::after {
    width: 270px;
  }
}
@media (max-width: 768px) {
  .content-ttl::after {
    width: 220px;
  }
}
@media (max-width: 480px) {
  .content-ttl::after {
    width: 35%;
  }
}
.dib {
  color: inherit;
  display: inline-block;
  font-weight: inherit;
}

.content-ttl02 {
  font-size: 0;
}

.content-ttl02__container {
  display: flex;
  align-items: center;
}

.content-ttl02__container h3 {
  color: #1c149b;
  font-size: 36px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .content-ttl02__container h3 {
    font-size: 24px;
  }
}
.content-ttl02__num {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  color: #fff;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  line-height: 70px;
  margin-right: 10px;
  text-align: center;
  width: 70px;
  height: 70px;
}

@media (max-width: 768px) {
  .content-ttl02__num {
    font-size: 24px;
    line-height: 50px;
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 480px) {
  .content-ttl02__num {
    font-size: 18px;
    line-height: 30px;
    width: 30px;
    height: 30px;
  }
}
.content-ttl02__sub {
  font-size: 24px;
  font-weight: bold;
  margin-left: 80px;
}

@media (max-width: 768px) {
  .content-ttl02__sub {
    font-size: 18px;
    margin-left: 60px;
  }
}
@media (max-width: 480px) {
  .content-ttl02__sub {
    font-size: 16px;
    margin-left: 40px;
  }
}
.utm-header {
  background-image: url(http://smartsecurity.jp/image.php?id=070);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 30% 0 0;
}

/*********************************************************
mv
*********************************************************/
.mv {
  background-color: #0f203e;
  background-image: url(http://smartsecurity.jp/image.php?id=065);
  background-position: center center;
  background-repeat: no-repeat;
}

.mv__inner {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  max-width: 1000px;
}

@media (max-width: 1100px) {
  .mv__inner {
    padding-left: 2%;
    padding-right: 2%;
  }
}
@media (min-width: 769px) {
  .mv__inner {
    padding-top: 200px;
    padding-bottom: 100px;
  }
}
@media (max-width: 768px) {
  .mv__inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
.mv__container {
  display: flex;
  align-items: center;
}

@media (max-width: 480px) {
  .mv__container {
    flex-direction: column;
  }
}
.mv__ttl {
  width: 65%;
}

@media (max-width: 480px) {
  .mv__ttl {
    width: 100%;
  }
}
.mv__pico {
  width: 35%;
}

@media (max-width: 480px) {
  .mv__pico {
    text-align: center;
    width: 100%;
  }
}
.mv__txt {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 480px) {
  .mv__txt {
    text-align: center;
  }
}
.mv__btn {
  background: #fff;
  border-radius: 15px;
  color: #333;
  display: block;
  font-weight: bold;
  margin: 100px auto 0;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  width: 90%;
  max-width: 300px;
}

@media (max-width: 480px) {
  .mv__btn {
    margin-top: 50px;
  }
}
.mv__btn:hover {
  background: #333;
  color: #fff;
}

/*********************************************************
utm-01
*********************************************************/
.utm-01__mv {
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .utm-01__mv {
    margin-bottom: 10%;
  }
}
.utm-01__box {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .utm-01__box {
    margin-top: 10%;
  }
}
.utm-01__list,
.utm-01__list02,
.utm-01-list03 {
  margin-top: 30px;
}

.utm-01__list dt {
  padding-left: 30px;
  position: relative;
}

.utm-01__list dt::before {
  background: #1c149b;
  content: "";
  display: inline-block;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
}

.utm-01__list dd {
  margin-top: 15px;
}

.utm-01__list dd p {
  font-size: 14px;
  margin-top: 10px;
}

.utm-01__list dd p a {
  color: blue;
  text-decoration: underline;
  word-break: break-all;
}

.utm-01__list dd p a:hover {
  text-decoration: none;
}

.utm-01__list02 {
  display: flex;
}

@media (max-width: 600px) {
  .utm-01__list02 {
    display: block;
  }
}
@media (max-width: 600px) {
  .utm-01__list02 li:not(:first-child) {
    margin-top: 30px;
  }
}
.utm-01-list03 {
  background-image: url(http://smartsecurity.jp/image.php?id=064);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px;
}

.utm-01-list03 li {
  margin-top: 30px;
  width: 48%;
}

@media (max-width: 768px) {
  .utm-01-list03 li {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
  }
}
@media (max-width: 400px) {
  .utm-01-list03 li {
    width: 95%;
  }
}
.utm-01-list03 li:first-child {
  margin-top: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .utm-01-list03 li:first-child {
    margin: 0 auto;
    width: 400px;
  }
}
@media (max-width: 400px) {
  .utm-01-list03 li:first-child {
    width: 95%;
  }
}
.utm-01-list03__header {
  display: flex;
  align-items: center;
}

@media (min-width: 769px) {
  .utm-01-list03__header {
    justify-content: center;
  }
}
.utm-01-list03__num {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  margin-right: 10px;
  text-align: center;
  width: 36px;
  height: 36px;
}

.utm-01-list03__ttl {
  font-size: 36px;
  font-weight: bold;
}

@media (max-width: 400px) {
  .utm-01-list03__ttl {
    font-size: 24px;
  }
}
.utm-01-list03__txt {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .utm-01-list03__txt {
    text-align: left;
  }
}
@media (max-width: 400px) {
  .utm-01-list03__txt {
    font-size: 18px;
  }
}
.utm-01-list03__txt strong {
  color: #f00;
  font-size: 120%;
}

/*********************************************************
utm-02
*********************************************************/
.utm-02__ttl {
  font-size: 48px;
  margin-top: 50px;
}

@media (max-width: 600px) {
  .utm-02__ttl {
    text-shadow: 1px 0 1px #fff, 0 1px 1px #fff, -1px 0 1px #fff, 0 -1px 1px #fff;
  }
}
@media (max-width: 480px) {
  .utm-02__ttl {
    font-size: 36px;
  }
}
@media (max-width: 270px) {
  .utm-02__ttl {
    font-size: 24px;
  }
}
.utm-02__ttl .utm-02__p {
  color: #1c149b;
  display: block;
  font-weight: bold;
}

.utm-02__ttl .utm-02__fl {
  color: #05baff;
  font-weight: bold;
}

.utm-02__ttl2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 15px;
}

.utm-02__ttl2::before {
  border-color: transparent transparent transparent #05baff;
  border-width: 9px 0 9px 18px;
  border-style: solid;
  height: 0;
  width: 0;
  content: "";
  display: inline-block;
  margin-right: 10px;
}

.utm-02__img {
  margin-top: 30px;
}

.utm-02-list {
  margin-top: 50px;
}

@media (max-width: 480px) {
  .utm-02-list {
    margin-top: 10%;
  }
}
.utm-02-list__ttl {
  color: #1c149b;
  font-size: 36px;
  font-weight: bold;
  margin-top: 30px;
  padding-left: 80px;
  position: relative;
}

@media (max-width: 768px) {
  .utm-02-list__ttl {
    font-size: 24px;
    padding-left: 70px;
  }
}
.utm-02-list__ttl::before {
  background-image: url(http://smartsecurity.jp/image.php?id=045);
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
}

@media (max-width: 768px) {
  .utm-02-list__ttl::before {
    width: 60px;
    height: 60px;
  }
}
.utm-02-list__txt {
  background: #f1ecef;
  border: 3px solid #d1cbcf;
  font-size: 24px;
  letter-spacing: 0.05em;
  margin-top: 30px;
  padding: 30px;
}

@media (max-width: 768px) {
  .utm-02-list__txt {
    font-size: 18px;
    padding: 15px;
  }
}
.utm-02__header {
  background-image: url(http://smartsecurity.jp/image.php?id=048);
  background-position: top -150px right;
  background-repeat: no-repeat;
  background-size: 400px;
  padding-bottom: 130px;
}

@media (max-width: 768px) {
  .utm-02__header {
    background-size: 350px;
    padding-bottom: 80px;
  }
}
@media (max-width: 600px) {
  .utm-02__header {
    background-position: top -50px right;
    background-size: 250px;
    padding-bottom: 60px;
  }
}
.utm-02__header .content-ttl {
  padding-left: 0.25em;
  text-align: left;
}

.utm-02__header .content-ttl::after {
  left: 0;
  transform: translateX(0);
}

/*********************************************************
utm-03
*********************************************************/
.utm-03-list__ttl {
  display: flex;
  align-items: center;
  margin-top: 50px;
}

@media (max-width: 480px) {
  .utm-03-list__ttl {
    margin-top: 10%;
  }
}
.utm-03-list__ttl span:first-child {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  color: #fff;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  line-height: 70px;
  margin-right: 10px;
  text-align: center;
  width: 70px;
  min-width: 70px;
  height: 70px;
}

@media (max-width: 768px) {
  .utm-03-list__ttl span:first-child {
    font-size: 24px;
    line-height: 50px;
    width: 50px;
    min-width: 50px;
    height: 50px;
  }
}
.utm-03-list__ttl span:last-child {
  color: #1c149b;
  font-size: 36px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .utm-03-list__ttl span:last-child {
    font-size: 22px;
    line-height: 1.3;
  }
}
.utm-03-list__content {
  font-size: 24px;
  letter-spacing: 0.05em;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .utm-03-list__content {
    font-size: 18px;
  }
}
.utm-03-list__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 480px) {
  .utm-03-list__flex {
    display: block;
  }
}
.utm-03-list__box:first-child {
  width: 65%;
}

@media (max-width: 480px) {
  .utm-03-list__box:first-child {
    width: 100%;
  }
}
.utm-03-list__box:last-child {
  width: 33%;
}

@media (max-width: 480px) {
  .utm-03-list__box:last-child {
    margin-top: 15px;
    width: 100%;
  }
}
/*********************************************************
utm-04
*********************************************************/
.utm-04__top {
  color: #666;
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
  text-align: center;
}

@media (max-width: 600px) {
  .utm-04__top {
    font-size: 18px;
  }
}
.utm-04-list {
  border: 1px solid #1c149b;
  border-radius: 50px;
  display: flex;
  align-items: center;
  margin-top: 30px;
  overflow: hidden;
}

@media (min-width: 501px) {
  .utm-04-list {
    margin-left: auto;
    margin-right: auto;
    width: 480px;
  }
}
@media (max-width: 400px) {
  .utm-04-list {
    border-radius: 15px;
    display: block;
    text-align: center;
  }
}
.utm-04-list__ttl {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 25px;
}

@media (max-width: 500px) {
  .utm-04-list__ttl {
    font-size: 16px;
    padding: 10px;
  }
}
.utm-04-list__txt {
  color: #666;
  font-size: 18px;
  padding: 10px 25px;
}

@media (max-width: 500px) {
  .utm-04-list__txt {
    font-size: 16px;
    padding: 10px;
  }
}
.utm-04-company {
  border: 2px solid #1c149b;
  margin-top: 100px;
  padding: 50px 30px 30px;
  position: relative;
}

@media (max-width: 600px) {
  .utm-04-company {
    margin-top: 15%;
    padding: 30px 15px 15px;
  }
}
.utm-04-company__ttl {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
  margin-left: -125px;
  position: absolute;
  top: -25px;
  left: 50%;
  text-align: center;
  width: 250px;
  height: 50px;
}

@media (max-width: 260px) {
  .utm-04-company__ttl {
    margin-left: 0;
    transform: translateX(-50%);
    width: 95%;
  }
}
/*********************************************************
utm-05
*********************************************************/
.utm-05-table {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

@media (max-width: 600px) {
  .utm-05-table {
    display: block;
  }
}
@media (max-width: 480px) {
  .utm-05-table {
    margin-top: 10%;
  }
}
.utm-05-table__header {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 34px;
  font-weight: bold;
  margin-right: 15px;
  padding: 15px;
  text-align: center;
}

@media (max-width: 768px) {
  .utm-05-table__header {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .utm-05-table__header {
    align-items: center;
    flex-direction: row;
    margin-right: 0;
  }
}
@media (max-width: 270px) {
  .utm-05-table__header {
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .utm-05-table__taiwan {
    border-right: 1px solid #fff;
    margin-right: 10px;
    padding-right: 10px;
  }
}
.utm-05-table__total {
  border-top: 1px solid #fff;
  margin-top: 15px;
  padding-top: 15px;
}

@media (max-width: 600px) {
  .utm-05-table__total {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}
.utm-05-list__item {
  border-bottom: 1px solid #333;
  color: #1c149b;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  padding: 25px 0 25px 90px;
  position: relative;
}

@media (max-width: 400px) {
  .utm-05-list__item {
    font-size: 18px;
  }
}
.utm-05-list__item::before {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 80px;
  height: 60px;
}

.utm-05-list__item:first-child::before {
  background-image: url(http://smartsecurity.jp/image.php?id=060);
}

.utm-05-list__item:nth-child(2)::before {
  background-image: url(http://smartsecurity.jp/image.php?id=061);
}

.utm-05-list__item:nth-child(3)::before {
  background-image: url(http://smartsecurity.jp/image.php?id=062);
}

.utm-05-list__item:nth-child(4) {
  border-bottom: none;
}

.utm-05-list__item:nth-child(4)::before {
  background-image: url(http://smartsecurity.jp/image.php?id=063);
}

.utm-05-list__small {
  font-size: 80%;
  font-weight: bold;
}

/*********************************************************
utm-06
*********************************************************/
.utm-06-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
}

@media (max-width: 480px) {
  .utm-06-list {
    display: block;
    margin-top: 15%;
  }
}
.utm-06-list__item {
  width: 48%;
}

@media (max-width: 480px) {
  .utm-06-list__item {
    width: 100%;
  }
  .utm-06-list__item:not(:first-child) {
    margin-top: 30px;
  }
}
.utm-06-list__item:nth-child(n+3) {
  margin-top: 30px;
}

.utm-06-list__dl dt {
  color: #666;
  font-size: 18px;
  font-weight: bold;
  padding-left: 30px;
  position: relative;
}

.utm-06-list__dl dt::before {
  background: #1c149b;
  content: "";
  display: inline-block;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
}

.utm-06-list__dl dd {
  margin-top: 10px;
}

.utm-06-list__dl dd p {
  font-size: 14px;
  margin-top: 5px;
}

.setting {
  background: #d7d8ec;
  margin-top: 100px;
  padding: 30px;
  position: relative;
}

@media (max-width: 480px) {
  .setting {
    margin-top: 15%;
    padding: 30px 15px 15px;
  }
}
.setting__ttl {
  background-image: linear-gradient(to right, #4da5ff, #1c149b);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
  margin-left: -125px;
  position: absolute;
  top: -25px;
  left: 50%;
  text-align: center;
  width: 250px;
  height: 50px;
}

@media (max-width: 260px) {
  .setting__ttl {
    margin-left: 0;
    transform: translateX(-50%);
    width: 95%;
  }
}
.setting__box {
  background: #fff;
  padding: 15px;
  text-align: center;
}

.setting__step {
  color: #1c149b;
  font-size: 24px;
  font-weight: bold;
}

@media (max-width: 480px) {
  .setting__step {
    font-size: 18px;
  }
}
.setting__step span {
  font-size: 150%;
  font-weight: bold;
}

/*********************************************************
utm-07
*********************************************************/
.utm-07-spec {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

@media (max-width: 768px) {
  .utm-07-spec {
    display: block;
  }
}
@media (max-width: 480px) {
  .utm-07-spec {
    margin-top: 10%;
  }
}
.utm-07-spec__img {
  font-size: 0;
  width: 40%;
}

@media (max-width: 768px) {
  .utm-07-spec__img {
    width: 100%;
  }
}
.utm-07-spec__img img {
  display: block;
}

@media (max-width: 768px) {
  .utm-07-spec__img img {
    display: inline-block;
    width: 45%;
  }
}
.utm-07-spec__img img:last-child {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .utm-07-spec__img img:last-child {
    margin: 0 0 0 10%;
  }
}
.utm-07-spec__content {
  width: 57%;
}

@media (max-width: 768px) {
  .utm-07-spec__content {
    margin-top: 30px;
    width: 100%;
  }
}
.utm-07-table {
  font-size: 14px;
  width: 100%;
}

.utm-07-table th,
.utm-07-table td {
  border: 1px solid #333;
  padding: 7px;
}

.utm-07-table th {
  text-align: left;
}

@media (max-width: 600px) {
  .utm-07-table th {
    width: 40%;
  }
}
.utm-07-table__ttl {
  background: #519bcf;
  color: #fff;
}

/*********************************************************
utm-08
*********************************************************/
.comparison {
  margin-top: 50px;
  overflow: auto;
}

@media (max-width: 480px) {
  .comparison {
    margin-top: 10%;
  }
}
.comparison__table {
  width: 1000px;
}

.comparison__table thead th {
  background: #85b2e1;
  width: 15%;
}

.comparison__table thead .comparison__empty {
  background: #fff;
}

.comparison__table thead .comparison__pico {
  background: #1c149b;
  color: #fff;
  font-size: 18px;
  width: 25%;
}

.comparison__table th,
.comparison__table td {
  border: 3px solid #fff;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
}

.comparison__table th {
  font-weight: bold;
}

.comparison__table tbody tr th,
.comparison__table tbody tr td {
  background: #ebf4ff;
}

.comparison__table tbody tr:nth-child(odd) th,
.comparison__table tbody tr:nth-child(odd) td {
  background: #c7e0ff;
}

.comparison__table tbody .comparison__pico {
  color: #1c149b;
  font-size: 18px;
  font-weight: bold;
}

.comparison__txt {
  display: none;
}

@media (max-width: 1000px) {
  .comparison__txt {
    display: block;
    font-size: 14px;
    font-weight: bold;
  }
}
/*********************************************************
utm-010
*********************************************************/
.utm-10__txt {
  color: #666;
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
  text-align: center;
}

@media (max-width: 480px) {
  .utm-10__txt {
    font-size: 18px;
    margin-top: 10%;
  }
}
.utm-10__img {
  margin-top: 30px;
}

/*********************************************************
otasuke-about
*********************************************************/
.otasuke-about {
  margin-top: 30px;
}

.otasuke-about__container {
  border: 1px solid #333;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

@media (max-width: 480px) {
  .otasuke-about__container {
    display: block;
  }
}
@media (min-width: 481px) {
  .otasuke-about__logo {
    width: 30%;
    max-width: 250px;
  }
}
@media (max-width: 480px) {
  .otasuke-about__logo {
    text-align: center;
    width: 100%;
  }
}
.otasuke-about__logo img {
  width: 250px;
}

.otasuke-about__txt {
  width: 67%;
}

@media (max-width: 480px) {
  .otasuke-about__txt {
    margin-top: 15px;
    width: 100%;
  }
}
.otasuke-about__hojo {
  margin-top: 15px;
}

@media (max-width: 480px) {
  .otasuke-about__hojo {
    font-size: 14px;
  }
}
.otasuke-about__hojo a {
  color: #036eb6;
}

.otasuke-about__hojo a:hover {
  text-decoration: underline;
}

/*********************************************************
otasuke-service
*********************************************************/
.otasuke-service__ttl {
  font-size: 24px;
  text-align: center;
}

@media (max-width: 480px) {
  .otasuke-service__ttl {
    font-size: 18px;
  }
}
.otasuke-service__ttl span {
  display: inline-block;
}

@media (max-width: 360px) {
  .otasuke-service__ttl span {
    display: inline;
  }
}
/*********************************************************
otasuke-service-list
*********************************************************/
.otasuke-service-list {
  margin-top: 50px;
}

.otasuke-service-list__item {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

@media (max-width: 600px) {
  .otasuke-service-list__item {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .otasuke-service-list__circle {
    width: 115px;
  }
}
@media (max-width: 400px) {
  .otasuke-service-list__circle {
    width: 80px;
  }
}
.otasuke-service-list__circle span {
  background: #036eb6;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  width: 100px;
  height: 100px;
}

@media (max-width: 400px) {
  .otasuke-service-list__circle span {
    font-size: 14px;
    width: 70px;
    height: 70px;
  }
}
.otasuke-service-list__ttl {
  margin: 0 50px 0 30px;
}

@media (max-width: 600px) {
  .otasuke-service-list__ttl {
    flex: 1;
    margin: 0;
  }
}
.otasuke-service-list__ttl h3 {
  font-size: 18px;
  font-weight: bold;
}

.otasuke-service-list__ttl h3 span {
  display: inline-block;
}

@media (min-width: 601px) {
  .otasuke-service-list__ttl h3 {
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .otasuke-service-list__ttl h3 {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .otasuke-service-list__content {
    margin-top: 15px;
    width: 100%;
  }
}
.otasuke-service-list__content.-bgi {
  position: relative;
  width: 100%;
}

.otasuke-service-list__content.-bgi::after {
  background-image: url(image.php?id=098);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: -50px;
  right: 50px;
  width: 250px;
  height: 250px;
}

@media (max-width: 768px) {
  .otasuke-service-list__content.-bgi::after {
    top: -15px;
    right: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
  }
}
@media (max-width: 600px) {
  .otasuke-service-list__content.-bgi::after {
    display: none;
  }
}
@media (min-width: 600px) {
  .otasuke-service-list__content.-bgi img {
    display: none;
  }
}
@media (max-width: 600px) {
  .otasuke-service-list__content.-contact {
    text-align: center;
  }
}
.otasuke-service-list__content.-contact img {
  width: 200px;
}

.otasuke-service-list__menseki {
  font-size: 14px;
  text-align: right;
}

.otasuke-service-list__time {
  font-size: 20px;
  margin: 10px 0;
  text-align: center;
}

@media (max-width: 400px) {
  .otasuke-service-list__time {
    font-size: 18px;
  }
}
.otasuke-service-list__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.otasuke-service-list__tel div {
  font-size: 20px;
}

@media (max-width: 400px) {
  .otasuke-service-list__tel div {
    font-size: 18px;
  }
}
.otasuke-service-list__tel div:nth-child(2) {
  margin: 0 7px;
}

.otasuke-service-list__tel div:nth-child(2) img {
  vertical-align: middle;
  width: 22px;
}

@media (max-width: 480px) {
  .otasuke-service-list__tel div:nth-child(2) img {
    width: 20px;
  }
}
/*********************************************************
plan
*********************************************************/
.plan__logo {
  margin-top: 50px;
}

.plan__top {
  font-size: 36px;
  margin-top: 50px;
  text-align: center;
}

@media (max-width: 768px) {
  .plan__top {
    font-size: 24px;
  }
}
@media (max-width: 330px) {
  .plan__top {
    font-size: 18px;
  }
}
.plan__top strong {
  font-size: 130%;
}

@media (min-width: 1024px) {
  .plan__top strong {
    font-size: 200%;
  }
}
.plan__txt {
  display: inline-block;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
}

@media (max-width: 600px) {
  .plan__txt {
    text-align: center;
  }
}
@media (max-width: 600px) {
  .plan__txt:first-child {
    margin-bottom: 15px;
  }
}
.plan__sup {
  font-size: 12px;
  vertical-align: super;
}

.plan__note {
  font-size: 18px;
  text-align: right;
}

@media (max-width: 600px) {
  .plan__note {
    text-align: center;
  }
}
@media (max-width: 330px) {
  .plan__note {
    font-size: 14px;
  }
}
.plan-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

@media (max-width: 600px) {
  .plan-box {
    display: block;
  }
}
.plan-box__txt {
  font-size: 24px;
  font-weight: bold;
  line-height: 2;
  width: 70%;
}

@media (max-width: 1024px) {
  .plan-box__txt {
    line-height: 1.5;
  }
}
@media (max-width: 768px) {
  .plan-box__txt {
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .plan-box__txt {
    width: 100%;
  }
}
.plan-box__txt strong {
  color: #008baf;
}

.plan-box__pc-block {
  font-weight: inherit;
}

@media (max-width: 1024px) {
  .plan-box__pc-block {
    display: inline;
  }
}
.plan-box__img {
  text-align: center;
  width: 25%;
}

@media (max-width: 600px) {
  .plan-box__img {
    margin: 15px auto 0;
    width: 95%;
    max-width: 400px;
  }
}
.plan-image {
  margin-top: 30px;
}

.plan-ttl {
  font-size: 36px;
  margin-top: 50px;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 480px) {
  .plan-ttl {
    font-size: 24px;
  }
}
.plan-table__inner {
  overflow: auto;
}

.plan-table__inner table {
  width: 1100px;
}

.plan-table__inner table th,
.plan-table__inner table td {
  border: 2px solid #040000;
  font-size: 14px;
  padding: 7px;
  vertical-align: middle;
  white-space: nowrap;
}

.plan-table__inner table th {
  background: #13325c;
  color: #fff;
  font-weight: bold;
}

.plan-table__inner table td.-center {
  text-align: center;
}

@media (min-width: 1101px) {
  .plan-table__scroll {
    display: none;
  }
}