@import"https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&subset=japanese&display=swap";body.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden
}

#wrapper {
  min-width: auto !important
}

#header {
  position: relative;
  z-index: 1000
}

.brand-header-wrap {
  display: none !important
}

#container {
  position: relative;
  min-width: auto;
  color: #000;
  overflow: hidden;
  text-align: left;
  background-color: #fff
}

#container * {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important
}

#container img {
  width: 100%;
  height: auto;
  vertical-align: top;
  image-rendering: -webkit-optimize-contrast
}

#container ul {
  list-style: none;
  margin: 0;
  padding: 0
}

#container ol,#container dl,#container dt,#container dd,#container p {
  margin: 0;
  padding: 0
}

@media screen and (max-width: 767px) {
  #container .u-sm-min {
      display:none !important
  }
}

@media print,screen and (min-width: 768px) {
  #container .u-sm-max {
      display:none !important
  }
}

@media screen and (max-width: 960px) {
  #container .u-md-min {
      display:none !important
  }
}

@media print,screen and (min-width: 961px) {
  #container .u-md-max {
      display:none !important
  }
}

#container * {
  font-family: "Noto Sans JP",sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #000
}

#container a {
  -webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

#container .box01 {
  padding: 95px 40px 690px;
      background-color: rgba(0,0,0,0);
      background-image: url("/-/Media/com/learn-more/eyecare2024/eyecareday/20240329/bg.jpg"), url("/-/Media/com/learn-more/eyecare2024/eyecareday/20240315/bg02.jpg");
      background-position: bottom center, top center;
      background-repeat: no-repeat, repeat-y;
      background-size: cover, 100% auto;
}

@media screen and (max-width: 960px) {
  #container .box01 {
      padding:9.8855359001vw 4.1623309053vw 71.8002081165vw
  }
}

@media screen and (max-width: 767px) {
  #container .box01 {
      padding:10.6666666667vw 0 47.3333333333vw;
      background-color: rgba(0,0,0,0);
      background-image: url("/-/Media/com/learn-more/eyecare2023/eyecareday/20231013/bg_sp.jpg"), url("/-/Media/com/learn-more/eyecare2024/eyecareday/20240315/bg02_sp.jpg");
      background-position: bottom center, top center;
      background-repeat: no-repeat, repeat-y;
      background-size: 100% auto, 100% auto;
  }
}

#container .box01 .ttl01 {
  margin: 0 auto;
  width: 100%;
  max-width: 851px
}

@media screen and (max-width: 767px) {
  #container .box01 .ttl01 {
      width:87.0666666667vw
  }
}

#container .box01 .ttl02 {
  margin: 0 auto;
  margin-bottom: 4.94938132733408%;
  width: 65.91676040494938%;
}


@media screen and (max-width: 767px) {
  #container .box01 .ttl02 {
    width:59.06666666666667vw;
    margin-bottom: 7.46666666666667vw;
  }
}

#container .box01 .txt01 {
  margin: 20px auto 0;
  width: 100%;
  max-width: 650px
}

@media screen and (max-width: 960px) {
  #container .box01 .txt01 {
      margin:2.0811654527vw auto 0
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txt01 {
      margin:8vw auto 0;
      width: 86.6666666667vw
  }
}

#container .box01 .txt02 {
  margin: 20px auto 0;
  width: 100%;
  max-width: 737px
}

@media screen and (max-width: 960px) {
  #container .box01 .txt02 {
      margin:2.0811654527vw auto 0
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txt02 {
      margin:8vw auto 0;
      width: 71.8666666667vw
  }
}

#container .box01 .txt03 {
  margin: 0 auto;
  margin-bottom: 7.19910011248594%;
  width: 63.89201349831271%;
}

@media screen and (max-width: 767px) {
  #container .box01 .txt03 {
      width: 75.73333333333333vw;
      margin-bottom: 7.46666666666667vw;
  }
}


