@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/* ----------------------
ドライアイとは
- sec_summary
- sec_cause
- sec_relevance
- sec_inspection

治療方法
- sec_treatment
---------------------- */
@media screen and (max-width: 768px) {
  .sttl-l_03 {
    width: 100%;
  }
}

/*===========================
　ドライアイとは　sec_summary
============================*/
.sec_summary .g_txt01 {
  color: #A18679;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec_summary .g_txt01 {
    font-size: 18px;
  }
}
.sec_summary .sec_intro {
  margin-bottom: 85.5px;
}
@media screen and (max-width: 768px) {
  .sec_summary .sec_intro {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 768px) {
  .sec_summary .sec_intro .c2_rimg-frame {
    margin-bottom: 0;
  }
}
.sec_summary .c2_rimg {
  display: flex;
  gap: 20px;
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .sec_summary .c2_rimg {
    gap: 10px;
    margin-bottom: 50px;
  }
}
.sec_summary .c2_rimg .img {
  width: calc(100% - 10px);
}
.sec_summary .frame_c2_02 .cmn_btn_01 {
  margin: 23px auto 0;
  display: block;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .sec_summary .frame_c2_02 {
    padding-bottom: 48px;
    border-bottom: 1px dashed var(--brown03);
  }
}
.sec_summary .dryeye_about {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .sec_summary .dryeye_about {
    margin-bottom: 50px;
  }
}
.sec_summary .dryeye_about .box {
  width: 48.889%;
  border: #977D6E solid 1px;
  border-radius: 10px;
  padding: 25px;
}
.sec_summary .dryeye_about .left {
  background: #FFF;
}
@media screen and (max-width: 768px) {
  .sec_summary .dryeye_about .left {
    width: auto;
    margin: 0 0 25px 0;
  }
}
.sec_summary .dryeye_about .right {
  background: #ECE5D9;
}
@media screen and (max-width: 768px) {
  .sec_summary .dryeye_about .right {
    width: auto;
  }
}
.sec_summary .dryeye_about .right .sttl-l_04 {
  background: #977D6E;
  color: #FFF;
}
.sec_summary .dryeye_about .pic_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sec_summary .dryeye_about .pic_area .pic01 {
  width: 84.28%;
  margin: 0 auto 40px;
}
.sec_summary .dryeye_about .pic_area .pic02 {
  width: 47%;
  margin: 0 auto;
  text-align: center;
}
.sec_summary .dryeye_about .pic_area .pic02 img {
  border: #977D6E solid 1px;
  border-radius: 5px;
}
.sec_summary .dryeye_about p {
  color: #462C1D;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec_summary .dryeye_about p {
    font-size: 15px;
  }
}

