@charset "utf-8";

/*============================================================
base
============================================================*/

body { padding-top: 16vw; /* 120px */ }

.pc { display: none; }
.mb { display: block; }
br.mb,span.mb { display: inline; }

/*============================================================
main
============================================================*/

.global-main {
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* area-pagetitle *******************************************/

.area-pagetitle {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 29.333333333vw; /* 220px */
  background : -moz-linear-gradient(0deg,rgba(243, 244, 246, 1) 0%,rgba(234, 236, 239, 1) 19.91%,rgba(210, 214, 219, 1) 52.38%,rgba(170, 178, 186, 1) 93.15%,rgba(163, 171, 180, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(243, 244, 246, 1) 0%, rgba(234, 236, 239, 1) 19.91%, rgba(210, 214, 219, 1) 52.38%, rgba(170, 178, 186, 1) 93.15%, rgba(163, 171, 180, 1) 100%);
  background : linear-gradient(90deg, rgba(243, 244, 246, 1) 0%, rgba(234, 236, 239, 1) 19.91%, rgba(210, 214, 219, 1) 52.38%, rgba(170, 178, 186, 1) 93.15%, rgba(163, 171, 180, 1) 100%);
}

.area-pagetitle h1 {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #192c43;
}

.area-pagetitle h1 img {
  height: 16.8vw; /* 126px */
  width: auto;
}

.area-pagetitle h1 span {
  display: inline-block;
  margin-top: 1em;
  margin-left: 2.4vw; /* 18px */
  font-size: 2.4vw; /* 18px */
  font-weight: 700;
  letter-spacing: .2em;
}

#trial .area-pagetitle,
#repair .area-pagetitle {
  height: 40vw; /* 300px */
  background: transparent;
  background-size: cover;
}

#trial .area-pagetitle { background-image: url( ../img/ttl-trial-bg-mb.jpg ); }
#repair .area-pagetitle { background-image: url( ../img/ttl-repair-bg-mb.jpg ); }

#trial .area-pagetitle h1,
#repair .area-pagetitle h1 { color: #fff; }

/* area-contact *********************************************/

.area-contact {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 72vw; /* 540px */
  height: 72vw; /* 540px */
  padding-top: 12vw; /* 90px */
  background-color: #9f4c55;
}

.area-contact > p {
  display: inline-block;
  position: relative;
  width: 100%;
  text-align: center;
}

.area-contact > p > span {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  font-size: 5.066666667vw; /* 38px */
  font-weight: 700;
  color: #fff;
}
.area-contact > p > span:last-child { margin-top: 4vw; /* 30px */ }

.area-contact > p > span::before {
  content: '';
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.8vw; /* 6px */
  background-color: #b27077;
}

.area-contact > p > span > span {
  position: relative;
  letter-spacing: 0;
}

.area-contact a.btn-contact {
  height: 13.333333333vw; /* 100px */
  width: 72.533333333vw; /* 544px */
  margin: 0 auto;
  margin-top: 4.8vw; /* 36px */
  background-color: #fff;
  color: #192c43;
}

.area-contact a.btn-contact > span {
  font-size: 4.266666667vw; /* 32px */
  font-weight: 700;
  letter-spacing: .05em;
}

#home .area-contact {
  background-color: transparent;
  min-height: 69.333333333vw; /* 520px */
  height: 69.333333333vw; /* 520px */
  padding-top: 8.266666667vw; /* 62px */
}

/* box-mov ***************************************************/

.box-mov {
  position: relative;
  width: 82.4vw; /* 618px */
  height: 46.4vw; /* 348px */
  margin: 0 auto;
  background-color: #444;
}

.box-mov > iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ttl-section **********************************************/

.ttl-section,
.ttl-section img {
  height: 10.666666667vw; /* 80px */
  width: auto;
}

/*============================================================
news
============================================================*/

.area-news {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  padding-top: 8vw; /* 60px */
  padding-bottom: 28vw; /* 210px */
}

/* list */

.list-news li {
  font-size: 4vw; /* 30px */
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6.666666667vw; /* 50px */
  padding-bottom: 4vw; /* 30px */
  border-bottom: 0.266666667vw solid #808080;
}

.list-news li .date {
  display: block;
  margin-bottom: 1.333333333vw; /* 10px */
  font-size: 3.733333333vw; /* 28px */
  font-weight: 400;
  font-style: italic;
  letter-spacing: .1em;
}

.wp-pagenavi {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 1.333333333vw; /* 10px */
}

.wp-pagenavi > span,
.wp-pagenavi > a {
  display : -webkit-inline-box;
  display : -webkit-inline-flex;
  display : inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 10.4vw; /* 78px */
  min-width: 1em;
  margin: 0 2vw; /* 15px */
  font-size: 4.533333333vw; /* 34px */
}

.wp-pagenavi > span:not(.extend),
.wp-pagenavi > a {
  transform: skewX(-20deg);
  min-width: 10.4vw; /* 78px */
  padding: 0 .75em;
  background-color: #192c43;
  color: #fff;
}

.wp-pagenavi > span:not(.extend) > span,
.wp-pagenavi > a > span { transform: skewX(20deg); }

