/*
================================================================

  comonn

================================================================
*/
.kaisei {
  font-family: 'Kaisei Opti', serif;}
.moji {
  position: relative;
  top: -2px;}
.kari {
  color: red;}

/*
================================================================

  cta

================================================================
*/
.cta-box {
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #a8f8ff 0%, #bcc4ff 100%);
  box-shadow: 0 0 20px rgba(122, 133, 224, .22);}
.cta-box figure {
  width: 400px;}
.cta-box > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  color: #444;}
.cta-box > div .title {
  margin-bottom: 20px;
  font-size: 30px;}
.cta-box > div .tel {
  pointer-events: none;
  display: inline-block;
  padding: 0 60px 15px;
  border-bottom: 1px solid #444;
  background: url(../img/top/icon_tel.png) no-repeat left top 10px;
  font-size: 48px;
  color: #444;}
.cta-box > div .txt {
  margin-top: 20px;
  font-size: 15px;}
.cta-box > div ul {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;}
.cta-box > div ul li {
  margin: 0 10px;}
.cta-box > div ul a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 60px;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: left 30px center;
  background-color: #fff;
  border-radius: 60px;
  font-size: 15px;
  font-weight: 700;
  color: #a1acf9;
  transition: .2s;}
.cta-box > div ul li.form a {
  background-image: url(../img/top/icon_form.png);}
.cta-box > div ul li.line a {
  background-image: url(../img/top/icon_line.png);}
.cta-box > div .last {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  font-size: 15px;}
.cta-box > div .last span {
  font-weight: 700;
  color: #00558f;}
.cta-box > div .last a {
  display: inline-block;
  border-bottom: 1px solid #444;
  margin-left: 30px;
  font-weight: 700;
  color: #444;}
@media (max-width: 767px) {
.cta-box {
  display: flex;
  align-items: center;}
.cta-box figure {
  display: none;}
.cta-box > div {
  width: 100%;
  padding: 7vw;}
.cta-box > div .title {
  margin-bottom: 5vw;
  font-size: 5vw;}
.cta-box > div .tel {
  pointer-events: auto;
  width: 100%;
  padding: 0 0 2vw 10vw;
  background-size: 6.5vw auto;
  background-position: left top 1.5vw;
  font-size: 8.2vw;}
.cta-box > div .txt {
  margin-top: 3vw;
  font-size: 2.8vw;}
.cta-box > div ul {
  display: block;
  margin-top: 5vw;}
.cta-box > div ul li {
  margin: 0;}
.cta-box > div ul li + li {
  margin-top: 2vw;}
.cta-box > div ul a {
  width: 75vw;
  height: 15vw;
  padding-left: 5vw;
  background-position: left 6vw center;
  border-radius: 10px;
  font-size: 3.4vw;}
.cta-box > div .last {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5vw;
  font-size: 2.6vw;}
.cta-box > div .last span {
  display: none;}
.cta-box > div .last a {
  margin: 3vw 0 0;
  font-size: 3.2vw;}}

/*
================================================================

  mv

================================================================
*/
#mv {
  position: relative;
  width: 100%;
  height: 590px;
  margin-bottom: 50px;}
#mv:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  border-bottom-right-radius: 20px;
  background: linear-gradient(135deg, #a8f8ff 0%, #bcc4ff 100%);}
#mv .flex {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 80px;
  z-index: 2;}
#mv .flex .left {
  width: 648px;}
#mv .flex .left .vbox {
  position: relative;
  width: 580px;
  height: 326px;}
#mv .flex .left .vbox:before {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -50px;
  width: 378px;
  height: 78px;
  background: url(../img/top/mv_en.png) no-repeat center / cover;}
#mv .flex .left iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;}
#mv .flex .right {
  flex: 1;
  text-align: center;}
#mv .flex .right figure {
  display: inline-block;
  width: 490px;}
@media (max-width: 767px) {
#mv {
  height: 80svh;
  margin-bottom: 5vw;}
#mv:before {
  width: 75%;}
#mv .flex {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  padding: 0 7vw 10vw;}
#mv .flex .left {
  width: 100%;}
#mv .flex .left .vbox {
  width: 100%;
  height: 48.5vw;}
#mv .flex .left iframe {
  border-radius: 15px;}