/*===========================
　ドライアイとは　sec_cause
============================*/
.sec_cause .sttl-l_02 {
  text-align: center;
}
.sec_cause .tc {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec_cause .tc {
    text-align: left;
  }
}
.sec_cause .sttl-l_03 h4 {
  letter-spacing: 0.25em;
}
.sec_cause .emphasis {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }
}
.sec_cause .emphasis .left {
  background: #264453;
  border-radius: 10px 0 0 10px;
  border: 1px solid #264453;
  display: grid;
  place-content: center;
  padding: 35px 0;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis .left {
    border-radius: 10px 10px 0 0;
    padding: 14px 0;
  }
}
.sec_cause .emphasis .left p {
  font-family: "游明朝", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-feature-settings: normal;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-align: center;
  display: block;
  padding: 41px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis .left p {
    padding: 9px 30px 5px;
  }
}
.sec_cause .emphasis .right {
  background: #F8F8F8;
  border-radius: 0 10px 10px 0;
  border: 1px solid #264453;
  padding: 50px 21px 46px 26px;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis .right {
    border-radius: 0 0 10px 10px;
    padding: 18px 5% 20px;
  }
}
.sec_cause .emphasis .right ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.5em 0.3em;
}
.sec_cause .emphasis .right ul li {
  padding-left: 10px;
}
.sec_cause .emphasis .right ul li:nth-child(-n+4) {
  grid-column: 1;
}
.sec_cause .emphasis .right ul li:nth-child(n+5):nth-child(-n+9) {
  grid-column: 2;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis .right ul li:nth-child(n+5):nth-child(-n+9) {
    grid-column: 1;
  }
}
.sec_cause .emphasis .right ul li:nth-child(n+7):nth-child(-n+11) {
  grid-column: 0;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis .right ul li:nth-child(n+7):nth-child(-n+11) {
    grid-column: 2;
  }
}
.sec_cause .emphasis .right ul li:nth-child(n+10) {
  grid-column: 3;
}
@media screen and (max-width: 768px) {
  .sec_cause .emphasis .right ul li:nth-child(n+10) {
    grid-column: 2;
  }
}
.sec_cause .check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .sec_cause .check {
    flex-direction: column;
    gap: 20px;
  }
}
.sec_cause .frame_c2 {
  background-color: #F9F7F4;
  margin-bottom: 0;
  padding-left: 5.5555555556%;
  padding-right: 5.5555555556%;
}
.sec_cause .frame_c2 .frame_contents {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .sec_cause .frame_c2 .frame_contents {
    flex-direction: column;
  }
}
.sec_cause .frame_c2 .frame_contents .cmn_txt {
  width: 49.25%;
}
@media screen and (max-width: 768px) {
  .sec_cause .frame_c2 .frame_contents .cmn_txt {
    width: 100%;
  }
}
.sec_cause .frame_c2 .frame_contents .cmn_txt .list {
  margin-top: 24px;
}
.sec_cause .frame_c2 .frame_contents .cmn_txt .list .st {
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
}
.sec_cause .frame_c2 .frame_contents .cmn_txt .list .st::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #8A5858;
  border-radius: 50px;
  position: absolute;
  top: 0.7em;
  left: 0;
}
.sec_cause .frame_c2 .frame_contents .cmn_txt .list li {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.875;
}
.sec_cause .frame_c2 .frame_contents .cmn_txt .list li:last-child {
  margin-bottom: 0;
}
.sec_cause .frame_c2 .frame_contents .img {
  width: 49%;
}
@media screen and (max-width: 768px) {
  .sec_cause .frame_c2 .frame_contents .img {
    width: 100%;
  }
}

/*===========================
　ドライアイとは　sec_relevance
============================*/
.sec_relevance .c2_rimg-frame .cmn_txt .cmn_btn_01 {
  margin-top: 35.8px;
}
@media screen and (max-width: 768px) {
  .sec_relevance .c2_rimg-frame .cmn_txt .cmn_btn_01 {
    display: none;
  }
}
.sec_relevance .c2_rimg-frame .cmn_btn_01.tc {
  display: none;
}
@media screen and (max-width: 768px) {
  .sec_relevance .c2_rimg-frame .cmn_btn_01.tc {
    display: inline-flex;
    justify-content: center;
  }
}

/*===========================
　ドライアイとは　sec_inspection
============================*/
@media screen and (max-width: 768px) {
  .sec_inspection .sttl-l_02 {
    font-size: 18px;
  }
}
.sec_inspection .sttl-l_03 h4 {
  letter-spacing: 0.23em;
}
.sec_inspection .c2_rimg-frame:nth-of-type(1) {
  grid-template-columns: 1fr 34.3333333333%;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .sec_inspection .c2_rimg-frame:nth-of-type(1) {
    grid-template-columns: 1fr;
  }
}
.sec_inspection .c2_rimg-frame:nth-of-type(2) {
  display: flex;
  gap: 23px;
  flex-direction: row-reverse;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .sec_inspection .c2_rimg-frame:nth-of-type(2) {
    flex-direction: column;
  }
}
.sec_inspection .c2_rimg-frame:nth-of-type(2) .img_frame {
  width: 61.1111111111%;
}
@media screen and (max-width: 768px) {
  .sec_inspection .c2_rimg-frame:nth-of-type(2) .img_frame {
    width: 100%;
  }
}
.sec_inspection .c2_rimg-frame:nth-of-type(2) .cmn_txt {
  width: 36.3333333333%;
}
@media screen and (max-width: 768px) {
  .sec_inspection .c2_rimg-frame:nth-of-type(2) .cmn_txt {
    width: 100%;
  }
}

