/*

  SV

================================================================
*/
#sv-glashvista {
  height: min(460px, 50svh);
  min-height: 350px;
  margin-top: 80px;
  padding: 0 20px 20px;
  border-bottom: 1px solid #C7BFB4;}
.sv-glashvista {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: url(../img/glashvista/mv_pc02.jpg) no-repeat top center / cover;}
.sv-glashvista .flex {
  position: absolute;
  left: 0;
  bottom: 135px;
  display: flex;
  flex-direction: column;}
.sv-glashvista .flex .en {
  font-size: 20px;
  font-weight: 600;
  color: #A68669;}
.sv-glashvista .flex h1 {
  margin: 10px 0 20px;
  font-weight: 500;
  font-size: 42px;
  letter-spacing: .3em;
  text-shadow: 0 0 17px #7D5533;
  color: #fff;}
.sv-glashvista .flex .catch {
  font-weight: 500;
  font-size: clamp(16px, calc(1rem + ((1vw - 12px) * 0.25)), 18px);
  color: #fff;
  letter-spacing: .3em;}
.sv-glashvista ul {
  position: absolute;
  top: 100px;
  right: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;}
.sv-glashvista ul li {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 20px 0 40px;
  border-radius: 100px;
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: 16px auto;
  background-image: url(../img/common/icon_check.svg);
  background-color: rgba(147, 119, 98, .68);
  color: #fff;}
.sv-glashvista ul li + li {
  margin-top: 10px;}
.sv-glashvista .price {
  position: absolute;
  left: 0;
  bottom: 50px;
  display: flex;
  z-index: 0;}
.sv-glashvista .price:before {
  content: "";
  background-color: #A68669;
  border-radius: 0 60px 60px 0;
  position: absolute;
  width: 800px;
  height: 70px;
  margin-left: -400px;
  bottom: -15px;
  left: 20px;
  z-index: -1;}
.sv-glashvista .price p:first-child {
  color: #A68669;
  background-color: #fff;
  padding: .4rem .8rem;
  align-self: end;
  font-size: 12px;
  margin-bottom: .2rem;
  border-radius: 4px;}
.sv-glashvista .price p:last-child {
  font-size: 42px;
  margin-left: 1rem;
  color: #fff;}
.sv-glashvista .price p:last-child span {
  font-size: 24px;}
.sv-glashvista .price p:last-child i {
  font-size: 12px;
  margin-left: .4rem;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#sv-glashvista {
  height: 130vw;
  min-height: 100vw;
  margin-top: 15vw;
  padding: 0 3vw 3vw;}
.sv-glashvista {
  border-radius: 3vw;
  background-image: url(../img/glashvista/mv_sp02.jpg);}
.sv-glashvista .flex {
  bottom: auto;
  top: 7vw;
  width: 100%;
  align-items: center;}
.sv-glashvista .flex .en {
  font-size: 3vw;
  color: #fff;}
.sv-glashvista .flex h1 {
  margin: 3vw 0 3vw;
  font-size: 8vw;
  text-shadow: 0 0 2vw #7D5533;}
.sv-glashvista .flex .catch {
  font-size: 3.5vw;}
.sv-glashvista ul {
  top: auto;
  bottom: 18vw;
  right: auto;
  left: 5vw;}
.sv-glashvista ul li {
  height: 6vw;
  padding: 0 2vw 0 5;
  background-position: left 3vw center;
  background-size: 3vw auto;
  font-size: 3.3vw;}
.sv-glashvista ul li + li {
  margin-top: 1.5vw;}
.sv-glashvista .price {
  left: 5vw;
  bottom: 3vw;
  width: 100%;}
.sv-glashvista .price:before {
  border-radius: 0;
  width: 100vw;
  height: 12vw;
  margin-left: 0;
  bottom: -3vw;
  left: -5vw;
  z-index: -1;}
.sv-glashvista .price p:first-child {
  padding: 1vw 2vw;
  font-size: 3.3vw;
  margin-bottom: .2vw;}
.sv-glashvista .price p:last-child {
  font-size: 6vw;
  margin-left: 3vw;}
.sv-glashvista .price p:last-child span {
  font-size: 4vw;}
.sv-glashvista .price p:last-child i {
  font-size: 3vw;
  margin-left: 1vw;}
}

/*

  厚生労働省承認

================================================================
*/
.p-glashvista-01 {
  padding: 30px 0;}
.p-glashvista-01 .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 80px;
  background-color: #F5F4F3;
  border-radius: 20px;}
.p-glashvista-01 .flex > div {
  flex: 1;
  margin-right: 60px;}
.p-glashvista-01 .flex > div h2 {
  margin-bottom: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;}
.p-glashvista-01 .flex > div p {
  line-height: 1.9;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-01 .flex figure {
  width: 340px;}
.p-glashvista-01 .flex figure img {
  width: 100%;
  height: auto;
  border-radius: 20px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-01 {
  padding: 5vw 3vw;}
.p-glashvista-01 .flex {
  flex-direction: column;
  padding: 6vw;
  border-radius: 3vw;}
.p-glashvista-01 .flex > div {
  width: 100%;
  margin-right: 0;}
.p-glashvista-01 .flex > div h2 {
  text-align: center;
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  font-size: 4.6vw;}
.p-glashvista-01 .flex > div p {
  font-size: 3.2vw;
  line-height: 2.0;}
.p-glashvista-01 .flex figure {
  width: 100%;
  margin-top: 5vw;}
.p-glashvista-01 .flex figure img {
  border-radius: 3vw;}
}

/*

  理想の目元に近づくためのホームケア

================================================================
*/
.p-glashvista-02 {
  padding: 30px 0;}
.p-glashvista-02 h2 {
  margin-bottom: 15px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;}
.p-glashvista-02 .box {
  position: relative;
  padding: 0 100px;}
.p-glashvista-02 .box p {
  width: 100%;
  padding-left: 150px;
  line-height: 1.9;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-02 .box p strong {
  font-weight: 500;
  text-decoration: underline;
  color: #01b0c3;}
.p-glashvista-02 .box figure {
  position: absolute;
  top: -50px;
  left: 50px;}
.p-glashvista-02 .box figure img {
  width: 160px;
  height: auto;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-02 {
  padding: 5vw 7vw;}
.p-glashvista-02 h2 {
  text-align: left;
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  padding-left: 20vw;
  line-height: 1.5;
  text-align: center;
  font-size: 4.6vw;}
.p-glashvista-02 .box {
  padding: 0;}
.p-glashvista-02 .box p {
  width: 100%;
  padding-left: 0;
  line-height: 2.0;
  font-size: 3.2vw;}
.p-glashvista-02 .box figure {
  top: -24vw;
  left: -4vw;}
.p-glashvista-02 .box figure img {
  width: 18vw;}
}

/*

  グラッシュビスタとは？

================================================================
*/
.p-glashvista-03 {
  padding: 50px 0;}
.p-glashvista-03 h2 {
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;}
.p-glashvista-03 .flex {
  display: flex;
  justify-content: space-between;}
.p-glashvista-03 .flex figure {
  width: 460px;}
.p-glashvista-03 .flex figure img {
  width: 100%;
  height: auto;
  border-radius: 20px;}
.p-glashvista-03 .flex > div {
  flex: 1;
  margin-left: 60px;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-03 .flex > div p {
  line-height: 1.9;}
.p-glashvista-03 .flex > div p strong {
  font-weight: 500;
  text-decoration: underline;
  color: #01b0c3;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-03 {
  padding: 5vw 3vw;}
.p-glashvista-03 h2 {
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  line-height: 1.5;
  font-size: 4.6vw;}
.p-glashvista-03 .flex {
  flex-direction: column;}
.p-glashvista-03 .flex figure {
  width: 100%;}
.p-glashvista-03 .flex figure img {
  border-radius: 3vw;}
.p-glashvista-03 .flex > div {
  width: 100%;
  margin-top: 5vw;
  margin-left: 0;
  font-size: 3.2vw;}
.p-glashvista-03 .flex > div p {
  padding: 0 4vw;
  font-size: 3.2vw;
  line-height: 2.0;}
}

/*

  違い

================================================================
*/
.p-glashvista-04 {
  margin-top: 50px;
  padding: 60px 0;
  background-color: #F5F4F3;}
.p-glashvista-04 h2 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;}
.p-glashvista-04 h2:before {
  pointer-events: none;
  content: 'Difference';
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #01b0c3;
  letter-spacing: .02em;
  opacity: .07;
  font-style: italic;
  font-size: 60px;
  line-height: 1;}
.p-glashvista-04 h2 i {
  font-size: 80%;}
.p-glashvista-04 .parts-merit > div {
  background-color: #fff;
  border-radius: 20px;}
.p-glashvista-04 .parts-merit .demerit {
  border: 2px solid #01b0c3;}
.p-glashvista-04 .parts-merit .demerit .mr-title {
  background-color: #01b0c3;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-04 {
  margin-top: 10vw;
  padding: 5vw 3vw 10vw;}
.p-glashvista-04 h2 {
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  line-height: 1.5;
  font-size: 4.6vw;}
.p-glashvista-04 h2:before {
  bottom: 20vw;
  font-size: 8vw;}
.p-glashvista-04 .parts-merit {
  padding: 0 4vw;}
.p-glashvista-04 .parts-merit > div {
  border-radius: 3vw;}
}

/*

  注意事項

================================================================
*/
.p-glashvista-05 {
  padding: 60px 0 0;}
.p-glashvista-05 h2 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;}
.p-glashvista-05 h2:before {
  pointer-events: none;
  content: 'Precautions';
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #01b0c3;
  letter-spacing: .02em;
  opacity: .07;
  font-style: italic;
  font-size: 60px;
  line-height: 1;}
.p-glashvista-05 .note {
  text-align: center;
  line-height: 1.8;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-05 .box {
  width: 1000px;
  margin: 40px auto 0;
  padding: 60px 80px;
  border-radius: 20px;
  background-color: #FAFAF9;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-05 .box ul li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.6;}
.p-glashvista-05 .box ul li + li {
  margin-top: 10px;}
.p-glashvista-05 .box ul li:before {
  pointer-events: none;
  content: '・';
  position: absolute;
  top: 0;
  left: 0;
  color: #01b0c3;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-05 {
  padding: 5vw 3vw 10vw;}
.p-glashvista-05 h2 {
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  line-height: 1.5;
  font-size: 4.6vw;}
.p-glashvista-05 h2:before {
  bottom: 20vw;
  font-size: 8vw;}
.p-glashvista-05 .note {
  padding: 0 4vw;
  text-align: left;
  line-height: 1.9;
  font-size: 3.2vw;}
.p-glashvista-05 .box {
  width: 100%;
  margin: 5vw auto 0;
  padding: 5vw;
  border-radius: 3vw;
  font-size: 3.2vw;}
.p-glashvista-05 .box ul li {
  line-height: 1.7;}
.p-glashvista-05 .box ul li + li {
  margin-top: 2.5vw;}
}

/*

  使用方法

================================================================
*/
.p-glashvista-06 {
  margin-top: 60px;
  padding: 60px 0;
  background-color: #F5F4F3;}
.p-glashvista-06 h2 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;}
.p-glashvista-06 h2:before {
  pointer-events: none;
  content: 'How to use';
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #01b0c3;
  letter-spacing: .02em;
  opacity: .07;
  font-style: italic;
  font-size: 60px;
  line-height: 1;}
.p-glashvista-06 ul {
  width: 1000px;
  margin: 0 auto;}
.p-glashvista-06 ul li {
  display: flex;
  align-items: center;}
.p-glashvista-06 ul li + li {
  margin-top: 40px;}
.p-glashvista-06 ul li figure {
  position: relative;
  width: 200px;}
.p-glashvista-06 ul li figure:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  background-color: #01b0c3;
  border-radius: 20px;}
.p-glashvista-06 ul li figure img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 20px;
  z-index: 2;
  border: 2px solid #fff;}
.p-glashvista-06 ul li > div {
  flex: 1;
  margin-left: 60px;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-06 ul li > div .title {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 500;}
.p-glashvista-06 ul li > div .txt {
  line-height: 1.8;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-06 {
  margin-top: 5vw;
  padding: 5vw 3vw 10vw;}
.p-glashvista-06 h2 {
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  line-height: 1.5;
  font-size: 4.6vw;}
.p-glashvista-06 h2:before {
  bottom: 12vw;
  font-size: 8vw;}
.p-glashvista-06 ul {
  width: 100%;}
.p-glashvista-06 ul li {
  align-items: flex-start;}
.p-glashvista-06 ul li + li {
  margin-top: 7vw;
  padding-top: 7vw;
  border-top: 1px solid #fff;}
.p-glashvista-06 ul li figure {
  width: 25vw;}
.p-glashvista-06 ul li figure:after {
  top: 5px;
  left: 5px;
  border-radius: 3vw;}
.p-glashvista-06 ul li figure img {
  border-radius: 3vw;}
.p-glashvista-06 ul li > div {
  margin-left: 7vw;
  padding-top: 3vw;
  font-size: 3vw;}
.p-glashvista-06 ul li > div .title {
  margin-bottom: 3vw;
  font-size: 3.5vw;}
.p-glashvista-06 ul li > div .txt {
  font-size: 3vw;
  line-height: 1.8;}
}

/*

  副作用

================================================================
*/
.p-glashvista-07 {
  margin-top: 60px;
  padding-bottom: 60px;}
.p-glashvista-07 h2 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #C7BFB4;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;}
.p-glashvista-07 h2:before {
  pointer-events: none;
  content: 'Side effects';
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #01b0c3;
  letter-spacing: .02em;
  opacity: .07;
  font-style: italic;
  font-size: 60px;
  line-height: 1;}
.p-glashvista-07 .fukusa {
  width: 1000px;
  margin: 0 auto;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 12px) * 0.125)), 15px);}
.p-glashvista-07 .fukusa li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.6;}
.p-glashvista-07 .fukusa li + li {
  margin-top: 10px;}
.p-glashvista-07 .fukusa li:before {
  pointer-events: none;
  content: '・';
  position: absolute;
  top: 0;
  left: 0;
  color: #01b0c3;}
.p-glashvista-07 .box {
  width: 920px;
  margin: 0 auto;
  margin-top: 50px;}
.p-glashvista-07 .box .title {
  position: relative;
  margin-bottom: 30px;
  padding-left: 22px;
  font-weight: 500;
  font-size: 20px;}
.p-glashvista-07 .box .title:before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: #C7BFB4;
  border-radius: 3px;}
.p-glashvista-07 .box ul {
  display: flex;
  justify-content: space-between;}
.p-glashvista-07 .box ul li {
  width: 280px;}
.p-glashvista-07 .box ul li figure {
  margin-bottom: 20px;}
.p-glashvista-07 .box ul li figure img {
  border-radius: 20px;}
.p-glashvista-07 .box ul li h3 {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 17px;}
.p-glashvista-07 .box ul li .rubi {
  font-size: 12px;
  color: #C7BFB4;}
.p-glashvista-07 .box ul li .txt {
  margin-top: 20px;
  line-height: 1.7;
  font-size: 13px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-glashvista-07 {
  margin-top: 10vw;
  padding: 0 3vw;
  padding-bottom: 10vw;}
.p-glashvista-07 h2 {
  margin-bottom: 3.5vw;
  padding-bottom: 4vw;
  line-height: 1.5;
  font-size: 4.6vw;}
.p-glashvista-07 h2:before {
  bottom: 12vw;
  font-size: 8vw;}
.p-glashvista-07 .fukusa {
  width: 100%;
  padding: 0 4vw;
  font-size: 3.2vw;}
.p-glashvista-07 .fukusa li {
  line-height: 1.7;}
.p-glashvista-07 .fukusa li + li {
  margin-top: 2.5vw;}
.p-glashvista-07 .box {
  width: 100%;
  padding-left: 4vw;
  margin-top: 10vw;}
.p-glashvista-07 .box .title {
  margin-bottom: 4vw;
  padding-left: 5vw;
  font-size: 4vw;}
.p-glashvista-07 .box .title:before {
  top: 1vw;
  width: 3vw;
  height: 3vw;
  border-radius: 1vw;}
.p-glashvista-07 .box ul {
  overflow-x: auto;}
.p-glashvista-07 .box ul li {
  flex-shrink: 0;
  width: 50vw;}
.p-glashvista-07 .box ul li + li {
  margin-left: 3vw;}
.p-glashvista-07 .box ul li figure {
  margin-bottom: 3.5vw;}
.p-glashvista-07 .box ul li figure img {
  border-radius: 3vw;}
.p-glashvista-07 .box ul li h3 {
  margin-bottom: 3vw;
  font-size: 3.6vw;}
.p-glashvista-07 .box ul li .rubi {
  font-size: 2.8vw;}
.p-glashvista-07 .box ul li .txt {
  margin-top: 5vw;
  font-size: 3vw;}
}