#mv .flex .left .vbox:before {
  bottom: -5vw;
  right: 5vw;
  width: 250px;
  height: 52px;}
#mv .flex .right {
  flex-grow: inherit;
  flex-shrink: 1;
  flex-basis: inherit;}
#mv .flex .right figure {
  width: 100%;
  margin-bottom: 5vw;}}

/*
================================================================

  nav

================================================================
*/
#nav ul {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;}
#nav ul li {
  width: 30%;}
#nav ul li span {
  font-size: 24px;
  color: #8194ff;
  transition: .2s;}
#nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 60px;
  font-size: 20px;
  border: 1px solid #a1acf9;
  color: #444444;
  background-repeat: no-repeat;
  background-position: right 30px center;
  background-image: url(../img/common/arrow-bottom-off.png);
  transition: .2s;}
#nav a:hover {
  color: #fff;
  background-image: url(../img/common/arrow-bottom-on.png);
  background-color: #a1acf9;}
#nav a:hover span {
  color: #fff;}
@media (max-width: 767px) {
#nav {
  overflow: hidden;}
#nav {
  padding: 0 5vw;}
#nav ul {
  flex-wrap: wrap;
  margin-bottom: 10vw;}
#nav ul li:nth-child(1) {
  width: 56%;
  margin-bottom: 2vw;}
#nav ul li:nth-child(2) {
  width: 45%;}
#nav ul li:nth-child(3) {
  width: 52%;}
#nav ul li {
  width: 48%;}
#nav ul li span {
  font-size: 3.4vw;}
#nav a {
  justify-content: flex-start;
  padding-left: 5vw;
  height: 12vw;
  background-position: right 3vw center;
  font-size: 3.2vw;}}

/*
================================================================

  sec01

================================================================
*/
#sec01 {
  position: relative;
  z-index: 2;}
#sec01:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 70%;
  background: linear-gradient(135deg, #a8f8ff 0%, #bcc4ff 100%);}
#sec01 .flex {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 3;}
#sec01 .flex .left {
  width: 50%;
  text-align: center;}
#sec01 .flex .left h2 {
  margin-top: 30px;
  font-weight: 500;
  font-size: 32px;
  color: #444;
  line-height: 1.6;}
#sec01 .flex .left h2 span {
  position: relative;
  font-size: 42px;}
#sec01 .flex .left h2 span:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 284px;
  height: 33px;
  background: url(../img/top/sec01_title.png) no-repeat center / cover;}
#sec01 .flex .left h2 span i {
  position: relative;
  z-index: 2;}
#sec01 .flex .left p {
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.8;}
#sec01 .flex .left .logo img {
  width: 80px;
  height: auto;}
#sec01 .flex .left .three {
  margin-top: 30px;}
#sec01 .flex .left .three img {
  width: 450px;
  height: auto;}
#sec01 .flex .right {
  width: 50%;}
#sec01 .flex .right img {
  position: relative;
  bottom: -30px;
  z-index: 3;}
@media (max-width: 767px) {
#sec01 {
  padding: 0 7vw 110vw;
  background: url(../img/top/bg_sec01sp.jpg) no-repeat bottom center / 100% auto;}
#sec01:before {
  display: none;}
#sec01 .flex {
  display: block;}
#sec01 .flex .left {
  width: 100%;}
#sec01 .flex .left h2 {
  margin-top: 5vw;
  font-size: 4.6vw;}
#sec01 .flex .left h2 span {
  font-size: 6.6vw;}
#sec01 .flex .left h2 span:before {
  bottom: -3vw;
  width: 200px;
  height: 23px;}
#sec01 .flex .left p {
  margin-top: 5vw;
  font-size: 3.4vw;}
#sec01 .flex .left .logo img {
  width: 15vw;}
#sec01 .flex .left .three {
  margin-top: 5vw;}
#sec01 .flex .left .three img {
  width: 100%;}
#sec01 .flex .right {
  display: none;}}

/*
================================================================

  sec02

================================================================
*/
#sec02 {
  position: relative;
  width: 100%;
  padding: 100px 0;
  background: #f1feff;
  z-index: 1;}
@media (max-width: 767px) {
#sec02 {
  padding: 5vw 7vw 10vw;}}

/*
================================================================

  sec03

================================================================
*/
#sec03 {
  min-height: 530px;
  padding-top: 80px;
  background: url(../img/top/sec03_bg.jpg) no-repeat center top;}