/*===========================
　治療方法　sec_treatment
============================*/
.sec_treatment .sttl-l_04 {
  background-color: var(--brown03);
  color: var(--white);
  margin-left: 0;
}
.sec_treatment .c2_rimg-frame {
  margin-bottom: 0;
  grid-template-columns: 1fr 34.3333333333%;
}
@media screen and (max-width: 768px) {
  .sec_treatment .c2_rimg-frame {
    grid-template-columns: 1fr;
  }
}

/*===========================
予防方法
============================*/
.method_sec .sttl-l_03 + div .cmn_txt {
  text-align: center;
}
.method_sec .care_list .item {
  border-radius: 10px;
  border: 1px solid #977D6E;
  padding: 40px 31px;
  background: #F1EDEA;
}
.method_sec .care_list .item:nth-child(odd) {
  background: #fff;
}
.method_sec .care_list .item .sttl-l_05 {
  color: #654B3B;
  margin-bottom: 20px;
}
.method_sec .care_list .item .btn_area {
  margin-top: 35px;
  text-align: center;
}
.method_sec .care_list .item:not(:last-child) {
  margin-bottom: 30px;
}

.care_sec .cmn_txt {
  margin-bottom: 35px;
  text-align: center;
}
.care_sec .c2_content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.55555556%;
}
@media screen and (max-width: 768px) {
  .care_sec .c2_content {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.care_sec .c2_content img {
  border-radius: 5px;
  border: 1px solid var(--brown03);
  margin-bottom: 18px;
}
@media screen and (max-width: 768px) {
  .care_sec .c2_content img {
    margin-bottom: 30px;
  }
}
.care_sec .c2_content .cmn_txt {
  text-align: left;
}

.deskwork_sec .w1100 {
  background: #fff;
}
.deskwork_sec .w1100 .sttl-l_02 {
  margin-bottom: 30px;
}
.deskwork_sec .w1100 .frame_c2 {
  padding-top: 75px;
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .deskwork_sec .w1100 .frame_c2 {
    padding-top: 27px;
    padding-bottom: 30px;
  }
}
.deskwork_sec .w1100 .frame_c2 .frame_contents {
  gap: 7%;
  grid-template-columns: 1fr 40.133676%;
}
@media screen and (max-width: 768px) {
  .deskwork_sec .w1100 .frame_c2 .frame_contents {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
.deskwork_sec .w1100 .frame_c2 .frame_contents .sttl-l_05 {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .deskwork_sec .w1100 .frame_c2 .frame_contents .sttl-l_05 {
    margin-bottom: 10px;
  }
}

/*===========================
　自己チェック
============================*/
.ten_check {
  margin-bottom: 110px;
}
@media screen and (max-width: 768px) {
  .ten_check {
    margin-bottom: 55px;
  }
}
.ten_check .list_num {
  padding-left: 19px;
  max-width: 540px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .ten_check .list_num {
    padding-left: 15px;
  }
}
.ten_check .balloon {
  margin: 0 auto 20px;
  text-align: center;
  position: relative;
  background: #fff;
  border: 2px solid #A18679;
  display: block;
  width: 80%;
  max-width: 625px;
  padding: 20px 0;
  border-radius: 100px;
}
@media screen and (max-width: 768px) {
  .ten_check .balloon {
    width: 100%;
    padding: 8px 0 12px;
  }
}
.ten_check .balloon::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -22px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #A18679 transparent transparent transparent;
  border-width: 22px 20px 0 20px;
}
.ten_check .balloon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -19px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  border-width: 22px 20px 0 20px;
}
.ten_check .balloon p {
  color: #462C1D;
  font-size: 21px;
  font-weight: 600;
}
@media screen and (max-width: 1600px) {
  .ten_check .balloon p {
    font-size: clamp(15px, 1.3125vw, 21px);
  }
}
@media screen and (max-width: 768px) {
  .ten_check .balloon p {
    font-size: 14px;
    line-height: 1.4;
  }
}
.ten_check .balloon p span {
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 1200px) {
  .ten_check .balloon p span {
    font-size: 28px;
  }
}
@media screen and (max-width: 768px) {
  .ten_check .balloon p span {
    font-size: 21px;
  }
}
.ten_check .sec_count_inn {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .ten_check .sec_count_inn {
    margin-bottom: 30px;
  }
}
.ten_check .sec_count_inn p {
  color: #462C1D;
}
.ten_check .sec_count_inn #default {
  font-size: 9.8rem;
  font-weight: bold;
  margin-right: 20px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .ten_check .sec_count_inn #default {
    font-size: 100px;
  }
}
.ten_check .sec_count_inn .sec {
  font-size: 2.8rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .ten_check .sec_count_inn .sec {
    font-size: 36px;
  }
}
.ten_check .btn_area {
  margin: 0 auto 50px;
  text-align: center;
  max-width: 470px;
}
.ten_check .btn_area button {
  height: 133px;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  margin-right: 30px;
  padding-bottom: 20px;
  border-radius: 5px;
  position: relative;
  width: 28%;
  background-color: #fff;
  border-radius: 50%;
  will-change: filter;
  transform: translateY(0);
}
@media screen and (max-width: 1600px) {
  .ten_check .btn_area button {
    font-size: clamp(18px, 1.375vw, 22px);
  }
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area button {
    height: 82px;
    font-size: 15px;
    margin-right: 15px;
    width: 23%;
  }
}
@media screen and (max-width: 500px) {
  .ten_check .btn_area button {
    width: 86px;
  }
}
.ten_check .btn_area button:last-child {
  margin-right: 0;
}
.ten_check .btn_area #start {
  color: #fff;
  background: url("../img/main/dryeye/check/start.png") 55% 70%/24px auto no-repeat #776758;
  filter: drop-shadow(0 11px 0 #604E3E);
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #start {
    background: url("../img/main/dryeye/check/start.png") 55% 70%/18px auto no-repeat #776758;
  }
}
.ten_check .btn_area #start.active2 {
  color: #fff;
  background: url("../img/main/dryeye/check/start.png") 55% 70%/24px auto no-repeat #977D6F;
  filter: drop-shadow(0 11px 0 #605043);
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #start.active2 {
    background: url("../img/main/dryeye/check/start.png") 55% 70%/18px auto no-repeat #977D6F;
  }
}
.ten_check .btn_area #start.active {
  color: #fff;
  background: url("../img/main/dryeye/check/start_off.png") 55% 70%/24px auto no-repeat #D4D4D4;
  transform: translateY(11px);
  color: #979797;
  filter: none !important;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #start.active {
    background: url("../img/main/dryeye/check/start_off.png") 55% 70%/18px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #start:hover {
  color: #fff;
  background: url("../img/main/dryeye/check/start.png") 55% 70%/24px auto no-repeat #776758;
  transform: translateY(11px);
  filter: none;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #start:hover {
    background: url("../img/main/dryeye/check/start.png") 55% 70%/18px auto no-repeat #776758;
  }
}
.ten_check .btn_area #start.active:hover {
  color: #fff;
  background: url("../img/main/dryeye/check/start_off.png") 55% 70%/24px auto no-repeat #D4D4D4;
  transform: translateY(11px);
  color: #979797;
  filter: none !important;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #start.active:hover {
    background: url("../img/main/dryeye/check/start_off.png") 55% 70%/18px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #stop {
  background: url("../img/main/dryeye/check/stop.png") 50% 70%/25px auto no-repeat #F1EBE6;
  filter: drop-shadow(0 11px 0 #776758);
  color: #776758;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #stop {
    background: url("../img/main/dryeye/check/stop.png") 50% 70%/13px auto no-repeat #F1EBE6;
  }
}
.ten_check .btn_area #stop.active {
  background: url("../img/main/dryeye/check/stop_off.png") 50% 70%/25px auto no-repeat #D4D4D4;
  transform: translateY(11px);
  filter: none !important;
  color: #979797;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #stop.active {
    background: url("../img/main/dryeye/check/stop_off.png") 50% 70%/13px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #stop.active3 {
  background: url("../img/main/dryeye/check/stop_off.png") 50% 70%/25px auto no-repeat #D4D4D4;
  filter: drop-shadow(0 11px 0 #979797);
  color: #979797;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #stop.active3 {
    background: url("../img/main/dryeye/check/stop_off.png") 50% 70%/13px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #stop:hover {
  background: url("../img/main/dryeye/check/stop.png") 50% 70%/25px auto no-repeat #F1EBE6;
  transform: translateY(11px);
  filter: none;
  color: #776758;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #stop:hover {
    background: url("../img/main/dryeye/check/stop.png") 50% 70%/13px auto no-repeat #F1EBE6;
  }
}
.ten_check .btn_area #stop.active:hover {
  background: url("../img/main/dryeye/check/stop_off.png") 50% 70%/25px auto no-repeat #D4D4D4;
  transform: translateY(11px);
  filter: none !important;
  color: #979797;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #stop.active:hover {
    background: url("../img/main/dryeye/check/stop_off.png") 50% 70%/13px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #reset {
  background: url("../img/main/dryeye/check/reset.png") 50% 74%/30px auto no-repeat #fff;
  border: 1px solid #707070;
  filter: drop-shadow(0 11px 0 #776758);
  color: #776758;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #reset {
    background: url("../img/main/dryeye/check/reset.png") 50% 74%/24px auto no-repeat #fff;
  }
}
.ten_check .btn_area #reset.active {
  background: url("../img/main/dryeye/check/reset_off.png") 50% 74%/30px auto no-repeat #D4D4D4;
  border: none;
  transform: translateY(11px);
  color: #979797;
  filter: none !important;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #reset.active {
    background: url("../img/main/dryeye/check/reset_off.png") 50% 74%/24px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #reset.active3 {
  background: url("../img/main/dryeye/check/reset_off.png") 50% 74%/30px auto no-repeat #D4D4D4;
  border: none;
  filter: drop-shadow(0 11px 0 #979797);
  color: #979797;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #reset.active3 {
    background: url("../img/main/dryeye/check/reset_off.png") 50% 74%/24px auto no-repeat #D4D4D4;
  }
}
.ten_check .btn_area #reset:hover {
  background: url("../img/main/dryeye/check/reset.png") 50% 74%/30px auto no-repeat #fff;
  border: 1px solid #707070;
  transform: translateY(11px);
  color: #776758;
  filter: none;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #reset:hover {
    background: url("../img/main/dryeye/check/reset.png") 50% 74%/24px auto no-repeat #fff;
  }
}
.ten_check .btn_area #reset.active:hover {
  background: url("../img/main/dryeye/check/reset_off.png") 50% 74%/30px auto no-repeat #D4D4D4;
  border: none;
  transform: translateY(11px);
  color: #979797;
  filter: none !important;
}
@media screen and (max-width: 768px) {
  .ten_check .btn_area #reset.active:hover {
    background: url("../img/main/dryeye/check/reset_off.png") 50% 74%/24px auto no-repeat #D4D4D4;
  }
}
.ten_check .cautions_box {
  max-width: 800px;
  border: 1px solid #977D6E;
  padding: 44px 84px 36px;
  border-radius: 5px;
  margin: 63px auto 87.1px;
  background: #FFF;
}
@media screen and (max-width: 768px) {
  .ten_check .cautions_box {
    padding: 25px;
    margin: 63px 0 30px 0;
  }
}
.ten_check .cautions_box p {
  padding-left: 40px;
  position: relative;
}
.ten_check .cautions_box p:before {
  content: "";
  position: absolute;
  background: center/cover url(../img/main/dryeye/check/exclamation.svg);
  background-size: cover;
  top: 0.9em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  width: 22px;
  height: 22px;
}
@media screen and (max-width: 768px) {
  .ten_check .cautions_box p:before {
    top: 26%;
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 500px) {
  .ten_check .cautions_box p:before {
    top: 13%;
  }
}

.easy .sttl-l_05 {
  font-size: 22px;
  text-align: center;
}
.easy .cmn_txt {
  font-size: 14px;
  text-align: center;
}
.easy .area {
  border: 1px solid #977D6E;
  border-radius: 10px;
  padding: 40px 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .easy .area {
    display: block;
  }
}
.easy .area .checkarea {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .easy .area .checkarea {
    width: auto;
  }
}
.easy .area .checkarea ul {
  display: flex;
  gap: 0 1%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.easy .area .checkarea ul li {
  width: 30%;
  font-size: 18px;
  font-weight: 600;
  margin: 0 2% 20px 0;
}
@media screen and (max-width: 1600px) {
  .easy .area .checkarea ul li {
    font-size: clamp(14px, 1.25vw, 18px);
  }
}
@media screen and (max-width: 768px) {
  .easy .area .checkarea ul li {
    font-size: 17px;
    width: 100%;
    margin: 0 2% 0px 0;
  }
}
.easy .area .checkarea ul li input[type=checkbox] {
  display: none;
}
.easy .area .checkarea ul li input[type=checkbox]:checked + .checkbox_text::after {
  opacity: 1;
}
.easy .area .checkarea ul li .checkbox_text {
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  overflow: hidden;
  display: inline-block;
  box-sizing: border-box;
}
.easy .area .checkarea ul li .checkbox_text::before {
  content: "";
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  left: 0px;
  top: 3px;
  border: 1px solid #9B8466;
}
.easy .area .checkarea ul li .checkbox_text::after {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0.3em;
  display: block;
  margin-top: -9px;
  width: 0.4em;
  height: 0.6em;
  border-right: 2px solid #F95C5C;
  border-bottom: 2px solid #F95C5C;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  opacity: 0;
}
.easy .count_area {
  display: flex;
  justify-content: space-between;
  gap: 2%;
}
@media screen and (max-width: 768px) {
  .easy .count_area {
    display: block;
  }
}
.easy .countbox {
  min-width: 223px;
  width: 24.8%;
  min-height: 168px;
  border: 1px solid #A18679;
  background: #fff;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .easy .countbox {
    width: 31%;
    max-height: 195px;
  }
}
@media screen and (max-width: 1000px) {
  .easy .countbox {
    max-height: 180px;
  }
}
@media screen and (max-width: 768px) {
  .easy .countbox {
    min-width: inherit;
    max-width: 218px;
    width: 100%;
    max-height: 193px;
    margin: 0 auto 20px;
  }
}
.easy .countbox .ttl {
  background: #A18679;
  padding: 5px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.easy .countbox .counter {
  width: 140px;
  color: #817061;
  position: absolute;
  bottom: -14px;
  left: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.easy .countbox .counter p {
  font-size: 86px;
  font-weight: 600;
}
@media screen and (max-width: 820px) {
  .easy .countbox .counter p {
    font-size: 90px;
  }
}
@media screen and (max-width: 1450px) {
  .easy .countbox .counter p {
    font-size: 6.9655172414vw;
  }
}
@media screen and (max-width: 1200px) {
  .easy .countbox .counter p {
    bottom: 0px;
  }
}
@media screen and (max-width: 1000px) {
  .easy .countbox .counter p {
    bottom: 10px;
    left: -5%;
  }
}
@media screen and (max-width: 768px) {
  .easy .countbox .counter p {
    font-size: 70px;
  }
}
@media screen and (max-width: 820px) {
  .easy .countbox .counter {
    font-size: 90px;
  }
}
@media screen and (max-width: 1450px) {
  .easy .countbox .counter {
    font-size: 6.9655172414vw;
  }
}
@media screen and (max-width: 1200px) {
  .easy .countbox .counter {
    bottom: 0px;
  }
}
@media screen and (max-width: 1000px) {
  .easy .countbox .counter {
    bottom: 10px;
    left: -5%;
  }
}
@media screen and (max-width: 768px) {
  .easy .countbox .counter {
    position: static;
    padding-left: 0px;
    font-size: 70px;
    height: 100px;
  }
}
.easy .countbox .denominator p {
  color: #605043;
  font-size: 39px;
  position: absolute;
  font-weight: 600;
  bottom: 5px;
  right: 30px;
}
@media screen and (max-width: 820px) {
  .easy .countbox .denominator p {
    right: 20px;
  }
}
@media screen and (max-width: 1600px) {
  .easy .countbox .denominator p {
    font-size: clamp(34px, 2.625vw, 42px);
  }
}
@media screen and (max-width: 1000px) {
  .easy .countbox .denominator p {
    font-size: 34px;
  }
}
@media screen and (max-width: 768px) {
  .easy .countbox .denominator p {
    font-size: 36px;
    right: 50px;
  }
}
.easy .countbox .denominator p::before {
  content: "";
  position: absolute;
  background: #555555;
  width: 78px;
  height: 2px;
  bottom: 50px;
  left: -50px;
  transform: rotate(-60deg);
}
@media screen and (max-width: 1000px) {
  .easy .countbox .denominator p::before {
    width: 80px;
    bottom: 45px;
    left: -40px;
  }
}
@media screen and (max-width: 768px) {
  .easy .countbox .denominator p::before {
    width: 70px;
    bottom: 40px;
    left: -46px;
  }
}
.easy .cautions_box {
  position: relative;
  width: 73.2%;
  display: flex;
  align-items: center;
  border: 1px solid #977D6E;
  padding: 40px 37px 36px;
  border-radius: 5px;
  background: #FFF;
}
@media screen and (max-width: 768px) {
  .easy .cautions_box {
    width: 100%;
    margin: 20px 0 30px 0;
  }
}
.easy .cautions_box p {
  padding-left: 40px;
  position: relative;
}
.easy .cautions_box .alert-wrap {
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
@media screen and (max-width: 768px) {
  .easy .cautions_box .alert-wrap {
    padding: 40px 5%;
  }
}
.easy .cautions_box .default {
  opacity: 1;
  display: block;
  transition: opacity 0.2s ease;
  padding-left: 30px;
}
.easy .cautions_box .default:before {
  content: "";
  position: absolute;
  background: center/cover url(../img/main/dryeye/check/exclamation.svg);
  background-size: cover;
  top: 0.35em;
  left: 0px;
  width: 20px;
  height: 20px;
}
.easy .cautions_box .alert-wrap {
  opacity: 0;
}
.easy .cautions_box .alert-wrap .alert {
  position: relative;
}
.easy .cautions_box .alert-wrap .alert:before {
  content: "";
  position: absolute;
  background: center/cover url(../img/main/dryeye/check/exclamation.svg);
  background-size: cover;
  top: 0.35em;
  left: 2px;
  width: 20px;
  height: 20px;
}
.easy .cautions_box.over .default {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.easy .cautions_box.over .alert-wrap {
  opacity: 1;
  transition: opacity 0.2s ease;
}/*# sourceMappingURL=dryeye.css.map */