@charset "UTF-8";
#contents.smileplusr { font-size: 16px; }
#contents.smileplusr *, #contents.smileplusr *:before, #contents.smileplusr *:after { box-sizing: border-box; }
#contents.smileplusr .sizeSS { font-size: 12px; }
#contents.smileplusr .sizeS { font-size: 14px; }
#contents.smileplusr .sizeN { font-size: 16px; }
#contents.smileplusr .sizeM { font-size: 18px; }
#contents.smileplusr .sizeL { font-size: 20px; }
#contents.smileplusr .sizeLL { font-size: 24px; }
@media screen and (max-width: 767px) { #contents.smileplusr { font-size: 3.6vw; }
  #contents.smileplusr .sizeSS { font-size: 3vw; }
  #contents.smileplusr .sizeS { font-size: 3.2vw; }
  #contents.smileplusr .sizeN { font-size: 3.6vw; }
  #contents.smileplusr .sizeM { font-size: 4vw; }
  #contents.smileplusr .sizeL { font-size: 4.2vw; }
  #contents.smileplusr .sizeLL { font-size: 4.6vw; } }

#contents img.liquid { width: 100%; height: auto; }

@media screen and (min-width: 768px) { .pc_only { display: block; }
  .sp_only { display: none; } }
@media screen and (max-width: 767px) { .pc_only { display: none; }
  .sp_only { display: block; }
  img { max-width: 100%; height: auto; }
  .spmb40 { margin-bottom: 5vw !important; } }
.red { color: #e60012; }

a { transition: all 0.3s ease-in; }
a:hover { opacity: .8; }

a.linkBtn { display: inline-block; position: relative; text-align: center; font-size: 23px; background-color: #005AB4; color: #FFF !important; border-radius: 9999px; padding: 10px 70px; font-weight: bold; width: 100%; max-width: 640px; }
@media screen and (max-width: 767px) { a.linkBtn { min-width: inherit; width: 100%; font-size: 4.6vw; padding: 3vw 10vw; } }
a.linkBtn:hover { text-decoration: none; }
a.linkBtn::after { content: ""; display: inline-block; vertical-align: middle; color: #FFF; line-height: 1; width: .6em; height: .6em; border: 0.1em solid currentColor; border-left: 0; border-bottom: 0; box-sizing: border-box; position: absolute; right: 20px; top: 50%; transform: translateY(-75%) rotate(135deg); }
a.linkBtn.pink { background-color: #e9557e; }
a.linkBtn.maintenance { background-image: url("/myepson/smileplusr/images/icon_mente.png"); background-repeat: no-repeat; background-size: 35px auto; background-position: left 20px center; }
a.linkBtn.support { background-image: url("/myepson/smileplusr/images/icon_supprt.png"); background-repeat: no-repeat; background-size: 35px auto; background-position: left 20px center; }
a.linkBtn.blank::after { content: none; }
a.linkBtn.blank .icon { width: 17px; height: 17px; border: 0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

a.link { padding-left: 20px; font-weight: bold; position: relative; font-size: 17px; }
@media screen and (max-width: 767px) { a.link { font-size: 3.6vw; } }
a.link::before { content: ""; display: inline-block; width: 17px; height: 17px; background: url(/common/img/ico_img_01.svg) no-repeat center top; background-size: 17px 17px; position: absolute; top: 0; left: 0; }
a.link.anchor::before { background-image: url(/common/img/ico_img_04.svg); }

a.popup { font-style: normal; width: 15px; height: 15px; background-color: #005AB4; border-radius: 100%; color: #FFF; display: inline-flex; justify-content: center; align-items: center; font-size: 10px; line-height: 1; font-weight: normal; margin: 0 0 0 3px; }
a.popup:hover { text-decoration: none; }

#contents .headSection .innerBlock { margin-bottom: 40px; width: 1240px; }
@media screen and (max-width: 767px) { #contents .headSection .innerBlock { width: 100%; margin-bottom: 0; } }
#contents .headSection .innerBlock h1 { font-size: 24px; font-weight: bold; line-height: 1.2; }
@media screen and (max-width: 767px) { #contents .headSection .innerBlock h1 { font-size: 4.6vw; } }

/* section */
.section { padding: 0; }
.section * { box-sizing: border-box; }
.section + .section { margin-top: 80px; }
@media screen and (max-width: 767px) { .section + .section { margin-top: 10vw; } }
.section__lead .call { text-align: center; color: #005AB4; font-weight: bold; font-size: 22px; }
@media screen and (max-width: 767px) { .section__lead .call { font-size: 3.8vw; } }
.section__lead .call .bbl { display: inline-block; padding: 0 70px; position: relative; }
@media screen and (max-width: 767px) { .section__lead .call .bbl { padding: 0 8vw; } }
.section__lead .call .bbl::before, .section__lead .call .bbl::after { content: ''; position: absolute; top: 50%; display: inline-block; width: 70px; height: 1px; border-bottom: 4px dotted #005AB4; }
@media screen and (max-width: 767px) { .section__lead .call .bbl::before, .section__lead .call .bbl::after { width: 15vw; } }
.section__lead .call .bbl::before { left: 0; transform: rotate(60deg); }
@media screen and (max-width: 767px) { .section__lead .call .bbl::before { left: -5vw; } }
.section__lead .call .bbl::after { right: 0; transform: rotate(-60deg); }
@media screen and (max-width: 767px) { .section__lead .call .bbl::after { right: -5vw; } }
.section__inner { margin: 0 auto; }
@media screen and (min-width: 768px) { .section__inner { width: 1240px; } }
.section__title { margin: 0 0 35px 0; padding: 15px; font-size: 28px; line-height: 1.3; background-color: #005AB4; color: #FFF; text-align: center; position: relative; }
@media screen and (max-width: 767px) { .section__title { font-size: 4.4vw; margin-bottom: 5vw; } }
.section__title_bdr { margin: 0 0 35px 0; padding-bottom: .15em; font-size: 22px; line-height: 1.3; color: #005AB4; text-align: center; position: relative; }
@media screen and (max-width: 767px) { .section__title_bdr { font-size: 4vw; margin-bottom: 5vw; } }
.section__title_bdr:after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background-color: #005AB4; }
.section__title_bdr span { position: relative; z-index: 1; display: inline-block; background-color: #FFF; padding: 0 15px; }
.section__text { margin-bottom: 1.5em; font-size: 16px; line-height: 1.625; }
.section__text .em { color: #005AB4; font-size: 22px; font-weight: bold; }
.section__btn { margin-top: 1.8em; font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; }
@media screen and (max-width: 767px) { .section__btn { font-size: 4vw; } }
.section__btn.line2 li { width: 350px; margin: 0 10px; }
@media screen and (max-width: 767px) { .section__btn.line2 li { width: 100%; margin: 0 0 3vw 0; } }
.section__btn li { width: 520px; }
@media screen and (max-width: 767px) { .section__btn li { width: 100%; } }
.section__btn li.movie_section__01 { display: flex; justify-content: center; align-items: center; font-weight: bold; }
@media screen and (min-width: 768px) { .section__btn li.movie_section__01 { width: 260px; flex-basis: 260px; background-color: #cccccc; margin-right: 10px; } }
@media screen and (max-width: 767px) { .section__btn li.movie_section__01 { margin-bottom: 2vw; } }
.section__btn li.movie_section__02 { width: 520px; }
@media screen and (max-width: 767px) { .section__btn li.movie_section__02 { width: 100%; } }
.section__btn li.movie_section__02 a img.movieicon { width: 50px; height: 36px; position: absolute; left: 20px; }
@media screen and (max-width: 767px) { .section__btn li.movie_section__02 a img.movieicon { width: 8vw; height: auto; left: 3vw; } }
.section__btn li.movie_section__02.movie { margin-bottom: 0; }
@media screen and (max-width: 767px) { .section__btn li.movie_section__02.movie { margin-bottom: 2vw; } }
.section__btn li.movie_section__02.movie a.blank { background-image: none; }
.section__btn li.movie_section__02.movie a.blank img.icon { width: 15px; height: 15px; display: inline-block; position: absolute; right: 19px; top: 50%; margin-top: -6px; }
@media screen and (max-width: 767px) { .section__btn li.movie_section__02.movie a.blank img.icon { right: 3vw; margin-top: 0; } }
@media screen and (min-width: 768px) { .section__btn li.movie_section__02 + .movie_section__02 { padding-top: 10px; } }
.section__btn a { display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 100%; height: 64px; background-color: #005AB4; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' %3E%3Cg%3E%3Cpath fill='%23ffffff' d='M18.9,10c0-.2.1-.3.1-.5h0c0-.2,0-.4-.1-.5h0c0-.2-.2-.4-.3-.5L11.6,1.4c-.6-.6-1.5-.6-2.1,0s-.6,1.5,0,2.1l4.4,4.4H1.5c-.8,0-1.5.7-1.5,1.5s.7,1.5,1.5,1.5h12.4l-4.4,4.5c-.6.6-.6,1.5,0,2.1.3.3.7.4,1.1.4s.8-.1,1.1-.5l6.9-7.1h0c.1-.2.2-.3.3-.5,0,0,0,0,0,0h0Z' /%3E%%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px 18px; background-position: right 18px center; border-radius: 5px; font-size: inherit; font-weight: bold; line-height: 1; color: #fff; text-decoration: none; text-align: center; position: relative; }
@media screen and (max-width: 767px) { .section__btn a { height: auto; min-height: 12vw; max-width: 85vw; padding: 3vw 10vw; } }
.section__btn a.sky { background-color: #41a5d7; }
.section__btn a.blank { background-image: none; }
.section__btn a.blank .icon { width: 17px; height: 17px; border: 0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.section__btn + h3 { margin-top: 40px; }
.section__btn__box { gap: 2%; padding: 0 20px; }
@media screen and (max-width: 767px) { .section__btn__box { padding: 0; } }
.section__btn__box li { background-color: #FFF; border-radius: 5px; padding: 10px; text-align: center; margin: 0; }
@media screen and (max-width: 767px) { .section__btn__box li { padding: 3vw; } }
.section__btn__box li h4 { font-size: 15px; margin-bottom: 10px; }
@media screen and (max-width: 767px) { .section__btn__box li h4 { font-size: 3.8vw; } }
.section__btn__box li a { width: 100%; height: auto; padding: 10px 25px; background-position: right 10px center; background-size: 14px 14px; }
.section__btn__box li ul { display: flex; flex-wrap: wrap; gap: 2%; }
@media screen and (max-width: 767px) { .section__btn__box li ul { gap: 2vw; } }
.section__btn__box li ul li { width: 49%; margin: 0; padding: 0; }
@media screen and (max-width: 767px) { .section__btn__box li ul li { width: 100%; } }
.section__btn__box li.ecotank { border: 2px solid #62a626; width: 40%; }
@media screen and (max-width: 767px) { .section__btn__box li.ecotank { width: 100%; margin-bottom: 3vw; } }
.section__btn__box li.ecotank h4 { color: #62a626; }
.section__btn__box li.ecotank a { background-color: #62a626; }
.section__btn__box li.cartridge { border: 2px solid #3e9ecf; width: 58%; }
@media screen and (max-width: 767px) { .section__btn__box li.cartridge { width: 100%; } }
.section__btn__box li.cartridge h4 { color: #3e9ecf; }
.section .btnList { display: flex; flex-wrap: wrap; justify-content: center; gap: 2%; }
@media screen and (max-width: 767px) { .section .btnList { gap: 2vw; margin-bottom: 5vw !important; } }
.section .btnList li { width: 49%; }
@media screen and (max-width: 767px) { .section .btnList li { width: 100%; } }
@media screen and (max-width: 767px) { .section .linkList { margin-bottom: 10vw !important; } }
.section .linkList li:not(:last-child) { margin-bottom: 10px; }
@media screen and (max-width: 767px) { .section .linkList li:not(:last-child) { margin-bottom: 2vw; } }

/* mainvisual */
.mainvisual { margin: 0 auto 30px; }
@media screen and (min-width: 768px) { .mainvisual { width: 1240px; } }

.movie_page_menu { background-color: #f2f4f6; padding: 40px; margin: 60px 0 20px; }
@media screen and (max-width: 767px) { .movie_page_menu { padding: 5vw; margin: 10vw 0 5vw; } }
.movie_page_menu h3 { font-size: 22px; border-bottom: 1px solid #005AB4; text-align: center; color: #005AB4; }
@media screen and (max-width: 767px) { .movie_page_menu h3 { font-size: 4.4vw; } }
.movie_page_menu .section__btn { margin-top: 1.0rem; }
.movie_page_menu .section__btn a { background-color: #41a5d7; }

.smile_flow { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 50px; }
@media screen and (min-width: 768px) { .smile_flow { width: 1240px; }
  .smile_flow.flow3 dl { width: 33.33333%; } }
.smile_flow dl { padding: 0 20px; position: relative; font-size: 14px; width: calc(100% / 4); }
@media screen and (max-width: 767px) { .smile_flow dl { width: 100%; padding: 20px 0; font-size: 3.6vw; display: flex; flex-wrap: wrap; gap: 2vw; } }
.smile_flow dl:first-child { padding-left: 0; }
@media screen and (max-width: 767px) { .smile_flow dl:first-child { padding-top: 0; } }
.smile_flow dl:last-child { padding-right: 0; }
@media screen and (max-width: 767px) { .smile_flow dl:last-child { padding-bottom: 0; } }
@media screen and (min-width: 768px) { .smile_flow dl:not(:last-child) { border-right: 1px dotted #005AB4; } }
@media screen and (max-width: 767px) { .smile_flow dl:not(:last-child) { border-bottom: 1px dotted #005AB4; } }
.smile_flow dl:not(:last-child)::after { content: ""; display: inline-block; width: 26px; height: 26px; background: url("/myepson/smileplusr/images/arrow_right.png") no-repeat center center; background-size: 26px 26px; position: absolute; }
@media screen and (min-width: 768px) { .smile_flow dl:not(:last-child)::after { top: 50%; right: -13px; transform: translateY(-50%); } }
@media screen and (max-width: 767px) { .smile_flow dl:not(:last-child)::after { bottom: -13px; left: 50%; transform: translateX(-50%) rotate(90deg); } }
.smile_flow dl dt { font-weight: bold; color: #005AB4; }
@media screen and (min-width: 768px) { .smile_flow dl dt { margin-bottom: 15px; } }
@media screen and (max-width: 767px) { .smile_flow dl dt { font-size: 4vw; order: 1; width: 100%; text-align: left !important; } }
.smile_flow dl dd { margin-bottom: 10px; text-align: justify; text-align: center; }
.smile_flow dl dd.img { min-height: 156px; }
@media screen and (max-width: 767px) { .smile_flow dl dd.img { min-height: inherit; order: 3; width: calc(40% - 1vw); } }
.smile_flow dl dd.text { text-align: left; }
@media screen and (max-width: 767px) { .smile_flow dl dd.text { width: calc(60% - 1vw); order: 2; }
  .smile_flow dl dd.text.textFull { width: 100%; } }

#smile_menu_02 .attention { border: 3px solid #e60012; border-radius: 8px; padding: 0px; margin: 45px auto 0; }
#smile_menu_02 .attention .title { background-color: #e60012; color: #FFF; font-size: 20px; margin-bottom: 0; padding: 5px 10px; }
@media screen and (max-width: 767px) { #smile_menu_02 .attention .title { font-size: 4.4vw; padding: 1vw 3vw; } }
#smile_menu_02 .attention p { padding: 15px; }
@media screen and (max-width: 767px) { #smile_menu_02 .attention p { padding: 3vw; } }

.attention { border: 3px solid #e60012; border-radius: 8px; margin-bottom: 40px; padding: 30px; box-sizing: border-box; }
@media screen and (max-width: 767px) { .attention { padding: 5vw; } }
.attention h4 { margin-bottom: 15px; color: #e60012; font-size: 22px; font-weight: bold; }
@media screen and (max-width: 767px) { .attention h4 { font-size: 4.4vw; margin-bottom: 3vw; } }
.attention ul li { line-height: 1.8; display: block; padding-left: 1em; }
.attention ul li::before { content: "●"; display: block; float: left; margin-left: -1em; width: 1em; text-align: center; color: #e60012; }

.close_btn a { display: inline-block; background-color: #EBEBEB; color: #333; font-size: 84%; padding: 3px 10px; }
.close_btn a:hover { text-decoration: none; opacity: .8; }
.close_btn a:before { content: "×"; margin-right: 5px; }

.mfp-close:focus { border: 2px solid #005AB4; }

.listCaution li { padding-left: 3em; position: relative; font-size: .8rem; line-height: 1.6; text-indent: -3em; }
@media screen and (max-width: 767px) { .listCaution li { font-size: 3vw; } }

.popupbox { background-color: #FFF; border-radius: 20px; padding: 20px; text-align: center; box-sizing: border-box; width: 460px; }
@media screen and (max-width: 767px) { .popupbox { width: 90%; } }

.mfp-hide { display: none !important; }