#sec03 .case-box .title span:before {
  top: 0;
  right: 0;
  width: 375px;
  height: 290px;}
@media (max-width: 767px) {
#sec03 {
  overflow: hidden;
  min-height: auto;
  padding: 12vw 7vw;
  background-image: url(../img/top/sec03_bg_sp.jpg);
  background-size: 100% auto;}
#sec03 .case-box {
  margin-bottom: 20vw;}
#sec03 .case-box .title img {
  width: 80%;}
#sec03 .case-box .title span:before {
  display: none;}}

/*
================================================================

  sec04

================================================================
*/
#sec04 {
  min-height: 530px;
  margin-top: 100px;
  padding-top: 80px;
  background: url(../img/top/sec04_bg.jpg) no-repeat center top;}
#sec04 .case-box .title span:before {
  top: 0;
  right: 0;
  width: 375px;
  height: 290px;}
#sec04 .movie-box {
  margin-top: -50px;
  padding: 2px;
  background: linear-gradient(135deg, #a8f8ff 0%, #bcc4ff 100%);}
#sec04 .movie-box > div {
  padding: 40px;
  background-color: #fff;}
#sec04 .movie-box > div ul {
  position: relative;
  display: flex;
  justify-content: flex-end;}
#sec04 .movie-box > div ul:before {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  width: 37px;
  height: 205px;
  background: url(../img/top/sec04_img04.png) no-repeat;}
#sec04 .movie-box > div ul li {
  width: 45%;
  height: 500px;}
#sec04 .movie-box > div ul li + li {
  margin-left: 20px;}
#sec04 .movie-box > div ul li iframe {
  width: 100%;
  height: 100%;}
@media (max-width: 767px) {
#sec04 {
  overflow: hidden;
  min-height: auto;
  margin-top: 0;
  padding: 12vw 7vw;
  background-image: url(../img/top/sec04_bg_sp.jpg);
  background-size: 100% auto;}
#sec04 .case-box .title span:before {
  display: none;}
#sec04 .case-box .title img {
  width: 70%;}
#sec04 .movie-box {
  margin-top: 10vw;}
#sec04 .movie-box > div {
  padding: 7vw;}
#sec04 .movie-box > div ul {
  flex-direction: column;}
#sec04 .movie-box > div ul:before {
  left: -10vw;
  width: 28px;
  height: 155px;
  background-size: cover;}
#sec04 .movie-box > div ul li {
  width: 100%;
  height: 75vw;}
#sec04 .movie-box > div ul li + li {
  margin-top: 5vw;
  margin-left: 0;}}

/*
================================================================

  sec05

================================================================
*/
#sec05 {
  min-height: 530px;
  margin-top: 100px;
  padding-top: 80px;
  background: url(../img/top/sec05_bg.jpg) no-repeat center top;}
#sec05 .case-box .title span:before {
  top: 0;
  right: 0;
  width: 375px;
  height: 290px;}
@media (max-width: 767px) {
#sec05 {
  overflow: hidden;
  min-height: auto;
  margin-top: 0;
  padding: 12vw 7vw;
  background-image: url(../img/top/sec05_bg_sp.jpg);
  background-size: 100% auto;}
#sec05 .case-box .title span:before {
  display: none;}
#sec05 .case-box .title img {
  width: 85%;}}

/*
================================================================

  sec06

================================================================
*/
@media (max-width: 767px) {
#sec06 {
  padding: 0 7vw;}}

/*
================================================================

  sec07

================================================================
*/
#sec07 {
  position: relative;
  min-height: 530px;
  margin-top: 100px;
  padding-top: 80px;}
#sec07:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 530px;
  background-color: #e9ebf8;}
#sec07 h2 {
  margin-bottom: 30px;
  text-align: center;
  font-size: 33px;
  color: #444444;}
#sec07 h2 span {
  position: relative;
  display: inline-block;
  font-size: 44px;
  color: #a1acf9;}
#sec07 h2 span:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  background: #a1acf9;
  border-radius: 100%;}
#sec07 .read {
  text-align: center;
  font-size: 16px;
  color: #757575;}
#sec07 .method {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;}
#sec07 .method li {
  overflow: hidden;
  width: 32%;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 5px rgba(133, 192, 255, .2);}
