@charset "utf-8";


/* -----------------------------------

コンタクトレンズを快適に使用するために知っておきたいポイントは？

-------------------------------------*/
#enlightenment{
  width: 100%;
  margin: 0 auto;
  text-align: left;
  color: #303f6a;
}
#enlightenment sup,
#enlightenment sub {
  height: 0;
  line-height: 1;
  position: relative;
	font-size: 60%;
}
#enlightenment img {
  display: block;
}
#enlightenment .media_artcl_box h1{
  font-size: calc(38 / 960 * var(--contents_width));
  line-height: 1.5;
  width: 90%;
  margin: 0 auto;
}
#enlightenment .mainvisual{
  position: relative;
  z-index: 0;
  background: linear-gradient(
    -147deg,
    #ffffff 0%,
    #ffffff 50%,
    #e3f0fa 100%
  );
}
#enlightenment .mainvisual .title{
  position: absolute;
  z-index: 10;
  color: #005cab;
  font-size: calc(50 / 960 * var(--contents_width));
  line-height: 1.45;
  font-weight: bold;
  top: 17%;
  left: calc(38 / 960 * var(--contents_width));
  letter-spacing: 0.05rem;
}
#enlightenment .mainvisual .text{
  position: absolute;
  z-index: 10;
  font-size: calc(36 / 960 * var(--contents_width));
  line-height: calc(68 / 960 * var(--contents_width));
  top: calc(456 / 960 * var(--contents_width));
  left: calc(68 / 960 * var(--contents_width));
  letter-spacing: 0;
}

#enlightenment .mvtext{
  font-size: calc(31 / 960 * var(--contents_width));
  line-height: calc(58 / 960 * var(--contents_width));
  letter-spacing: 0;
  padding: calc(30 / 960 * var(--contents_width)) calc(45 / 960 * var(--contents_width)) calc(45 / 960 * var(--contents_width));
  margin-bottom: 0 !important;
}

#enlightenment .reason_section h2 {
  text-align: center;
  background: none;
  padding: 0;
  border-bottom: 0;
  width: 75%;
  margin: 0 auto;
}
#enlightenment .reason_section h2 span {
  font-size: calc(40 / 960 * var(--contents_width));
  line-height: calc(59 / 960 * var(--contents_width));
  background:
    url(/campaign/enlightenment/img/icon_title.png) no-repeat left center/calc(54 / 960 * var(--contents_width)) calc(52 / 960 * var(--contents_width)),
    url(/campaign/enlightenment/img/icon_title.png) no-repeat right center/calc(54 / 960 * var(--contents_width)) calc(52 / 960 * var(--contents_width));
  color: #333;
  padding: 0 calc(114 / 960 * var(--contents_width));
  margin: calc(102 / 960 * var(--contents_width)) auto calc(68 / 960 * var(--contents_width));
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
}
#enlightenment .reason_row {
  display: block;
  margin-bottom: calc(45 / 960 * var(--contents_width));
  justify-content: space-between;
  align-items: flex-start;
  width: 95%;
  margin: 0 auto;
}
#enlightenment .reason_image {
  width: 100%;
  margin-bottom: calc(68 / 960 * var(--contents_width));
}
#enlightenment .reason_content {
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0;
}
#enlightenment .reason_text{
  font-size: calc(32 / 960 * var(--contents_width));
  line-height: 1.8;
  margin-bottom: calc(34 / 960 * var(--contents_width)) !important;
}
#enlightenment .reason_head {
  align-items: center;
  gap: calc(22 / 960 * var(--contents_width));
  display: block;
  margin: 0 0 calc(45 / 960 * var(--contents_width));
  flex-wrap: wrap;
  width: 56%;
}
#enlightenment .media_artcl_box h3.reason_title {
  color: #b2117f;
  font-weight: 700;
  line-height: 1.55;
  background: none;
  padding: 0;
  border-left: 0;
  margin: 0 0 calc(22 / 960 * var(--contents_width));
  font-size: calc(36 / 960 * var(--contents_width));
}
#enlightenment .reason_row.reason_row_2 .reason_content {
  margin-left: 0;
  margin-right: 0;
}



#enlightenment .reason_section2{
  width: 95%;
  margin: 0 auto calc(114 / 960 * var(--contents_width));
  height: auto;
}
#enlightenment .reason_section2 h3{
  text-align: center;
  border-left: 0;
  border-bottom: calc(2 / 960 * var(--contents_width)) solid #005cab;
  color: #005cab;
  letter-spacing: 0;
  background: url(/campaign/enlightenment/img/illust1_sp.png) no-repeat left top/contain;
  font-size: calc(35 / 960 * var(--contents_width));
  padding: 0;
  margin: calc(114 / 960 * var(--contents_width)) auto 0;
  width: 100%;
  line-height: calc(90 / 960 * var(--contents_width));
  height: auto;
  padding-bottom: calc(22 / 960 * var(--contents_width));
}
#enlightenment .reason_section2 p{
  letter-spacing: 0;
  margin: calc(37 / 960 * var(--contents_width)) auto 0;
  width: 100%;
  font-size: calc( 32 / 960 * var(--contents_width));
  line-height: 1.8;
}