#container .box01 .txt04 {
  margin: 0 auto;
  margin-top: 120px;
  margin-bottom: 47px;
  width: 100%;
  max-width: 552px;
}

@media screen and (max-width: 767px) {
  #container .box01 .txt04 {
    margin: 0 auto;
    margin-top: 10.66666666666667vw;
    margin-bottom: 4.26666666666667vw;
    width: 51.33333333333333vw;
    max-width: none;
  }
}
#container .box01 .txtBox {
  position: relative;
  margin: 75px auto 0;
  width: 100%;
  max-width: 889px
}

@media screen and (max-width: 960px) {
  #container .box01 .txtBox {
      margin:7.8043704475vw auto 0
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox {
      margin:10vw auto 0;
      width: 87.6vw
  }
}

#container .box01 .txtBox .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .inner {
    padding-top: 8vw;

      -webkit-box-pack:start;
      -ms-flex-pack: start;
      justify-content: flex-start;
  }
}

#container .box01 .txtBox .date01 {
  width: 88.63892013498313%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .date01 {
      width: 75.33333333333333vw
  }
}

#container .box01 .txtBox .caution_01 {
  margin: 34px 0 0 80px;
  width: 594px
}

@media screen and (max-width: 960px) {
  #container .box01 .txtBox .caution_01 {
      margin:3.5379812695vw 0 0 8.3246618106vw;
      width: 61.8106139438vw
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .caution_01 {
      margin:4.5333333333vw 0 0 0;
      width: 64.5333333333vw
  }
}

#container .box01 .txtBox .caution_02 {
  margin: 45px 0 0 100px;
  width: 481px
}

@media screen and (max-width: 960px) {
  #container .box01 .txtBox .caution_02 {
      margin:4.6826222685vw 0 0 8.3246618106vw;
      width: 50.0520291363vw
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .caution_02 {
      margin:6vw 0 0 0;
      width: 52vw
  }
}

#container .box01 .txtBox .caution_03 {
  margin: 20px 0 0 100px;
  width: 524px
}

@media screen and (max-width: 960px) {
  #container .box01 .txtBox .caution_03 {
      margin:2.0811654527vw 0 0 8.3246618106vw;
      width: 54.5265348595vw
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .caution_03 {
      margin:2.6666666667vw 0 0 0;
      width: 56.8vw
  }
}

#container .box01 .txtBox .caution_04 {
  margin: 20px 0 0 80px;
  width: 638px
}

@media screen and (max-width: 960px) {
  #container .box01 .txtBox .caution_04 {
      margin:2.0811654527vw 0 0 8.3246618106vw;
      width: 66.3891779396vw
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .caution_04 {
      margin:2.6666666667vw 0 0 0;
      width: 69.2vw
  }
}

#container .box01 .txtBox .caution_05 {
  margin: 0 auto;
  margin-top: 7.8740157480315%;
  margin-bottom: 5.39932508436445%;
  width: 45.55680539932508%;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .caution_05 {
      width: 44.4vw;
      margin: 8.53333333333333vw auto;
  }
}

#container .box01 .txtBox .list01 {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;

  margin: 0 auto;
  width: 74.80314960629921%;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .list01 {
    width: 77.06666666666667vw;
  }
}

#container .box01 .txtBox .list01 p {
  font-weight: 300;
  color: #FFFFFF;
  font-size: min(2.06185567010309vw, 20px);
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .list01 p {
    font-size: 2.66666666666667vw;
    letter-spacing: -0.03em;
  }
}

#container .box01 .txtBox .list01 a {
  color: #FFFFFF;
}

#container .box01 .txtBox .list02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 28px;

  margin: 0 auto;
  margin-top: 6.52418447694038%;
  width: 66.59167604049494%;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .list02 {
    row-gap: 3.46666666666667vw;

    margin: 0 auto;
    margin-top: 7.73333333333333vw;
    width: 71.2vw;
  }
}

#container .box01 .txtBox .item01 {
  width: 100%;
}