#sec07 .method li h3 {
  margin-bottom: 30px;
  padding: 20px 0;
  text-align: center;
  background: #a1acf9;
  font-size: 18px;
  color: #fff;}
#sec07 .method li figure {
  text-align: center;}
#sec07 .method li figure img {
  width: 180px;
  height: auto;}
#sec07 .method li p {
  padding: 30px;
  text-align: center;
  line-height: 1.8;
  font-size: 15px;}
#sec07 .point {
  width: 910px;
  margin: 100px auto 0;}
#sec07 .point ul {
  width: 100%;
  background: #fff;}
#sec07 .point ul li {
  position: relative;
  height: 380px;
  padding: 0 0 2px 2px;
  background: linear-gradient(135deg, #a8f8ff 0%, #bcc4ff 100%);}
#sec07 .point ul li:nth-child(2) {
  padding: 0 2px 2px 0;}
#sec07 .point ul li + li {
  margin-top: 100px;}
#sec07 .point ul li:nth-child(1):before {
  content: '';
  position: absolute;
  top: 0;
  left: -70px;
  width: 38px;
  height: 117px;
  background: url(../img/top/sec07_point01.png);}
#sec07 .point ul li:nth-child(2):before {
  content: '';
  position: absolute;
  top: 0;
  right: -70px;
  width: 38px;
  height: 119px;
  background: url(../img/top/sec07_point02.png);}
#sec07 .point ul li:nth-child(3):before {
  content: '';
  position: absolute;
  top: 0;
  left: -70px;
  width: 38px;
  height: 119px;
  background: url(../img/top/sec07_point03.png);}
#sec07 .point ul li > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100%;
  padding-right: 380px;
  background: #fff;}
#sec07 .point ul li:nth-child(2) > div {
  padding-right: 0;
  padding-left: 380px;}
#sec07 .point ul li > div h3 {
  margin-bottom: 30px;
  font-size: 26px;
  color: #a1acf9;}
#sec07 .point ul li > div p {
  line-height: 1.8;
  font-size: 16px;}
#sec07 .point ul li img {
  position: absolute;
  bottom: -40px;
  right: -50px;
  width: 420px;
  height: auto;}
#sec07 .point ul li:nth-child(2) img {
  right: auto;
  left: -50px;}
@media (max-width: 767px) {
#sec07 {
  min-height: auto;
  margin-top: 10vw;
  padding: 12vw 7vw 0;}
#sec07:before {
  height: 530px;}
#sec07 h2 {
  margin-bottom: 5vw;
  font-size: 6.2vw;}
#sec07 h2 span {
  font-size: 8.2vw;}
#sec07 .read {
  font-size: 3.4vw;
  line-height: 1.8;}
#sec07 .method {
  display: block;
  margin-top: 8vw;}
#sec07 .method li {
  width: 100%;}
#sec07 .method li + li {
  margin-top: 8vw;}
#sec07 .method li h3 {
  margin-bottom: 7vw;
  padding: 3.5vw 0;
  font-size: 4.2vw;}
#sec07 .method li figure img {
  width: 35vw;}
#sec07 .method li p {
  padding: 7vw;
  text-align: left;
  font-size: 3.4vw;}
#sec07 .point {
  width: 100%;
  margin-top: 12vw;}
#sec07 .point ul li {
  position: relative;
  height: auto;}
#sec07 .point ul li:nth-child(2) {
  padding: 0 2px 2px 0;}
#sec07 .point ul li + li {
  margin-top: 15vw;}
#sec07 .point ul li:nth-child(1):before {
  top: auto;
  bottom: 5vw;
  left: 5vw;
  width: 32px;
  height: 99px;
  background-size: cover;}
#sec07 .point ul li:nth-child(2):before {
  top: auto;
  bottom: 5vw;
  right: 5vw;
  width: 32px;
  height: 100px;
  background-size: cover;}
#sec07 .point ul li:nth-child(3):before {
  top: auto;
  bottom: 5vw;
  left: 5vw;
  width: 32px;
  height: 100px;
  background-size: cover;}
#sec07 .point ul li > div {
  display: block;
  text-align: center;
  width: 100%;
  height: 70vw;
  padding-right: 0;}
#sec07 .point ul li:nth-child(2) > div {
  padding-left: 0;}