/* single */

.area-ttl { margin-bottom: 6.666666667vw; /* 50px */ }

.area-ttl .date {
  margin-bottom: 3.2vw; /* 24px */
  font-size: 4vw; /* 30px */
  font-weight: 400;
  font-style: italic;
  letter-spacing: .1em;
}

.area-ttl h1 {
  font-size: 4.533333333vw; /* 34px */
  font-weight: 700;
  line-height: 1.25;
}

.area-content {
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.area-content > p,
.area-content > div { clear: both; }

.area-content:after,
.area-content > p:after,
.area-content > div:after {content:'';display:block;clear:both;}

.area-content > p + p,
.area-content > p + div,
.area-content > div + div,
.area-content > div + p { margin-top: 1.5em; }

.area-content em { font-style: italic; }

.area-content a:link,
.area-content a:visited { text-decoration: underline; }
.area-content a:hover,
.area-content a:active { text-decoration: none; }

.area-content .alignleft,
.area-content img.alignleft,
.area-content .alignright,
.area-content img.alignright,
.area-content .aligncenter,
.area-content img.aligncenter {
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.wp-caption {
  clear: both;
  line-height: 1.25;
}

/*============================================================
contact
============================================================*/

.area-step {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 9.333333333vw; /* 70px */
}

.area-step ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.area-step li {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  font-size: 3.2vw; /* 24px */
  font-weight: 700;
  color: #8c95a1;
}

.area-step li + li { margin-left: 5.6vw; /* 42px */ }

.area-step li > span {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 10.4vw; /* 78px */
  height: 10.4vw; /* 78px */
  border: 0.266666667vw solid #8c95a1; /* 2px */
  background-color: #fff;
  color: #8c95a1;
  font-size: 4.533333333vw; /* 34px */
  font-weight: 400;
}

.area-step li.selected { color: #192c43; }

.area-step li.selected > span {
  border-color: #192c43;
  background-color: #192c43;
  color: #fff;
}

.area-msg {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 8vw; /* 60px */
}

.area-msg p {
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
}

.area-form {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 8vw; /* 60px */
  padding-bottom: 27.333333333vw; /* 205px */
}

.list-input dt {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 2vw; /* 15px */
}

.list-input dt > label {
  font-size: 4vw; /* 30px */
  font-weight: 700;
  margin-right: 2.666666667vw; /* 20px */
}

.list-input dt > span {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 9.333333333vw; /* 70px */
  height: 4.266666667vw; /* 32px */
  border-radius: 2.133333333vw; /* 16px */
  background-color: #808080;
  font-size: 2.933333333vw; /* 22px */
  color: #fff;
}

.list-input dt > span.reg { background-color: #ff934f; }

.list-input dd {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 5.333333333vw; /* 40px */
  min-height: 8.8vw; /* 66px */
}

.list-input dd ul { margin-top: 1.333333333vw; /* 10px */ }
.list-input dd ul li + li { margin-top: 2vw; /* 15px */ }

.list-input dd ul li a:link,
.list-input dd ul li a:visited { text-decoration: underline; }

.list-input dd label.error {
  min-width: 100%;
  margin-top: .5em;
  color: red;
}

.box-conf {
  border: 0.266666667vw solid #e8eaec;
  padding: 5.333333333vw 5.333333333vw 1.333333333vw 5.333333333vw; /* 45px 40px */
}

.list-conf dt {
  font-size: 4vw; /* 30px */
  font-weight: 700;
}

.list-conf dd {
  margin-left: 2.4vw; /* 18px */
  margin-top: 2vw; /* 15px */
  margin-bottom: 4vw; /* 30px */
  font-size: 4vw; /* 30px */
  line-height: 6.666666667vw; /* 50px */
}

.list-conf dd .error { color: red; }

.area-comp {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  padding: 8vw 0 27.333333333vw 0; /* 60px 0 205px 0 */
}

.area-compmsg { padding-bottom: 10.666666667vw; /* 80px */ }

.area-comp p {
  text-align: center;
  font-size: 4vw; /* 30px */
}

.area-comp p.msg {
  margin-bottom: 4.666666667vw; /* 35px */
  font-size: 6.133333333vw; /* 46px */
  font-weight: 700;
  line-height: 9.333333333vw; /* 70px */
  color: #192c43;
}

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
  width: 5.333333333vw; /* 40px */
  height: 5.333333333vw; /* 40px */
  background-size: 10.666666667vw 10.666666667vw; /* 80px 80px */
  margin-right: 1.333333333vw; /* 10px */
}
input[type="checkbox"] + label::before { background-position: 0 0; }
input[type="radio"] + label::before { background-position: 0 -5.333333333vw; }
input[type="checkbox"]:checked + label::before { background-position: -5.333333333vw 0; }
input[type="radio"]:checked + label::before { background-position: -5.333333333vw -5.333333333vw; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  min-height: 8.8vw; /* 66px */
  padding: 0 2.666666667vw; /* 20px */
  background-color: #e8eaec;
  font-size: 4.266666667vw; /* 32px */
}

textarea {
  padding: .75em 2.666666667vw; /* 20px */
  line-height: 1.5;
}

input[type="text"]#zip {
  padding-left: 8vw; /* 60px */
  background-image: url( ../img/icon-zip.svg );
  background-size: 4vw 4vw; /* 30px 30px */
  background-position: 3vw 50%;
}

.box-file {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 14.133333333vw; /* 106px */
  padding: 0 2.533333333vw; /* 19px */
  border: 0.266666667vw solid #e8eaec; /* 2px */
}

.box-file label {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 30.4vw; /* 228px */
  width: 30.4vw; /* 228px */
  height: 8.8vw; /* 66px */
  background-color: #192c43;
  text-align: center;
  font-size: 3.733333333vw; /* 28px */
  color: #fff;
}

.box-file span {
  display: block;
  margin-left: 2.533333333vw; /* 19px */
  font-size: 3.733333333vw; /* 28px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}

.box-file + p.msg {
  margin-left: 1em;
  text-indent: -1em;
  margin-top: .75em;
  line-height: 1.5;
  font-size: 3.733333333vw; /* 28px */
  color: #555;
}

.box-btn {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 9.333333333vw; /* 70px */
}

.box-btn .btn-skew {
  width: 52vw; /* 390px */
  height: 10.4vw; /* 78px */
}

.box-btn button { letter-spacing: 1em; }

.box-btn button + button { margin-top: 4vw; /* 30px */ }

.box-btn .btn-primary { background-color: #192c43; }
.box-btn .btn-secondary { background-color: #a3abb4; }

/*============================================================
privacy
============================================================*/

.area-privacy {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  padding-top: 9.333333333vw; /* 70px */
  padding-bottom: 28vw; /* 210px */
}

.area-privacy > p {
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.area-privacy > p.lbl {
  margin-top: 1.5em;
  margin-bottom: .75em;
  font-size: 4.533333333vw; /* 34px */
  font-weight: 700;
  line-height: 8.133333333vw; /* 61px */
}

.area-privacy a:link,
.area-privacy a:visited {
  text-decoration: underline;
}

.area-privacy a:hover,
.area-privacy a:active {
  text-decoration: none;
}

/*============================================================
sitemap
============================================================*/

.area-sitemap {
  width: 66.666666667vw; /* 500px */
  margin: 0 auto;
  padding-top: 9.333333333vw; /* 70px */
  padding-bottom: 28vw; /* 210px */
}

.area-sitemap ul {
  margin-top: -8vw; /* 60px */
}

.area-sitemap li {
  width: 66.666666667vw; /* 500px */
  height: 10vw; /* 75px */
  margin-top: 8vw; /* 60px */
  background-image: url( ../img/line-sitemap-mb.svg );
  background-size: 82.4vw 10vw;
  background-position: 100% 0;
}

.area-sitemap li a {
  display: block;
  width: 66.666666667vw; /* 500px */
  height: 10vw; /* 75px */
  padding-left: 2.34375vw; /* 30px */
  font-size: 4vw; /* 30px */
  font-weight: 700;
  color: #192c43;
}

/*============================================================
company
============================================================*/

#company .global-main { background-color: #e3e6e8; }

.area-message {
  position: relative;
  padding-top: 8vw; /* 60px */
  padding-bottom: 9.333333333vw; /* 70px */
  margin-bottom: 5.333333333vw; /* 40px */
  background-color: #fff;
}

.area-message::after {
  content: '';
  display: block;
  width: 100%;
  height: 5.333333333vw; /* 40px */
  background-size: 113.733333333vw 5.333333333vw; /* 853px 40px */
  position: absolute;
  top: auto;
  bottom: -5.333333333vw; /* -40px */
  left: 0;
  background-image: url( ../img/bar-right.svg );
  background-position: 56vw 0; /* 420px 0 */
}

.area-message > div {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 10vw; /* 75px */
}

.area-message .ttl {
  margin-top: -1.866666667vw; /* 14px */
  margin-bottom: -1.866666667vw; /* 14px */
  text-align: center;
  font-size: 6.133333333vw; /* 46px */
  font-weight: 700;
  line-height: 10.133333333vw; /* 76px */
  letter-spacing: .03em;
  color: #192c43;
  white-space: nowrap;
}

.area-message > div > div > img {
  margin-top: 6vw; /* 45px */
  width: 82.4vw; /* 618px */
  height: 48.666666667vw; /* 365px */
}

.area-message .bdy {
  margin-top: 1em;
  margin-bottom: -1.6vw; /* 12px */
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.area-message .sig {
  margin-top: 5.6vw; /* 42px */
  text-align: right;
}

.area-message .sig > span {
  display: block;
  font-size: 3.733333333vw; /* 28px */
}

.area-message .sig img {
  display: inline-block;
  margin-top: 2.666666667vw; /* 20px */
  width: 33.333333333vw; /* 250px */
  height: 6.8vw; /* 51px */
}

.area-aboutus {
  padding-top: 6.666666667vw; /* 50px */
  padding-bottom: 28vw; /* 210px */
}

.area-aboutus dl {
  position: relative;
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 2.666666667vw; /* 20px */
}

.area-aboutus dt {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  left: 0;
  height: 16vw; /* 120px */
  font-size: 4vw; /* 30px */
  font-weight: 700;
}

.area-aboutus dd {
  padding: 4.666666667vw 0; /* 35px */
  padding-left: 21.333333333vw; /* 160px */
  min-height: 16vw; /* 120px */
  border-bottom: 0.266666667vw solid #8c95a1; /* 2px */
  font-size: 4vw; /* 30px */
  line-height: 6.666666667vw; /* 50px */
}

.area-aboutus > div {
  position: relative;
  width: 82.4vw; /* 618px */
  height: 41.333333333vw; /* 310px */
  margin: 0 auto;
  margin-top: 6.4vw; /* 48px */
}

.area-aboutus > div iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*============================================================
trial / repair
============================================================*/

#trial .global-main,
#repair .global-main { background-color: #e3e6e8; }

.box-contact {
  z-index: 2;
  position: absolute;
  top: auto;
  left: 50%;
  margin-left: -30vw;
  display: block;
  width: 60vw; /* 450px */
  height: 17.333333333vw; /* 130px */
  margin-top: 6.666666667vw; /* 50px */
  background-color: #9f4c55;
}

.box-contact > a.btn-contact {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 60vw; /* 450px */
  height: 17.333333333vw; /* 130px */
  line-height: 5.333333333vw; /* 40px */
  font-size: 4vw; /* 30px */
  font-weight: 700;
  color: #fff;
}

.box-contact > a.btn-contact i {
  display: block;
  width: 9.866666667vw; /* 74px */
  height: 8vw; /* 60px */
  background-image: url( ../img/icon-btn-contact-mb.svg );
  background-size: 9.866666667vw 8vw;
  margin-right: 2.133333333vw; /* 16px */
}

.box-contact > a.btn-contact i svg { display: none; }

.area-worry {
  position: relative;
  padding-top: 34.666666667vw; /* 260px */
  padding-bottom: 8vw; /* 60px */
  background-color: #fff;
  z-index: 1;
}

.area-worry::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5.333333333vw 4vw 0 4vw; /* 40px 30px 0 30px */
  border-color: #fff transparent transparent transparent;
  position: absolute;
  right: 50%;
  bottom: -5.333333333vw; /* -40px */
  -webkit-transform: translate(50%,0);
  transform: translate(50%,0);
  z-index: 1;
}

.area-worry > p {
  text-align: center;
  margin: -1.866666667vw auto; /* 14px */
  line-height: 10.133333333vw; /* 76px */
  font-size: 6.4vw; /* 48px */
  font-weight: 700;
  letter-spacing: .075em;
  color: #192c43;
}

.area-worry > ul {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 6.666666667vw; /* 50px */
}

.area-worry > ul li {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 16.533333333vw; /* 124px */
  line-height: 5.333333333vw; /* 40px */
  font-size: 3.733333333vw; /* 28px */
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;
}

.area-worry > ul li::before {
  content: '';
  display: block;
  width: 4.8vw; /* 36px */
  height: 3.466666667vw; /* 26px */
  margin: -4vw 3.333333333vw 0 2.4vw; /* -30px 25px 0 18px */
  background-image: url( ../img/icon-check.svg );
  background-size: 4.8vw 3.466666667vw; /* 36px 26px */
}

.area-worry > ul li + li { margin-top: 2.666666667vw; /* 20px */ }

.area-worry > ul li:nth-child( odd ) { background-color: #192c43; }
.area-worry > ul li:nth-child( even ) { background-color: #475669; }

#repair .area-worry > ul li:nth-child( 1 ){
  min-height: 11.466666667vw; /* 86px */
}

#repair .area-worry > ul li:nth-child( 1 )::before {
  margin-top: 0;
}

.area-achieve {
  padding-top: 10.666666667vw; /* 80px */
  padding-bottom: 8vw; /* 60px */
  background-size: cover;
}

#trial .area-achieve { background-image: url( ../img/area-achieve-bg-trial-mb.jpg); }
#repair .area-achieve { background-image: url( ../img/area-achieve-bg-repair-mb.jpg); }

.area-achieve > p {
  display: inline-block;
  position: relative;
  width: 100%;
  text-align: center;
}

.area-achieve > p > span {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  font-size: 4.533333333vw; /* 34px */
  font-weight: 700;
  color: #fff;
}
.area-achieve > p > span:last-child { margin-top: 4vw; /* 30px */ }

.area-achieve > p > span::before {
  content: '';
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.8vw; /* 6px */
  background-color: #b27077;
}

.area-achieve > p > span > span {
  position: relative;
  letter-spacing: .14em;
}

.area-achieve > ul {
  width: 73.333333333vw; /* 550px */
  margin: 0 auto;
  margin-top: 4vw; /* 30px */
}

.area-achieve > ul li {
  width: 73.333333333vw; /* 550px */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1.866666667vw; /* 14px */
  min-height: 10.666666667vw; /* 80px */
  font-size: 3.733333333vw; /* 28px */
  font-weight: 700;
  color: #192c43;
  letter-spacing: .05em;
}

.area-achieve > ul li:nth-child( odd ) { background-color: rgba(255, 255, 255, .9); }
.area-achieve > ul li:nth-child( even ) { background-color: rgba(209, 213, 217, .9); }

.area-achieve > ul li span > span { font-size: 70%; }

.area-mov {
  padding-top: 5.333333333vw; /* 40px */
  padding-bottom: 14.666666667vw; /* 110px */
}

.area-mov > p {
  padding-bottom: 2.933333333vw; /* 22px */
  background-image: url( ../img/area-mov-p-bg.svg );
  background-size: 69.333333333vw 2.933333333vw; /* 520px 22px */
  background-position: 50% 100%;
  text-align: center;
  line-height: 10.666666667vw; /* 80px */
  font-size: 4.533333333vw; /* 34px */
  font-weight: 700;
  letter-spacing: .14em;
  color: #192c43;
}

.area-mov > .box-mov { margin-top: 2.666666667vw; /* 20px */ }

.area-case {
  position: relative;
  padding-top: 6.25vw; /* 80px */
  padding-bottom: 8.59375vw; /* 110px */
  margin-top: 4.6875vw; /* 60px */
  margin-bottom: 4.6875vw; /* 60px */
  background-color: #fff;
}

.area-case::before,
.area-case::after,
.area-faq::before {
  content: '';
  display: block;
  width: 100%;
  height: 5.333333333vw; /* 40px */
  background-size: 113.733333333vw 5.333333333vw; /* 853px 40px */
  position: absolute;
  top: -5.333333333vw; /* -40px */
  left: 0;
  background-image: url( ../img/bar-left.svg );
  background-position: -69.733333333vw 0; /* -523px 0*/
}

.area-case::after {
  background-image: url( ../img/bar-right.svg );
  background-position: 56vw 0; /* 420px 0 */
  top: auto;
  bottom: -5.333333333vw; /* -40px */
}

.box-case {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 8vw; /* 60px */
}

.box-case > div {
  padding: 4vw; /* 30px */
  padding-bottom: 5.333333333vw; /* 40px */
  background-color: #e3e6e8;
}

.box-case > div + div {
  margin-top: 4vw; /* 30px */
}

.box-case > div img {
  width: 74.4vw; /* 558px */
  height: 50.666666667vw; /* 380px */}

.box-case > div div {
  margin-top: 4.666666667vw; /* 35px */
}

.box-case .ttl {
  margin-top: -1.466666667vw; /* -11px */
  font-size: 4.8vw; /* 36px */
  font-weight: 700;
  line-height: 7.733333333vw; /* 58px */
  letter-spacing: .06em;
  color: #192c43;
}

.box-case .bdy {
  margin-top: 2vw; /* 15px */
  margin-bottom: -1.6vw; /* -12px */
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.box-voice {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 4.666666667vw; /* 35px */
}

.box-voice h3 {
  width: 82.4vw; /* 618px */
  height: 12.8vw; /* 96px */
}

.box-voice ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.333333333vw; /* 10px */
  margin-bottom: -3.2vw; /* -24px */
  font-size: 4vw; /* 30px */
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 5.6vw; /* 42px */
  text-align: justify;
  text-justify: inter-character;
}

.box-voice li {
  position: relative;
  padding: 3.2vw 0; /* 24px 0 */
}

.box-voice li + li::after {
  content: '';
  display: block;
  width: 100%;
  height: 0.533333333vw; /* 4px */
  position: absolute;
  right: 0;
  top: -0.266666667vw; /* -2px */
  left: 0;
  background-image: url( ../img/line-dot-mb.svg );
  background-repeat: repeat-x;
  background-size: 1.333333333vw 0.533333333vw; /* 10px 4px */
}

.area-flow {
  padding-top: 6.666666667vw; /* 50px */
  padding-bottom: 10.666666667vw; /* 80px */
}

.box-flow {
  position: relative;
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 9.333333333vw; /* 70px */
}

.box-flow > div {
  width: 82.4vw; /* 618px */
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.box-flow > div:nth-child( even ){
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.box-flow .lbl {
  position: relative;
  min-width: 22.666666667vw; /* 170px */
  width: 22.666666667vw; /* 170px */
  height: 22.666666667vw; /* 170px */
  border: 0.266666667vw solid #192c43; /* 2px */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #e3e6e8;
  z-index: 1;
}

.box-flow > div:nth-child( even ) .ttl { text-align: right; }

.box-flow .lbl img {
  width: 11.2vw; /* 84px */
  height: 11.2vw; /* 84px */
}

.box-flow .lbl::after {
  content: '';
  display: block;
  position: absolute;
  top: 22.4vw; /* 168px */
  background-position: 0 100%;
  width: 72vw; /* 540px */
}

.box-flow > div:nth-child( odd ) .lbl::after {
  background-image: url( ../img/line-flow-step-odd-mb.svg );
  background-size: 72vw 66.666666667vw; /* 500px */
  left: 4.933333333vw; /* 37px */
}

.box-flow > div:nth-child( even ) .lbl::after {
  background-image: url( ../img/line-flow-step-eve-mb.svg );
  background-size: 72vw 35.466666667vw; /* 266px */
  right: 4.933333333vw; /* 37px */
}

.box-flow > div:nth-child( 1 ) {
  height: 80.533333333vw; /* 604px */
}

.box-flow > div:nth-child( 1 ) .lbl::after {
  height: 57.866666667vw; /* 434px */
}

.box-flow > div:nth-child( 2 ) {
  height: 50.933333333vw; /* 382px */
}

.box-flow > div:nth-child( 2 ) .lbl::after {
  height: 28.266666667vw; /* 212px */
}

.box-flow > div:nth-child( 3 ) {
  height: 83.466666667vw; /* 626px */
}

.box-flow > div:nth-child( 3 ) .lbl::after {
  height: 60.8vw; /* 456px */
}

.box-flow > div:nth-child( 4 ) {
  height: 43.466666667vw; /* 326px */
}

.box-flow > div:nth-child( 4 ) .lbl::after { display: none; }

.box-flow > div > div {
  min-width: 57.066666667vw; /* 428px */
  width: 57.066666667vw; /* 428px */
}

.box-flow .ttl {
  margin-top: -1.466666667vw; /* -11px */
  font-size: 4.8vw; /* 36px */
  line-height: 7.733333333vw; /* 58px */
  font-weight: 700;
  color: #192c43;
}

.box-flow .bdy {
  margin-top: .25em;
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.box-flow .link-tel {
  display: block;
  width: 46.133333333vw; /* 346px */
  height: 4.266666667vw; /* 32px */
  margin-top: 2.666666667vw; /* 20px */
}

.box-flow .link-tel img {
  width: 46.133333333vw; /* 346px */
  height: 4.266666667vw; /* 32px */
}

.box-flow .btn-contact {
  height: 9.6vw; /* 72px */
  margin-top: 3.333333333vw; /* 25px */
  margin-left: 2.666666667vw; /* 20px */
  padding: 0 2.666666667vw; /* 0 20px */
  background-color: #192c43;
  font-size: 3.466666667vw; /* 26px */
}

.box-flow .box-des {
  width: 100%;
  height: 34.933333333vw; /* 262px */
  margin-top: 2.666666667vw; /* 20px */
  padding: 3.5vw;
  background-color: #fff;
}

.box-flow .box-des .des-lbl {
  font-size: 4.266666667vw; /* 32px */
  font-weight: 700;
  color: #192c43;
}

.box-flow .box-des .des-addr {
  font-size: 3.733333333vw; /* 28px */
  line-height: 5.866666667vw; /* 44px */
  margin-top: 1.6vw; /* 12px */
}

.area-faq {
  position: relative;
  padding-top: 6.666666667vw; /* 50px */
  padding-bottom: 9.333333333vw; /* 70px */
  margin-top: 5.333333333vw; /* 40px */
  background-color: #fff;
}

.area-faq dl {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 9.333333333vw; /* 70px */
}

.area-faq dt {
  position: relative;
  min-height: 13.333333333vw; /* 100px */
  margin-top: 6.666666667vw; /* 50px */
  padding-left: 16vw; /* 120px */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 4.8vw; /* 36px */
  font-weight: 700;
  line-height: 7.733333333vw; /* 58px */
  letter-spacing: .06em;
  color: #192c43;
}

.area-faq dt span {
  position: relative;
  margin-top: -1.466666667vw; /* -11px */
  margin-bottom: -1.466666667vw; /* -11px */
}

.area-faq dt::before {
  content: '';
  display: block;
  width: 13.333333333vw; /* 100px */
  height: 13.333333333vw; /* 100px */
  position: absolute;
  top: 0;
  left: 0;
  background-image: url( ../img/area-faq-dt.svg );
}

.area-faq dd {
  position: relative;
  margin-top: 1em;
  padding-left: 10.4vw; /* 78px */
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.area-faq dd::before {
  content: '';
  display: block;
  width: 13.333333333vw; /* 100px */
  height: 13.333333333vw; /* 100px */
  position: absolute;
  top: 1.4vw;
  left: -4.5vw;
  background-image: url( ../img/area-faq-dd.svg );
  background-size: 13.333333333vw 13.333333333vw;
}

/*============================================================
home
============================================================*/

#home {
  padding-top: 0;
  overflow: hidden;
}

#home.loaded { overflow: auto; }

#movwrap {
  position: fixed;
  right: 50%;
  bottom: 50%;
  -webkit-transform: translate( 50%, 50% );
  transform: translate( 50%, 50% );
  height: calc( 100vw * (420/119) );
  width: 100vw;
  padding-bottom: 56.25%;
  z-index: -1;
  pointer-events: none;
}

#movwrap::after {
  content: '';
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url( ../img/overlay.png );
  background-repeat: repeat;
  background-position: 0 0;
}

#mb-mov {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.area-hero {
  position: relative;
  height: 100vh;
}

.box-hero {
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.box-hero > p,
.box-hero > p img {
  width: 72vw; /* 540px */
  height: 15.466666667vw; /* 116px */
}

.box-hero ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 82.4vw; /* 618px */
  padding: 0 2vw; /* 0 15px */
  margin: 0 auto;
  margin-top: 10vw; /* 75px */
}

.box-hero a.btn-service {
  width: 37.6vw; /* 282px */
  height: 9.6vw; /* 72px */
  background-color: #9f4c55;
  font-size: 3.466666667vw; /* 26px */
}

.box-news {
  position: absolute;
  bottom: 6.133333333vw; /* 46px */
  left: 8.8vw; /* 66px */
}

.box-news > h2,
.box-news > img {
  width: 13.6vw; /* 102px */
  height: 2.666666667vw; /* 20px */
}

.box-news h2 { margin-right: 2.734375vw; /* 35px */ }

.box-news > dl { color: #fff; }

.box-news dt {
  position: absolute;
  top: 0;
  left: 15.733333333vw; /* 118px */
  height: 2.666666667vw; /* 20px */
  line-height: 2.666666667vw; /* 20px */
  font-size: 3.2vw; /* 24px */
  font-style: italic;
  letter-spacing: .05em;
}

.box-news dd {
  width: 70.666666667vw; /* 530px */
  margin-top: .25em;
  font-size: 3.733333333vw; /* 28px */
  font-weight: 700;
}

.box-news dd a {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  color: #fff;
}

.box-news > p { margin-top: 2.666666667vw; /* 20px */ }

a.btn-box-news,
a.btn-box-news > img {
  width: 19.2vw; /* 144px */
  height: 5.333333333vw; /* 40px */
}

.scroll,
.scroll > svg {
  width: 4.266666667vw; /* 32px */
  height: 27.733333333vw; /* 208px */
}

.scroll {
  position: absolute;
  right: 4.666666667vw; /* 35px */
  bottom: 0;
}

.area-service {
  position: relative;
  padding-top: 8.266666667vw; /* 62px */
  padding-bottom: 14.666666667vw; /* 110px */
  margin-top: 12vw; /* 90px */
  margin-bottom: 5.333333333vw; /* 40px */
  background-color: rgba( 255, 255, 255, .85 );
}

.area-service::before,
.area-service::after {
  content: '';
  display: block;
  width: 100%;
  height: 5.333333333vw; /* 40px */
  background-size: 100vw 5.333333333vw; /* 750px 40px */
  position: absolute;
  top: -5.333333333vw; /* -40px */
  left: 0;
  opacity: .85;
  background-image: url( ../img/bar-left-mb.svg );
  background-position: -38.666666667vw 0; /* -290px 0 */
}

.area-service::after {
  top: auto;
  bottom: -5.333333333vw; /* -40px */
  background-image: url( ../img/bar-right-mb.svg );
  background-position: 38.666666667vw 0; /* 290px 0 */
}

.area-service div.box-first h2,
.area-service div.box-first h2 > img {
  width: 46.133333333vw; /* 346px */
  height: 11.733333333vw; /* 88px */
}

.area-service div.box-first p {
  margin-top: 6.133333333vw; /* 46px */
  margin-left: 8.8vw; /* 66px */
  font-size: 6.4vw; /* 48px */
  font-weight: 700;
  line-height: 11.733333333vw; /* 88px */
  letter-spacing: .18em;
  color: #192c43;
}

.area-service div.box-second {
  width: 82.4vw; /* 618px */
  margin: 0 auto;
  margin-top: 8vw; /* 60px */
}

.area-service div.box-second p {
  font-size: 4vw; /* 30px */
  line-height: 7.2vw; /* 54px */
  text-align: justify;
  text-justify: inter-character;
}

.area-service div.box-second ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 82.4vw; /* 618px */
  padding: 0 2vw; /* 0 15px */
  margin: 0 auto;
  margin-top: 12vw; /* 90px */
}

.area-service div.box-second a.btn-service {
  width: 37.6vw; /* 282px */
  height: 9.6vw; /* 72px */
  background-color: #9f4c55;
  font-size: 3.466666667vw; /* 26px */
}

.area-service .box-mov { margin-top: 10.666666667vw; /* 80px */ }

/*============================================================
header
============================================================*/

.global-header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 16vw; /* 120px */
  padding-top: 4vw; /* 30px */
  padding-left: 5.333333333vw; /* 40px */
  background-color: #fff;
  background-image: url( ../img/line-header-mb.svg );
  background-size: 100vw 9.066666667vw; /* 750px 68px */
  background-position: 0 4.133333333vw; /* 0 31px */
}

.header-logo,
.header-logo svg {
  width: 33.333333333vw; /* 250px */
  height: 6.666666667vw; /* 50px */
}

a.btn-nav,
a.btn-nav > i {
  position: absolute;
  display: block;
  width: 13.333333333vw; /* 100px */
  height: 2.933333333vw; /* 22px */
  background-size: 13.333333333vw 2.933333333vw;
}

a.btn-nav {
  right: 5.866666667vw; /* 44px */
  bottom: 5.333333333vw; /* 40px */
}

a.btn-nav > i {
  top: 0;
  left: 0;
  transition: opacity .3s linear .3s, visibility .3s linear .3s;
}

a.btn-nav > i:first-child {
  opacity: 1;
  visibility: visible;
  background-image: url( ../img/btn-nav-menu.svg );
}

a.btn-nav > i:last-child {
  opacity: 0;
  visibility: hidden;
  background-image: url( ../img/btn-nav-close.svg );
}

.navopen a.btn-nav > i:first-child {
  opacity: 0;
  visibility: hidden;
}

.navopen a.btn-nav > i:last-child {
  opacity: 1;
  visibility: visible;
}

.header-nav {
  position: fixed;
  top: 16vw; /* 120px */
  left: 0;
  width: 62.933333333vw; /* 472px */
  height: calc( 100vh - 16vw);
  padding-left: 10.666666667vw; /* 80px */
  background-color: #192c43;
  -webkit-transform: translateX( -100% );
  -ms-transform: translateX( -100% );
  transform: translateX( -100% );
}

.header-nav.ac {
  -webkit-transform: translateX( 0 );
  -ms-transform: translateX( 0 );
  transform: translateX( 0 );
  transition: all .3s linear 0s;
}

.header-nav.da {
  -webkit-transform: translateX( -100% );
  -ms-transform: translateX( -100% );
  transform: translateX( -100% );
  transition: all .3s linear 0s;
}

.header-nav a { color: #fff; }

.list-header-nav {
  margin-top: 8vw; /* 60px */
  line-height: 15.2vw; /* 114px */
  font-size: 4vw; /* 30px */
  font-weight: 700;
}

.list-header-subnav {
  margin-top: 7.333333333vw; /* 55px */
  line-height: 4vw; /* 30px */
  font-size: 3.2vw; /* 24px */
  font-weight: 700;
}

.list-header-subnav a::before {
  content: '−';
  font-weight: 400;
  margin-right: .25em;
}

.global-header .skew {
  height: 8vw; /* 60px */
  margin-top: 14.666666667vw; /* 110px */
  margin-left: 1.6vw; /* 12px */
  background-color: #fff;
}

.header-nav a.btn-contact {
  position: relative;
  display : -webkit-inline-box;
  display : -webkit-inline-flex;
  display : inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 5.066666667vw; /* 38px */
  margin-left: -0.666666667vw; /* 5px */
  padding-right: 2.666666667vw; /* 20px */
  font-size: 3.2vw; /* 24px */
  font-weight: 700;
  color: #192c43;
}

.header-inner a.btn-contact i {
  display: block;
  width: 5.866666667vw; /* 44px */
  height: 5.066666667vw; /* 38px */
  background-image: url( ../img/icon-btn-contact-h-wht.svg );
  background-size: 5.866666667vw 5.066666667vw;
  margin-right: 0.533333333vw; /* 4px */
}

/*============================================================
footer
============================================================*/

.global-footer {
  position: relative;
  margin-top: -12vw; /* -90px */
  padding-top: 12vw; /* 90px */
  min-height: 45.333333333vw; /* 340px */
  height: 45.333333333vw; /* 340px */
  user-select: none;
}

.footer-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 56vw; /* 420px */
  height: 12vw; /* 90px */
  padding-top: 2.666666667vw; /* 20px */
  background-color: #192c43;
}

.footer-top::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 12vw 12vw; /* 0 0 90px 90px */
  border-color: transparent transparent #192c43 transparent;
  position: absolute;
  top: 0;
  right: 100%;
}

.global-footer a.btn-contact {
  position: relative;
  display : -webkit-inline-box;
  display : -webkit-inline-flex;
  display : inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 7.733333333vw; /* 58px */
  margin-left: -5.066666667vw; /* -38px */
  font-size: 3.733333333vw; /* 28px */
  font-weight: 700;
  color: #fff;
}

.global-footer a.btn-contact i {
  display: block;
  width: 8.666666667vw; /* 65px */
  height: 7.733333333vw; /* 58px */
  background-color: #192c43;
  margin-right: 0.8vw; /* 6px */
}

.global-footer a.btn-contact i svg {
  width: 8.666666667vw; /* 65px */
  height: 7.733333333vw; /* 58px */
  fill: #fff;
}


.footer-btm { background-color: #192c43; }

.footer-inner {
  height: 24vw; /* 180px */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.footer-logo,
.footer-logo svg {
  width: 41.333333333vw; /* 310px */
  height: 8.266666667vw; /* 62px */
}

.footer-logo svg { fill: #fff; }

.copyright {
  height: 9.333333333vw; /* 70px */
  padding: 1.866666667vw 0 0 8vw; /* 14px 0 0 60px */
  background-image: url( ../img/line-copyright-mb.svg );
  background-size: 100vw 4.266666667vw; /* 750px 32px */
  background-position: 50% 0;
}

.copyright img {
  width: 88vw; /* 660px */
  height: 3.2vw; /* 24px */
}

.pagetop {
  position: absolute;
  right: 4.666666667vw; /* 35px */
  bottom: 25.6vw; /* 192px */
  width: 4.266666667vw; /* 32px */
  height: 14.4vw; /* 108px */
}

a.btn-pagetop,
a.btn-pagetop > i {
  display: block;
  width: 4.266666667vw; /* 32px */
  height: 14.4vw; /* 108px */
}