#container .box01 .txtBox .item01 a {
  display: block;

  width: 100%;
  margin: 0 auto;
}

#container .box01 .txtBox .item02 {
  width: 47.2972972972973%;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .item02 {
    width: 33.6vw;
  }
}

#container .box01 .txtBox .item02 a {
  display: block;

  width: 100%;
  margin: 0 auto;
}

#container .box01 .txtBox .ttl03 {
  margin: 0 auto;
  margin-top: 104px;
  margin-bottom: 47px;
  width: 100%;
  max-width: 381px;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .ttl03 {
    margin: 0 auto;
    margin-top: 10vw;
    margin-bottom: 4.26666666666667vw;
    width: 34.2666666667vw;
    max-width: none;
  }
}

#container .box01 .txtBox .heldMovie01 {
  margin: 0 auto;
  width: 89.9887514061%;
  max-width: 800px;
  background-color: rgba(0,0,0,0);
  aspect-ratio: 16/9;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .heldMovie01 {
    width: 81.3333333333vw;
  }
}

#container .box01 .txtBox .heldMovie01 iframe {
  width: 100%;
  height: 100%;
}

#container .box01 .txtBox .heldMovie02 {
  margin: 20px auto 0;
  width: 89.9887514061%;
  max-width: 800px;
  background-color: rgba(0,0,0,0);
  aspect-ratio: 16/9;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .heldMovie02 {
    width: 81.3333333333vw;
    margin: 2.6666666667vw auto 0;
  }
}

#container .box01 .txtBox .heldMovie02 iframe {
  width: 100%;
  height: 100%;
}

#container .box01 .txtBox .heldImg01 {
  margin: 20px auto 0;
  width: 89.9887514061%;
  max-width: 800px;
  background-color: rgba(0,0,0,0);
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .heldImg01 {
    width: 81.3333333333vw;
    margin: 2.6666666667vw auto 0;
  }
}

#container .box01 .txtBox .heldImg02 {
  margin: 20px auto 0;
  width: 89.9887514061%;
  max-width: 800px;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .heldImg02 {
    width: 81.3333333333vw;
    margin: 2.6666666667vw auto 0;
  }
}

#container .box01 .txtBox .heldImg02 .caption {
  display: block;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  margin-top: 18px;
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .heldImg02 .caption {
    font-size: 3.2vw;
    margin-top: 1.6vw;
  }
}

#container .box01 .txtBox .event-cancel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

#container .box01 .txtBox .event-cancel dl {
  background: rgba(255,255,255,.9);
  width: 85%;
  padding: 40px
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .event-cancel dl {
      width:93%;
      padding: 15px
  }
}

#container .box01 .txtBox .event-cancel dl dt {
  font-size: 22px;
  font-weight: bold
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .event-cancel dl dt {
      font-size:15px
  }
}

#container .box01 .txtBox .event-cancel dl dd {
  font-size: 16px;
  margin-top: 21px;
  line-height: 1.9
}

@media screen and (max-width: 767px) {
  #container .box01 .txtBox .event-cancel dl dd {
      font-size:12px;
      margin-top: 7px;
      line-height: 1.6
  }
}

#container .box01 .movie01 {
  margin: 0 auto 0;
  width: 100%;
  max-width: 1142px;
  background-color: rgba(0,0,0,0);
  aspect-ratio: 16/9
}

@media screen and (max-width: 960px) {
  #container .box01 .movie01 {
      margin:0 auto 0
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .movie01 {
      margin:0 auto 0;
      padding: 0 6.6666666667vw
  }
}

#container .box01 .movie01 iframe {
  width: 100%;
  height: 100%
}

#container .box01 .image01 {
  margin: 20px auto 0;
  width: 100%;
  max-width: 1140px;
  background-color: rgba(0,0,0,0)
}

@media screen and (max-width: 960px) {
  #container .box01 .image01 {
      margin:2.0811654527vw auto 0
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .image01 {
      margin:2vw auto 0;
      padding: 0 6.6666666667vw
  }
}