#sec07 .point ul li > div h3 {
  margin-bottom: 5vw;
  font-size: 5.2vw;}
#sec07 .point ul li > div p {
  text-align: ;
  font-size: 3.4vw;}
#sec07 .point ul li img {
  bottom: -5vw;
  right: 0;
  width: 40vw;
  height: auto;}
#sec07 .point ul li:nth-child(2) img {
  right: auto;
  left: 0;}}

/*
================================================================

  sec08

================================================================
*/
#sec08 {
  margin-top: 120px;}
@media (max-width: 767px) {
#sec08 {
  margin-top: 15vw;
  padding: 0 7vw;}}

/*
================================================================

  sec09

================================================================
*/
#sec09 {
  margin-top: 100px;
  padding-top: 100px;
  background-color: #f4f7fb;}
#sec09 .h2-box {
  position: relative;
  padding: 60px 0 30px;
  border: solid #c1d5eb;
  border-width: 1px 0;
  text-align: center;}
#sec09 .h2-box h2 {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -140px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 40px;
  background: #f4f7fb;
  font-size: 26px;
  letter-spacing: .2em;
  border: solid #c1d5eb;
  border-width: 0 1px;
  color: #8fb3dc;}
#sec09 .h2-box p {
  text-align: center;
  line-height: 1.8;
  font-size: 16px;}
#sec09 .h2-box ul {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-size: 16px;}
#sec09 .h2-box ul li:nth-child(2) {
  margin: 0 50px;}
#sec09 .h2-box ul li a {
  display: inline-block;
  padding-right: 30px;
  background: url(../img/top/sec09_link.png) no-repeat right center / auto 100%;
  color: #000;}
#sec09 .menu {
  margin-top: 50px;}
#sec09 .menu li {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 5px rgba(133, 192, 255, .2);}
#sec09 .menu li + li {
  margin-top: 60px;}
#sec09 .menu li h3 {
  padding: 20px 0;
  text-align: center;
  font-size: 22px;
  background: #8fb3dc;
  color: #fff;}
#sec09 .menu li > div {
  display: flex;
  justify-content: space-between;
  padding: 60px;}
#sec09 .menu li > div > div {
  flex: 1;
  margin-right: 50px;}
#sec09 .menu li > div > div .txt {
  line-height: 2.0;
  font-size: 16px;}
#sec09 .menu li > div > div .price {
  display: flex;
  margin-top: 30px;
  font-size: 16px;}
#sec09 .menu li > div > div .price span {
  font-weight: 700;
  margin-right: 30px;}
#sec09 .menu li > div > div table {
  width: 100%;
  margin-top: 30px;
  border: solid #8fb3dc;
  border-width: 1px 0 0 1px;
  font-size: 16px;}
#sec09 .menu li > div > div table th {
  white-space: nowrap;
  width: 1px;
  padding: 20px 40px;
  border: solid #8fb3dc;
  border-width: 0 1px 1px 0;
  background: #8fb3dc;
  text-align: center;
  color: #fff;}
#sec09 .menu li > div > div table td {
  padding: 20px 0;
  border: solid #8fb3dc;
  border-width: 0 1px 1px 0;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: #8fb3dc;}
#sec09 .menu li > div img {
  width: 540px;}
@media (max-width: 767px) {
#sec09 {
  margin-top: 10vw;
  padding: 15vw 7vw 0;}
#sec09 .h2-box {
  padding: 10vw 0 5vw;}
#sec09 .h2-box h2 {
  top: -5vw;
  margin-left: -22.5vw;
  width: 45vw;
  height: 10vw;
  font-size: 4.8vw;}
#sec09 .h2-box p {
  text-align: left;
  font-size: 3.4vw;}
#sec09 .h2-box ul {
  display: block;
  margin-top: 5vw;
  font-size: 3.6vw;}
#sec09 .h2-box ul li:nth-child(2) {
  margin: 2vw 0 0;}
#sec09 .h2-box ul li + li {
  margin-top: 2vw;}
#sec09 .h2-box ul li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 13vw;
  border-radius: 10px;
  text-align: left;
  padding-right: 0;
  padding-left: 5vw;
  font-weight: 700;
  background: url(../img/top/sec09_link.png) no-repeat right 5vw center / auto 30%;
  background-color:#fff;}
