@charset "utf-8";

/* Small screens */

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

html {
  font-size: .133333333vw; /* base 750 */
  -webkit-font-smoothing: antialiased;
}

.ls { display: none !important; }
.ss { display: block; }
br.ss,span.ss { display: inline; }

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

.global-header > p:nth-of-type(1) {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  height: 164rem;
  background-color: var(--COL-PRI);
  box-shadow: 0 6rem 4rem 0 rgba(61, 199, 210, .4);
}

.global-header > p:nth-of-type(1) img {
  width: 610rem;
  height: 114rem;
}

.global-header > p:nth-of-type(2) {
  position: relative;
  height: 766rem;
  margin-top: -100rem;
  padding-top: 80rem;
  background-image: url(../img/ss_img-03.png);
  background-size: 750rem 766rem;
  background-position: 50% 0;
}

.global-header > p:nth-of-type(2) img {
  display: block;
  width: 750rem;
  height: 600rem;
}

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

.area-about {
  padding-bottom: 90rem;
  background-color: var(--COL-SEC);
  background-image: url(../img/ss_img-05.png);
  background-size: 750rem 1136rem;
  background-position: 50% 100%;
}

.area-about > p:nth-of-type(1) {
  position: relative;
  width: 750rem;
  height: 360rem;
  margin-top: -40rem;
}

.area-about > div {
  position: relative;
  width: 670rem;
  height: 730rem;
  margin-top: -40rem;
  margin-right: auto;
  margin-left: auto;
  padding: 31rem;
  background-color: var(--COL-WHT);
  border-radius: 14rem;
}

.area-about > div > img {
  width: 608rem;
  height: auto;
}

.area-about > div > div {
  width: 608rem;
  margin-top: 20rem;
}

