:root {
  --window-width-1: 74%;
  --window-left-1: 13%;
}
p {
  margin: 0;
}
video {
  vertical-align: middle;
}
h2 {
  font-size: 2.265625vw;
  line-height: 1.3;
  color: #000;
  margin: 0;
  padding-bottom: 0.4em;
}
p {
  font-size: 1.171875vw;
  color: #000;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nowrap {
  white-space: nowrap;
}
.T-BOX-1 {
  width: 100%;
  position: relative;
}
.T-BOX-1 h1 {
  display: none;
}
.T-BOX-1 .T-BOX-1-1 {
  position: absolute;
  left: 7.5vw;
  top: 11.6015625vw;
}
.T-BOX-1 .T-BOX-1-1 img {
  width: 25.46875vw;
}
.T-BOX-1 .T-BOX-1-1 ul {
  padding-top: 1.5em;
}
.T-BOX-1 .T-BOX-1-1 p {
  color: #632082;
  line-height: 2;
  padding-left: 1.9em;
  font-weight: 600;
}
.T-BOX-2 {
  width: 100%;
  background: #f8f9f9;
  text-align: center;
  padding-bottom: 3.3984375vw;
}
.T-BOX-2 .T-BOX-2-1 {
  width: var(--window-width-1);
  margin: 0 auto;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-2 {
  padding: 4.921875vw 0.5em 5.234375vw;
  color: #4f4f4f;
  text-align: center;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 {
  display: flex;
  justify-content: space-between;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 {
  width: 18%;
  position: relative;
  text-align: left;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 div {
  width: 65%;
  position: relative;
  text-align: center;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 img {
  width: 100%;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 p {
  padding: 0.78125vw 0 2.734375vw;
  color: #333333;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 p span {
  font-size: 0.6em;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1::before {
  position: absolute;
  content: '';
  width: 90%;
  left: 10%;
  height: 80%;
  top: 4%;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1:nth-child(1)::before {
  background-color: #d3e7f7;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1:nth-child(2)::before {
  background-color: #facad5;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1:nth-child(3)::before {
  background-color: #f7f4bb;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1:nth-child(4)::before {
  background-color: #e0d7f6;
}
.T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1:nth-child(5)::before {
  background-color: #999999;
}
.T-BOX-3 {
  width: 100%;
  position: relative;
  background: url(T-BOX-03-bg.jpg) no-repeat center;
  background-size: cover;
  padding-top: 2.5390625vw;
}
.T-BOX-3 img {
  width: 32.8515625vw;
  margin-left: 54%;
}
.T-BOX-3 .T-BOX-3-1 {
  position: absolute;
  width: 46.09375vw;
  left: var(--window-left-1);
  top: 7.2265625vw;
}
.T-BOX-3 .T-BOX-3-1 > p {
  color: #000;
  padding-bottom: 1.5em;
}
.T-BOX-3 .T-BOX-3-1 li > p {
  color: #000000;
  padding-bottom: 0.5em;
}
.T-BOX-3 .T-BOX-3-1 li > p b {
  color: #028085;
  font-weight: 600;
  font-style: normal;
}
.T-BOX-4 {
  width: 100%;
  position: relative;
  background: url(T-BOX-04.jpg) no-repeat center;
  background-size: cover;
}
.T-BOX-4 video {
  width: 36.171875vw;
  margin-left: var(--window-left-1);
}
.T-BOX-4 .T-BOX-4-1 {
  position: absolute;
  right: var(--window-left-1);
  top: 18.359375vw;
}
.T-BOX-4 .T-BOX-4-1 p {
  color: #333333;
}
.T-BOX-5 {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 3.90625vw 0;
}
.T-BOX-5 .T-BOX-5-1 {
  width: var(--window-width-1);
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.T-BOX-5 .T-BOX-5-1 .T-BOX-5-2 {
  width: 44%;
  text-align: left;
}
.T-BOX-5 .T-BOX-5-1 video {
  width: 56%;
  border-radius: 1em;
}
.T-BOX-5 .T-BOX-5-1 p {
  color: #000;
  padding-right: 1em;
}
.T-BOX-5 .T-BOX-5-1 p b {
  color: #420c48;
  font-weight: 600;
}
.T-BOX-6 {
  width: 100%;
  background-color: #e3f0ff;
  text-align: center !important;
  position: relative;
}
.T-BOX-6 .T-BOX-6-1 {
  position: absolute;
  left: var(--window-left-1);
  top: 5.859375vw;
  text-align: left;
}
.T-BOX-6 .T-BOX-6-1 p {
  color: #333333;
}
.T-BOX-7 {
  padding: 4.6875vw 0 4.4921875vw;
}
.T-BOX-7 h2 {
  text-align: center;
  padding-bottom: 1em;
}
.T-BOX-8 {
  padding: 4.6875vw 0 4.4921875vw;
  background-color: #f7f7f7;
  text-align: center;
}
.T-BOX-8 h2 {
  text-align: center;
  padding-bottom: 1em;
}
.T-BOX-8 .T-BOX-8-1 {
  width: var(--window-width-1);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-2 {
  width: 24.4%;
  background-color: #fff;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-2 img {
  margin: 8% auto;
  width: 46%;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-3 {
  display: flex;
  width: 74.4%;
  align-items: center;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 {
  width: 32.2%;
  height: 48.2%;
  background-color: #fff;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 img {
  width: 16.2%;
  margin: 0 auto 1em;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 p {
  color: #191919;
  line-height: 1.6;
}
.T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 p span {
  color: #858585;
  font-size: 0.85em;
}
.T-BOX-9 {
  padding: 4.6875vw 0 4.4921875vw;
  background: linear-gradient(to top, #e4eeff, #f1e8ec);
  text-align: center;
}
.T-BOX-9 img {
  width: 68.75vw;
  margin: 3% auto 0;
  transform: translateX(8%);
}
.T-BOX-10 {
  position: relative;
  width: 100%;
}
.T-BOX-10 img {
  width: 100%;
}
.T-BOX-10 h2 {
  position: absolute;
  top: 9%;
  width: 100%;
  text-align: center;
  color: #ffffff;
}
@media (max-width: 1200px) {
  :root {
    --window-width-1: 90%;
    --window-left-1: 5%;
  }
  h2 {
    font-size: 2.33333333vw;
  }
  p {
    font-size: 1.66666667vw;
  }
  .T-BOX-3 video {
    width: 37.3046875vw;
    margin-left: 55vw;
  }
  .T-BOX-3 img {
    margin-left: 58%;
    width: 40%;
  }
  .T-BOX-3 .T-BOX-3-1 {
    width: 62vw;
    top: 5vw;
  }
  .T-BOX-7 .T-BOX-7-1 {
    top: 7.5vw;
  }
  .T-BOX-5 .T-BOX-5-1 {
    left: 8vw;
  }
  .T-BOX-9 img {
    width: 80%;
  }
  .T-BOX-10 {
    overflow: hidden;
  }
  .T-BOX-10 img {
    width: 120%;
    max-width: 120%;
    margin-left: -10%;
  }
}
@media (max-width: 767px) {
  :root {
    --window-width-1: 86%;
    --window-left-1: 7%;
  }
  h2 {
    font-size: 5.20833333vw;
    padding-bottom: 0.6em;
  }
  p {
    font-size: 3.25520833vw;
  }
  .T-BOX-1 .T-BOX-1-1 {
    left: 0;
    top: 7.8125vw;
    width: 100%;
    text-align: center;
  }
  .T-BOX-1 .T-BOX-1-1 img {
    width: 58.72395833vw;
    margin: 0 auto 65.10416667vw;
  }
  .T-BOX-1 .T-BOX-1-1 p {
    font-size: 2.60416667vw;
  }
  .T-BOX-1 .T-BOX-1-1 ul {
    padding: 0 17%;
    text-align: left;
  }
  .T-BOX-1 li {
    float: left;
    width: 50%;
  }
  .T-BOX-1 li:last-child {
    width: 100%;
  }
  .T-BOX-2 {
    padding: 8% 0 0;
  }
  .T-BOX-2 .T-BOX-2-1 {
    width: 100%;
  }
  .T-BOX-2 .T-BOX-2-1 .T-BOX-2-2 {
    padding: 0 var(--window-left-1) 5%;
  }
  .T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 {
    background-color: #f3f3f3;
    padding: 5% 3%;
  }
  .T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 div {
    width: 90%;
  }
  .T-BOX-2 .T-BOX-2-1 .T-BOX-2-3 .T-BOX-2-3-1 div img {
    width: 75%;
  }
  .T-BOX-3 {
    padding: 8% 0 0;
    background: linear-gradient(to top, #bde8fd, #faebe2);
  }
  .T-BOX-3 .T-BOX-3-1 {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    padding: 0 var(--window-left-1) 0;
  }
  .T-BOX-3 img {
    width: 92%;
    margin-left: 0;
    margin-top: -15%;
  }
  .T-BOX-4 {
    padding: 0;
  }
  .T-BOX-4 .T-BOX-4-1 {
    position: relative;
    background: linear-gradient(to top, #e7e5ff, #f3f2ff);
    width: 100%;
    right: auto;
    top: auto;
    padding: 8% var(--window-left-1) 15%;
  }
  .T-BOX-4 video {
    width: 100%;
    margin: 0;
  }
  .T-BOX-5 {
    padding-top: 8%;
    padding-bottom: 10%;
  }
  .T-BOX-5 .T-BOX-5-1 {
    display: flex;
    flex-direction: column;
  }
  .T-BOX-5 .T-BOX-5-1 .T-BOX-5-2 {
    width: 100%;
    padding-bottom: 2em;
  }
  .T-BOX-5 .T-BOX-5-1 video {
    width: 100%;
  }
  .T-BOX-6 {
    padding: 0;
  }
  .T-BOX-6 .T-BOX-6-1 {
    padding-right: var(--window-left-1);
    top: 8%;
  }
  .T-BOX-7 {
    padding: 8% var(--window-left-1);
  }
  .T-BOX-8 {
    padding: 8% var(--window-left-1);
  }
  .T-BOX-8 img {
    width: 100%;
  }
  .T-BOX-8 .T-BOX-8-1 {
    width: 100%;
  }
  .T-BOX-8 .T-BOX-8-1 .T-BOX-8-2 {
    width: 32%;
  }
  .T-BOX-8 .T-BOX-8-1 .T-BOX-8-2 img {
    width: 76%;
  }
  .T-BOX-8 .T-BOX-8-1 .T-BOX-8-3 {
    width: 66%;
  }
  .T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 {
    width: 48%;
    height: 32%;
    padding: 1em 0;
  }
  .T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 img {
    width: 20%;
    margin: 0 auto 0.6em;
  }
  .T-BOX-8 .T-BOX-8-1 .T-BOX-8-4 p {
    font-size: 2.8vw;
  }
  .T-BOX-9 {
    padding: 8% 0;
  }
  .T-BOX-9 img {
    transform: none;
    width: var(--window-width-1);
  }
  .T-BOX-10 img {
    width: 100%;
    max-width: 100%;
    margin-left: 0%;
  }
}