#container .box01 .image02 {
  margin: 20px auto 0;
  width: 100%;
  max-width: 1140px
}

@media screen and (max-width: 960px) {
  #container .box01 .image02 {
      margin:2.0811654527vw auto 0
  }
}

@media screen and (max-width: 767px) {
  #container .box01 .image02 {
      margin:2vw auto 0;
      padding: 0 6.6666666667vw
  }
}

#container .box01 .image02 .caption {
  display: block;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: #fff
}

@media screen and (max-width: 767px) {
  #container .box01 .image02 .caption {
      font-size:3.2vw
  }
}

#container .box2022 {
  padding: 60px 40px 50px;
  background-color: #00946a
}

@media screen and (max-width: 960px) {
  #container .box2022 {
      padding:6.243496358vw 4.1623309053vw 5.2029136316vw
  }
}

@media screen and (max-width: 767px) {
  #container .box2022 {
      padding:8vw 5.3333333333vw 6.6666666667vw
  }
}

#container .box2022 .inner {
  margin: 0 auto;
  width: 100%;
  max-width: 670px
}

#container .box2022 .ttl2022 {
  margin-bottom: 14px;
  width: 239px
}

@media screen and (max-width: 960px) {
  #container .box2022 .ttl2022 {
      margin-bottom:1.4568158169vw;
      width: 24.8699271592vw
  }
}

@media screen and (max-width: 767px) {
  #container .box2022 .ttl2022 {
      margin-bottom:1.8666666667vw;
      width: 31.8666666667vw
  }
}

#container .box2022 .btn2022 a {
  display: block
}

@media print,screen and (min-width: 768px) {
  #container .box2022 .btn2022 a:hover {
      opacity:.7
  }
}

#container .box2021 {
  padding: 60px 40px 50px;
  background-color: #005cab
}

@media screen and (max-width: 960px) {
  #container .box2021 {
      padding:5.2029136316vw 4.1623309053vw 5.2029136316vw
  }
}

@media screen and (max-width: 767px) {
  #container .box2021 {
      padding:8vw 5.3333333333vw 6.6666666667vw
  }
}

#container .box2021 .inner {
  margin: 0 auto;
  width: 100%;
  max-width: 670px
}

#container .box2021 .ttl2021 {
  margin-bottom: 14px;
  width: 238px
}

@media screen and (max-width: 960px) {
  #container .box2021 .ttl2021 {
      margin-bottom:1.4568158169vw;
      width: 24.7658688866vw
  }
}

@media screen and (max-width: 767px) {
  #container .box2021 .ttl2021 {
      margin-bottom:1.8666666667vw;
      width: 31.7333333333vw
  }
}

#container .box2021 .btn2021 a {
  display: block
}

@media print,screen and (min-width: 768px) {
  #container .box2021 .btn2021 a:hover {
      opacity:.7
  }
}

#container .box2020 {
  padding: 60px 40px 50px;
  background-color: #004d95
}

@media screen and (max-width: 960px) {
  #container .box2020 {
      padding:5.2029136316vw 4.1623309053vw 5.2029136316vw
  }
}

@media screen and (max-width: 767px) {
  #container .box2020 {
      padding:8vw 5.3333333333vw 6.6666666667vw
  }
}

#container .box2020 .inner {
  margin: 0 auto;
  width: 100%;
  max-width: 670px
}

#container .box2020 .ttl2020 {
  margin-bottom: 14px;
  width: 239px
}

@media screen and (max-width: 960px) {
  #container .box2020 .ttl2020 {
      margin-bottom:1.4568158169vw;
      width: 24.8699271592vw
  }
}

@media screen and (max-width: 767px) {
  #container .box2020 .ttl2020 {
      margin-bottom:1.8666666667vw;
      width: 31.8666666667vw
  }
}

#container .box2020 .btn2020 a {
  display: block
}

@media print,screen and (min-width: 768px) {
  #container .box2020 .btn2020 a:hover {
      opacity:.7
  }
}