#sec09 .menu {
  margin-top: 8vw;}
#sec09 .menu li + li {
  margin-top: 10vw;}
#sec09 .menu li h3 {
  padding: 3.5vw 0;
  font-size: 4.2vw;}
#sec09 .menu li > div {
  flex-direction: column-reverse;
  padding: 7vw;}
#sec09 .menu li > div > div {
  width: 100%;
  margin-right: 0;
  margin-top: 5vw;}
#sec09 .menu li > div > div .txt {
  line-height: 1.8;
  font-size: 3.4vw;}
#sec09 .menu li > div > div .price {
  flex-wrap: wrap;
  margin-top: 5vw;
  font-size: 3.6vw;}
#sec09 .menu li > div > div .price span {
  width: 100%;
  margin-right: 0;
  margin-bottom: 3vw;}
#sec09 .menu li > div > div table {
  margin-top: 5vw;
  font-size: 3.4vw;}
#sec09 .menu li > div > div table th {
  padding: 3.5vw 4vw;}
#sec09 .menu li > div > div table td {
  font-size: 3.5vw;}
#sec09 .menu li > div img {
  width: 100%;}}

/*
================================================================

  sec10

================================================================
*/
#sec10 {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #f4f7fb;}
#sec10 .h2-box {
  position: relative;
  padding: 60px 0 0;
  border: solid #c1d5eb;
  border-width: 1px 0 0;
  text-align: center;}
#sec10 .h2-box h2 {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -140px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 40px;
  background: #f4f7fb;
  font-size: 26px;
  letter-spacing: .2em;
  border: solid #c1d5eb;
  border-width: 0 1px;
  color: #8fb3dc;}
#sec10 table {
  width: 100%;
  border-bottom: 1px solid #8fb3dc;
  font-size: 16px;
  line-height: 1.7;}
#sec10 table tr + tr {
  border-top: 1px dashed #8fb3dc;}
#sec10 table tr th {
  min-width: 300px;
  padding: 20px 0;
  color: #8fb3dc;}
#sec10 table tr td {
  padding: 20px 0;}
@media (max-width: 767px) {
#sec10 {
  padding: 20vw 7vw 12vw;}
#sec10 .h2-box {
  padding: 10vw 0 0vw;}
#sec10 .h2-box h2 {
  top: -5vw;
  margin-left: -22.5vw;
  width: 45vw;
  height: 10vw;
  font-size: 4.8vw;}
#sec10 table,
#sec10 table tbody,
#sec10 table tr,
#sec10 table th,
#sec10 table td {
  display: block;}
#sec10 table {
  line-height: 1.8;
  font-size: 3.4vw;}
#sec10 table tr + tr {
  border-top: 1px solid #8fb3dc;}
#sec10 table tr th {
  white-space: nowrap;
  border-bottom: 1px dashed; #8fb3dc;
  text-align: left;
  min-width: 10vw;
  padding: 3vw 2vw;}
#sec10 table tr td {
  padding: 3vw 2vw;}}

/*
================================================================

  sec11

================================================================
*/
#sec11 {
  height: 560px;
  background: url(../img/top/bg_sec11.jpg) no-repeat center top;}
#sec11 ul li {
  position: absolute;
  top: 370px;
  width: 230px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;}
#sec11 ul li:nth-child(1) {
  left: 462px;}
#sec11 ul li:nth-child(2) {
  left: 712px;}
#sec11 ul li:nth-child(3) {
  left: 962px;}
@media (max-width: 767px) {
#sec11 {
  height: 186vw;
  background-size: 100% auto;
  background-color: red;
  background-image: url(../img/top/bg_sec11sp.jpg);
  background-position: center bottom;}
#sec11 ul li {
  top: auto;
  width: 35vw;
  text-align: center;
  font-size: 3vw;
  letter-spacing: 0;}
#sec11 ul li:nth-child(1) {
  top: 65vw;
  left: 32.5vw;}
#sec11 ul li:nth-child(2) {
  top: 100vw;
  left: 12.8vw;}
#sec11 ul li:nth-child(3) {
  top: 101vw;
  left: 52vw;}}

/*
================================================================

  sec12

================================================================
*/
#sec12 {
  width: 100%;
  background: #ecf0f3;}
#sec12 .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;}
#sec12 ul {
  display: flex;}