#enlightenment .linkbox_section{
  background: #f5f5f5;
  padding: calc(45 / 960 * var(--contents_width)) calc(20 / 960 * var(--contents_width)) calc(53 / 960 * var(--contents_width));
  margin: 0 auto calc(89 / 960 * var(--contents_width));
  box-sizing: border-box;
  width: 95%;
}
#enlightenment .linkbox_section h4{
  border-bottom: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: calc(36 / 960 * var(--contents_width));
  line-height: calc(50 / 960 * var(--contents_width));
  color: #313131;
  letter-spacing: 0.08em;
}

#enlightenment .linkbox_section .boxlist{
  display: block;
  margin-bottom: calc(45 / 960 * var(--contents_width));
}

#enlightenment .linkbox_section .spbox{
  margin: calc(57 / 960 * var(--contents_width)) 0 calc(40 / 960 * var(--contents_width)) 0;
  display: grid;
  grid-template-columns: 34.6% 61.4%;
  gap: calc(34 / 960 * var(--contents_width));
}
#enlightenment .linkbox_section .box {
  position: relative;
}
#enlightenment .linkbox_section .box picture {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

#enlightenment .linkbox_section .box picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#enlightenment .linkbox_section .box .textblock {
    margin-top: 0;
}
#enlightenment .linkbox_section .box .textblock .title {
  font-size: calc(28 / 960 * var(--contents_width));
  line-height: calc(41 / 960 * var(--contents_width));
  color: #005cab;
  font-weight: bold;
  margin-bottom: calc(11 / 960 * var(--contents_width));
}
#enlightenment .linkbox_section .box p {
  font-size: calc(24 / 960 * var(--contents_width));
  line-height: calc(45 / 960 * var(--contents_width));
  margin-bottom: calc(22 / 960 * var(--contents_width));
  letter-spacing: 0;
}
#enlightenment .linkbox_section .box .btn {
  position: relative;
  bottom: 0;
  height: auto;
  width: 100%;
}
#enlightenment .linkbox_section .box .btn a {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #005cab;
  width: calc(340 / 960 * var(--contents_width));
  height: calc(80 / 960 * var(--contents_width));
  line-height: calc(80 / 960 * var(--contents_width));
  border-radius: calc(45 / 960 * var(--contents_width));
  margin: 0 auto;
  font-size: calc(30 / 960 * var(--contents_width));
}
#enlightenment .linkbox_section .note {
  font-size: calc(22 / 960 * var(--contents_width));
  line-height: calc(31 / 960 * var(--contents_width));
  letter-spacing: 0;
  margin-top: calc(45 / 960 * var(--contents_width));
  margin-bottom: 0;
}

#enlightenment .banner_section {
  margin: 0 auto calc(91 / 960 * var(--contents_width));
  box-sizing: border-box;
  width: 95%;
}
#enlightenment .banner_section .note {
  font-size: calc(20 / 960 * var(--contents_width));
  line-height: calc(31 / 960 * var(--contents_width));
  margin: calc(22 / 960 * var(--contents_width)) 0 calc(68 / 960 * var(--contents_width));
  letter-spacing: 0;
}



#enlightenment .foottext_section{
  margin: 0 auto;
  box-sizing: border-box;
  width: 95%;
}
#enlightenment .foottext_section h5{
  font-size: calc(32 / 960 * var(--contents_width));
  line-height: calc(54 / 960 * var(--contents_width));
  color: #005cab;
  margin: 0 0 calc(20 / 960 * var(--contents_width));
  letter-spacing: 0;
}
#enlightenment .foottext_section p{
  font-size: calc(28 / 960 * var(--contents_width));
  line-height: calc(49 / 960 * var(--contents_width));
  margin: 0;
  letter-spacing: 0;
}
#enlightenment .foottext_section p:first-of-type{
  margin: 0 0 calc(80 / 960 * var(--contents_width));
}
#enlightenment .foottext_section .indent{
  text-indent: -1em;
  margin-left: 1em;
}



/* 公開日・最終更新日設定==================== */

#enlightenment .media_date {

font-size: 1rem;

color: #777;

display: flex;

width: 90%;

margin: calc(30 / 960 * var(--contents_width)) auto calc(17 / 960 * var(--contents_width));
}

#enlightenment .media_lastupdated:after{

  content: "／";

  margin: 0 calc(18 / 960 * var(--contents_width));

}

#enlightenment .media_date + img {

  margin: 0 0 3rem;

}