.area-about > div > div > h2 {
  width: 405rem;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.area-about > div > div > p {
  margin-top: 8rem;
  line-height: 50rem;
  text-align: justify;
  text-justify: inter-character;
  font-size: 28rem;
  font-weight: 400;
}

.area-potency {
  padding-top: 50rem;
  padding-bottom: 98rem;
  background-color: var(--COL-SEC);
  background-image: url(../img/ss_img-09.png);
  background-size: 750rem 100rem;
  background-position: 50% 100.01%;
}

.area-potency > h2 {
  width: 710rem;
  height: 240rem;
  margin-right: auto;
  margin-left: auto;
}

.box-point {
  width: 670rem;
  margin-top: 40rem;
  margin-right: auto;
  margin-left: auto;
}

.box-point + .box-point { margin-top: 60rem; }

.box-point > p:nth-of-type(1) {
  width: 670rem;
  height: 50rem;
}

.box-point > h3:nth-of-type(1) {
  margin-top: 24rem;
  margin-bottom: 30rem;
  text-align: center;
}

.box-point:nth-of-type(1) > h3 img {
  width: 534rem;
  height: 124rem;
}

.box-point:nth-of-type(2) > h3 img {
  width: 470rem;
  height: 194rem;
}

.box-point:nth-of-type(3) > h3 img {
  width: 670rem;
  height: 116rem;
}

.box-point > div:nth-of-type(1) > p {
  margin-top: 20rem;
  line-height: 50rem;
  text-align: justify;
  text-justify: inter-character;
  font-size: 28rem;
  font-weight: 400;
  color: var(--COL-WHT);
}

.box-function { margin-top: 30rem; }

.box-function > h4 {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 210rem;
  background-color: var(--COL-WHT);
  border-top-right-radius: 20rem;
  border-top-left-radius: 20rem;
}

.box-function > h4 img {
  width: 390rem;
  height: 148rem;
}

.box-function > p {
  padding: 30rem 22rem;
  line-height: 50rem;
  text-align: justify;
  text-justify: inter-character;
  font-size: 28rem;
  font-weight: 400;
   color: var(--COL-WHT);
  background-color: var(--COL-PRI);
  border-bottom-right-radius: 20rem;
  border-bottom-left-radius: 20rem;
}

.box-function > p strong {
  display: block;
  width: 428rem;
  height: 200rem;
  margin-bottom: 20rem;
  margin-right: auto;
  margin-left: auto;
}

.box-special {
  width: 670rem;
  height: 480rem;
  margin-top: 120rem;
  margin-right: auto;
  margin-left: auto;
  border: 4rem solid var(--COL-ORG);
  border-radius: 14rem;
  background-color: var(--COL-WHT);
}

.box-special > p:nth-of-type(1) {
  width: 514rem;
  height: 104rem;
  margin-right: auto;
  margin-left: auto;
  transform: translateY(-54rem);
}

.box-special > p:nth-of-type(2) {
  width: 630rem;
  height: 200rem;
  margin-top: -32rem;
  margin-right: auto;
  margin-left: auto;
}

.box-special > p:nth-of-type(3) {
  width: 622rem;
  margin-top: 10rem;
  margin-right: auto;
  margin-left: auto;
  line-height: 44rem;
  font-size: 28rem;
  font-weight: 400;
}

.box-special > a {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 580rem;
  height: 60rem;
  margin-top: 15rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: 30rem;
  background-color: var(--COL-PRI);
}

.box-special > a > img {
  width: 336rem;
  height: 29rem;
}

.area-originator { padding-top: 80rem; }

.area-originator > h2 {
  width: 659rem;
  height: 40rem;
  margin-right: auto;
  margin-left: auto;
}

.area-originator > img {
  display: block;
  width: 432rem;
  height: 320rem;
  margin-top: 45rem;
  margin-right: auto;
  margin-left: auto;
}

.area-originator > p:nth-of-type(1) {
  width: 670rem;
  margin-top: 28rem;
  margin-right: auto;
  margin-left: auto;
  line-height: 50rem;
  text-align: justify;
  text-justify: inter-character;
  font-size: 28rem;
  font-weight: 400;
}

.area-originator > p:nth-of-type(2) { margin-top: 30rem; }

.area-originator > p:nth-of-type(2) span {
  display: block;
  line-height: 34rem;
  text-align: center;
  font-size: 26rem;
  font-weight: 400;
}

.area-originator > p:nth-of-type(2) span:last-child {
  margin-top: 20rem;
  font-size: 32rem;
}

.area-structure { margin-top: 100rem; }
.area-practical { margin-top: 95rem; }
.area-type { margin-top: 95rem; }

.ttl-primary {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 690rem;
  height: 176rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: 30rem;
  background-color: var(--COL-PRI);
}

.ttl-primary img { height: 114rem; }

.box-step {
  width: 670rem;
  margin-top: 36rem;
  margin-right: auto;
  margin-left: auto;
}

.box-step > div {
  position: relative;
  width: 670rem;
  height: 460rem;
}

.box-step > div > p:nth-of-type(1) {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 148rem;
  height: 58rem;
  background-color: var(--COL-PRI);
  font-family: var(--FNT-BL);
  font-style: italic;
  font-weight: 600;
  font-size: 33rem;
  letter-spacing: .03em;
  color: var(--COL-WHT);
}

.box-step > div > p:nth-of-type(2) {
  margin-top: 24rem;
  text-align: center;
  font-size: 34rem;
  font-weight: 700;
  color: var(--COL-PRI);
}

.box-conditions {
  width: 670rem;
  height: 392rem;
  margin-top: 20rem;
  margin-right: auto;
  margin-left: auto;
  border: 2.4rem solid var(--COL-POR);
  border-radius: 14rem;
  overflow: hidden;
}

.box-conditions > h3 {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 70rem;
  padding-bottom: 2.4rem;
  background-color: var(--COL-POR);
}

.box-conditions > h3 img {
  width: 565rem;
  height: 37rem;
}

.box-conditions > div { padding: 30rem 0; }

.box-conditions > div > ol {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 628rem;
  height: 158rem;
  margin-right: auto;
  margin-left: auto;
}

.box-conditions > div > ol > li { width: 198rem; }

.box-conditions > div > ol > li:nth-of-type(1) {
  width: 228rem;
  padding-right: 25rem;
  padding-left: 5rem;
}

.box-conditions > div > ol > li:nth-of-type(1),
.box-conditions > div > ol > li:nth-of-type(2) {
  border-right: 2rem solid var(--COL-POR);
}

.box-conditions > div > p {
  width: 488rem;
  height: 86rem;
  margin-top: 15rem;
  margin-right: auto;
  margin-left: auto;
}

.box-conditions + ul {
  width: 670rem;
  margin-top: 15rem;
  margin-right: auto;
  margin-left: auto;
}

.box-conditions + ul li {
  line-height: 32rem;
  text-align: justify;
  text-justify: inter-character;
  font-size: 24rem;
  margin-left: 1.7em;
  text-indent: -1.7em;
}

.area-structure > p {
  width: 530rem;
  height: 186rem;
  margin-top: 20rem;
  margin-right: auto;
  margin-left: auto;
}

.area-practical > p:nth-of-type(1) {
  width: 600rem;
  height: 118rem;
  margin-top: 40rem;
  margin-right: auto;
  margin-left: auto;
}

.area-practical > div {
  width: 670rem;
  margin-top: 30rem;
  margin-right: auto;
  margin-left: auto;
}

.area-practical > div > img + img { margin-top: 30rem; }

.area-practical > p:nth-of-type(2) {
  width: 690rem;
  height: 236rem;
  margin-top: 20rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > p:nth-of-type(1) {
  width: 670rem;
  height: 318rem;
  margin-top: 40rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > h3 {
  width: 690rem;
  height: 38rem;
  margin-top: 55rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > div {
  width: 670rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > div > picture {
  display: block;
  margin-top: 30rem;
}

.area-type > div > picture:nth-of-type(1) {
  width: 670rem;
  height: 412rem;
}

.area-type > div > picture:nth-of-type(2) {
  width: 670rem;
  height: 462rem;
}

.area-type > div > picture:nth-of-type(3) {
  width: 670rem;
  height: 490rem;
}

.area-type > div > div {
  width: 670rem;
  margin-top: 45rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > div > div h4 {
  width: 160rem;
  height: 60rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > div > div ul {
  line-height: 36rem;
  font-size: 24rem;
  text-align: justify;
  text-justify: inter-character;
  margin-top: 25rem;
  margin-left: 1em;
  text-indent: -1em;
}

.area-type > p:nth-of-type(2) {
  width: 590rem;
  height: 86rem;
  margin-top: 35rem;
  margin-right: auto;
  margin-left: auto;
}

.area-type > a {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 670rem;
  height: 136rem;
  margin-top: 60rem;
  margin-right: auto;
  margin-left: auto;
  border: 3.28rem solid var(--COL-PRI);
  box-shadow: 6rem 6rem var(--COL-PRI);
}

.area-type > a img {
  width: 490rem;
  height: 78rem;
}

.area-voice {
  margin-top: 90rem;
  padding-bottom: 100rem;
  background: repeating-linear-gradient(135deg, #eefafb, #eefafb 3rem, #fff 3rem, #fff 6rem);
}

.box-voice {
  width: 670rem;
  margin-top: 50rem;
  margin-right: auto;
  margin-left: auto;
}

.item-voice {
  padding: 31rem;
  border-radius: 14rem;
  background-color: var(--COL-WHT);
  box-shadow: 4rem 4rem 6rem 0 rgba(61, 199, 210, .35);
}

.item-voice + .item-voice { margin-top: 30rem; }

.item-voice > div:nth-of-type(1) {
  width: 608rem;
  margin-right: auto;
  margin-left: auto;
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(1) {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(1) > img {
  width: 297rem;
  margin-top: 18rem;
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(1) > img:nth-of-type(1) {
  width: 608rem;
  margin-top: 0;
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(2) { margin-top: 30rem; }

.item-voice > div:nth-of-type(1) > div:nth-of-type(2) h3 {
  line-height: 47rem;
  font-size: 36rem;
  font-weight: 700;
  color: var(--COL-PRI);
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(2) > div p:nth-of-type(1) {
  margin-top: 20rem;
  font-size: 26rem;
  font-weight: 500;
  color: var(--COL-GRY);
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(2) > div p:nth-of-type(2) {
  margin-top: 10rem;
  line-height: 40rem;
  font-size: 32rem;
  font-weight: 500;
  color: var(--COL-GRY);
}

.item-voice > div:nth-of-type(1) > div:nth-of-type(2) > p {
  margin-top: 1em;
  margin-bottom: -8rem;
  line-height: 50rem;
  font-size: 28rem;
  text-align: justify;
  text-justify: inter-character;
}

.item-voice > div:nth-of-type(2) {
  margin-top: 35rem;
  margin-right: auto;
  margin-left: auto;
  padding: 13rem 20rem;
  background-color: var(--COL-TER);
}

.item-voice > div:nth-of-type(2) > dl {
  position: relative;
  color: var(--COL-PRI);
  line-height: 38rem;
  font-size: 26rem;
  font-weight: 500;
}

.item-voice > div:nth-of-type(2) > dl > dt {
  position: absolute;
  left: 0;
  width: 3em;
}

.item-voice > div:nth-of-type(2) > dl > dd {
  margin-left: 3em;
  text-align: justify;
  text-justify: inter-character;
}

.ttl-secondary {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  height: 132rem;
  background-color: var(--COL-PRI);
}

.ttl-secondary img { height: 49rem; }

.box-company {
  width: 670rem;
  margin-top: 50rem;
  margin-right: auto;
  margin-left: auto;
}

.box-company > p {
  margin-top: 15rem;
  text-align: justify;
  text-justify: inter-character;
  line-height: 50rem;
  font-size: 28rem;
}

.box-uvb {
  width: 670rem;
  height: 648rem;
  margin-top: 35rem;
  margin-right: auto;
  margin-left: auto;
  padding: 31rem;
  border-radius: 14rem;
  background-color: var(--COL-BLU);
}

.box-uvb > picture {
  display: block;
  width: 608rem;
  height: 324rem;
}

.box-uvb > div { margin-top: 30rem; }

.box-uvb > div > img {
  width: 608rem;
  height: 128rem;
}

.box-uvb > div > a {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 608rem;
  height: 74rem;
  margin-top: 25rem;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--COL-WHT);
  box-shadow: 6rem 6rem var(--COL-DBL);
}

.box-uvb > div > a img {
  width: 527rem;
  height: 34rem;
}

.box-contact {
  padding-top: 90rem;
  padding-bottom: 100rem;
}

.box-contact > h3.ttl-primary {
  height: 112rem;
  border-radius: 56rem;
}

.box-contact > h3.ttl-primary img { height: 46rem; }

.box-contact > p {
  width: 670rem;
  margin-top: 25rem;
  margin-bottom: 30rem;
  margin-right: auto;
  margin-left: auto;
  text-align: justify;
  text-justify: inter-character;
  line-height: 50rem;
  font-size: 28rem;
}

.box-contact form dl {
  width: 750rem;
  padding-top: 45rem;
  padding-right: 65rem;
  padding-bottom: 100rem;
  padding-left: 65rem;
  background-color: var(--COL-PGR);
}

.box-contact form dl dt {
  margin-bottom: 20rem;
  font-size: 28rem; 
  font-weight: 500;
  letter-spacing: .03em;
}

.box-contact form dl dd + dt { margin-top: 40rem; }
.box-contact form dl dd { width: 100%; }

.box-contact input[type="text"],
.box-contact input[type="email"],
.box-contact input[type="tel"],
.box-contact textarea {
  width: 100%;
  height: 94rem;
  background-color: var(--COL-WHT);
  font-family: var(--FNT-ZG);
  font-size: 32rem;
  padding: 0 30rem;
}

.box-contact textarea {
  height: 280rem;
  padding: 15rem 20rem;
  line-height: 1.5;
}

span.wpcf7-not-valid-tip {
  display: block;
  font-size: 28rem;
  color: var(--COL-RED);
  margin-top: 0.5em;
}

.wpcf7-response-output {
  margin-top: 70rem;
  border: 0 !important;
  text-align: center;
  line-height: 1.75;
  font-size: 30rem;
  color: var(--COL-RED);
}

.wpcf7 form.sent .wpcf7-response-output {
  color: var(--COL-PRI);
  font-weight: 700;
}

.btn {
  position: relative;
  display: block;
  width: 670rem;
  height: 116rem;
  margin-top: 70rem;
  margin-right: auto;
  margin-left: auto;
  border: 3.28rem solid var(--COL-PRI);
  box-shadow: 6rem 6rem var(--COL-PRI);
}

.btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11rem 0 11rem 16rem;
  border-color: transparent transparent transparent  var(--COL-PRI);
  position: absolute;
  top: 50%;
  right: 250rem;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

input[type="submit"] {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  height: 109.44rem;
  font-family: var(--FNT-ZG);
  font-weight: 500;
  font-size: 36rem;
  letter-spacing: .5em;
  color: var(--COL-PRI);
  border: 0;
  background-color: transparent;
}

span.wpcf7-spinner {
  display: block !important;
  margin: 20rem auto 0 auto !important;
}

.global-footer {
  padding-top: 65rem;
  padding-bottom: 185rem;
  border-top: 2rem solid var(--COL-PRI);
}

.global-footer dl {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 490rem;
  margin-right: auto;
  margin-left: auto;
}

.global-footer dt {
  width: 490rem;
  height: 57rem;
}

.global-footer dd {
  width: 50%;
  text-align: center;
  margin-top: 18rem;
  font-size: 28rem;
  font-weight: 500;
  color: var(--COL-GRN);
}

.global-footer small {
  display: block;
  margin-top: 48rem;
  text-align: center;
  font-size: 22rem;
  letter-spacing: .03em;
}

.area-controller {
  z-index: 999;
  position: fixed;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: end;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 750rem;
  height: 120rem;
}

a.link-contact {
  display: block;
  width: 638rem;
  height: 120rem;
}

a.link-pagetop {
  display: block;
  width: 96rem;
  height: 106rem;
}

.area-controller a {
  filter: drop-shadow( 4.6rem 4.6rem 0 rgba(11, 134, 156, .2) );
}

.grecaptcha-badge {
  margin-bottom: 110rem;
}

.area-type + .area-contact { margin-top: 80rem; }