#sec12 ul li + li {
  margin-left: 50px;}
#sec12 ul li a {
  display: inline-block;
  padding-right: 30px;
  background: url(../img/common/arrow-right.png) no-repeat right center / auto 100%;
  color: #000;}
@media (max-width: 767px) {
#sec12 {
  padding: 0 5vw;}
#sec12 .inner {
  justify-content: space-between;
  height: 13vw;}
#sec12 ul {
  width: 100%;
  justify-content: space-between;
  font-size: 2.8vw;}
#sec12 ul li + li {
  margin-left: 0;}
#sec12 ul li a {
  padding-right: 5vw;}}

/*
================================================================

  case

================================================================
*/
.case-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 120px;}
.case-box .left {
  position: relative;
  width: 50%;
  padding-top: 60px;}
.case-box .title {
  margin-bottom: 50px;}
.case-box .title span {
  position: relative;}
.case-box .txt {
  line-height: 2.0;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;}
.case-box .right figure img {
  width: 430px;
  height: auto;}
.case-box .abimg02 {
  position: absolute;
  bottom: 0;
  left: 400px;}
.case-box .abimg02 img {
  width: 220px;
  height: auto;}
.case-box .abimg03 {
  position: absolute;
  bottom: 50px;
  left: 100px;}
.case-box .abimg03 img {
  width: 220px;
  height: auto;}
.case-list {
  text-align: center;
  color: #444;}
.case-list + .case-list {
  margin-top: 120px;}
.case-list h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
  font-size: 28px;}
.case-list h2:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 110%;
  height: 5px;
  margin-left: -55%;
  background: linear-gradient(135deg, #a8f8ff 0%, #bcc4ff 100%);}
.case-list h2 span {
  position: relative;
  z-index: 2;}
.case-list .txt {
  font-size: 16px;}
.case-list ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  padding: 0 40px;
  text-align: left;}
.case-list ul li {
  width: 30%;
  margin-top: 30px;}
.case-list ul li + li {
  margin-left: 5%;}
.case-list ul li:nth-child(3n+1) {
  margin-left: 0;}
.case-list ul li:nth-child(-n+3) {
  margin-top: 0;}
.ill01:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -140px;
  width: 100px;
  height: 100px;
  background: url(../img/top/ill01.png) no-repeat center / cover;}
.ill02:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -140px;
  width: 100px;
  height: 100px;
  background: url(../img/top/ill02.png) no-repeat center / cover;}
.ill03:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -140px;
  width: 100px;
  height: 100px;
  background: url(../img/top/ill03.png) no-repeat center / cover;}
@media (max-width: 767px) {
.case-box {
  flex-direction: column;
  margin-bottom: 0;}
.case-box .left {
  width: 100%;
  padding-top: 0;}
.case-box .title {
  margin-bottom: 7vw;}
.case-box .txt {
  line-height: 2.0;
  padding-left: 0;
  font-size: 3.4vw;}
.case-box .right figure {
  text-align: center;}
.case-box .right figure img {
  width: 80%;}
.case-box .abimg02 {
  position: relative;
  bottom: auto;
  top: 5vw;
  left: 5vw;}
.case-box .abimg02 img {
  width: 35vw;}
.case-box .abimg03 {
  position: relative;
  bottom: auto;
  top: -10vw;
  left: 48vw;}
.case-box .abimg03 img {
  width: 35vw;}
.case-list {
  text-align: left;}
.case-list + .case-list {
  margin-top: 18vw;}
.case-list h2 {
  margin-bottom: 5vw;
  font-size: 6vw;}
.case-list .txt {
  text-align: left;
  line-height: 1.8;
  font-size: 3.4vw;}
.case-list ul {
  overflow-x: auto;
  flex-wrap: nowrap;
  margin-top: 5vw;
  padding: 0;}
.case-list ul li {
  flex-shrink: 0;
  width: 60vw;
  margin-top: 0;}
.case-list ul li + li {
  margin-left: 5vw;}
.ill01:after {
  bottom: -2vw;
  right: -23vw;
  width: 18vw;
  height: 18vw;}
.ill02:after {
  bottom: -2vw;
  right: -23vw;
  width: 18vw;
  height: 18vw;}
.ill03:after {
  bottom: -2vw;
  right: -23vw;
  width: 18vw;
  height: 18vw;}}