@charset "UTF-8";
@media screen and (min-width: 768px) { .photoshindan .sp { display: none !important; }
  .photoshindan .pc { display: block; }
  a { transition: all 0.2s ease-in; } }
@media screen and (max-width: 767px) { .photoshindan .pc { display: none !important; }
  .photoshindan .sp { display: block; } }
#contents .headSection .innerBlock { width: 1240px; }


/* -----------------------------
** P-EVENT
** home
----------------------------- */
.photoshindan img { max-width: 100%; }
.photoshindan .iLink02 { padding-top: 0; }
.photoshindan span.line { background: linear-gradient(transparent 60%, #ffee37 60%); }

#mainArea *, .shindanContent * { box-sizing: border-box; }
#mainArea *:before, #mainArea *:after, .shindanContent *:before, .shindanContent *:after { box-sizing: border-box; }

.redLineBox { border: 5px solid #e83437; border-radius: 20px; max-width: 960px; margin: 0 auto; text-align: center; }
@media screen and (max-width: 767px) { .redLineBox { border-width: 3px; border-radius: 3vw; } }

.listCaution { text-align: left; font-size: 14px; }
.listCaution > li { position: relative; padding-left: 3em; line-height: 1.6; }
@media screen and (max-width: 767px) { .listCaution > li { line-height: 1.3; } }
.listCaution > li .listCaution_firstLetter { position: absolute; left: 0; top: 0.03em; }

.dotList { text-align: left; }
.dotList > li { position: relative; padding-left: 1em; text-indent: -1em; line-height: 1.6; }
@media screen and (max-width: 767px) { .dotList > li { line-height: 1.3; } }

#mainArea { background-color: #ffe71a; }
#mainArea .mainvisual { max-width: 1240px; margin: 0 auto; text-align: center; }
#mainArea .mainvisual img { margin: 0 auto; text-align: center; }
@media screen and (max-width: 767px) { #mainArea .mainvisual { max-width: inherit; } }

.cpSection { padding: 80px 0 60px 0; }
@media screen and (max-width: 767px) { .cpSection { padding: 10vw 0; } }
.cpSection.shindan { background: repeating-linear-gradient(-45deg, #fffade, #fffade 10px, #fff7d4 10px, #fff7d4 20px); padding: 0; }
@media screen and (max-width: 767px) { .cpSection.shindan { padding: 0 3vw; } }
.cpSection.shindan .cpSecInner { background-color: #fff4c7; background-image: url("/katsuyou/photo/premium/campaign/photoshindan/images/sec_bg.png"); background-position: center top; background-repeat: no-repeat; background-size: 100% auto; padding: 60px 0; }
@media screen and (max-width: 767px) { .cpSection.shindan .cpSecInner { padding: 7vw 3vw; } }
.cpSection.shindanResult .cpSecInner { padding-top: 100px; }
.cpSection.nxNeko .cpSecInner { padding-bottom: 100px; }
.cpSection#campaignArea { background-color: #faf9f6; }
.cpSection#campaignArea .campaignBadge { margin-top: 0; }
.cpSection#campaignArea .campaignBadge .listCaution { display: none; }
.cpSection .cpSecHead { margin: 0 auto 40px auto; text-align: center; }
@media screen and (max-width: 767px) { .cpSection .cpSecHead { margin-bottom: 5vw; } }
.cpSection .cpSecHead .cpSecTitle { position: relative; }
@media screen and (max-width: 767px) { .cpSection .cpSecHead .cpSecTitle { padding: 3vw 5vw; } }
.cpSection .cpSecHead .cpSecTitle:before { content: ""; width: 100%; height: 4px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; background-color: #333; }
.cpSection .cpSecHead .cpSecTitle span { font-size: 30px; display: inline-block; background-color: #FFF; position: relative; z-index: 1; padding: 0 30px; }
@media screen and (max-width: 767px) { .cpSection .cpSecHead .cpSecTitle span { font-size: 6vw; padding: 0 5vw; } }
.cpSection .cpSecInner { max-width: 1240px; margin: 0 auto; text-align: center; }
@media screen and (max-width: 767px) { .cpSection .cpSecInner { width: 100%; padding: 0 5vw; } }

.cpSecLead { font-size: 18px; text-align: center; }
@media screen and (max-width: 767px) { .cpSecLead { font-size: 4vw; margin-bottom: 3vw; } }

.callBlock .catch { font-weight: bold; font-size: 22px; margin-bottom: 20px; }
@media screen and (max-width: 767px) { .callBlock .catch { font-size: 4vw; margin-bottom: 5vw; } }
.callBlock .redLineBox { margin-top: 80px; position: relative; padding: 60px 30px 30px 30px; }
@media screen and (max-width: 767px) { .callBlock .redLineBox { margin-top: 12vw; padding: 10vw 5vw 5vw 5vw; } }

.call { position: absolute; top: -60px; left: 0; width: 100%; }
@media screen and (max-width: 767px) { .call { top: -10vw; } }
.call h2 { display: inline-block; position: relative; padding: 0 70px; color: #e83437; font-size: 32px; line-height: 1.4; background-color: #fff4c7; }
@media screen and (max-width: 767px) { .call h2 { font-size: 4.2vw; padding: 0 8vw; } }
.call h2::before, .call h2::after { content: ""; display: block; width: 53px; height: 60px; background: url("/katsuyou/photo/premium/campaign/photoshindan/images/call.png") no-repeat center top; background-size: 50px auto; position: absolute; bottom: 0; }
@media screen and (max-width: 767px) { .call h2::before, .call h2::after { width: 6vw; height: 6vw; background-size: 100% auto; bottom: 1vw; } }
.call h2::before { left: 10px; }
@media screen and (max-width: 767px) { .call h2::before { left: 1vw; } }
.call h2::after { right: 10px; transform: scale(-1, 1); }
@media screen and (max-width: 767px) { .call h2::after { right: 1vw; } }

.campaignBadge { background-color: #FFF; border-radius: 20px; width: max-content; margin: 20px auto 0 auto; padding: 20px 30px; text-align: center; }
@media screen and (max-width: 767px) { .campaignBadge { width: 100%; border-radius: 3vw; margin-top: 3vw; padding: 3vw; } }
.campaignBadge h3 { font-size: 20px; color: #e83437; }
@media screen and (max-width: 767px) { .campaignBadge h3 { font-size: 4vw; } }
.campaignBadge .dateBox { border: 3px solid #e83437; border-radius: 9999px; padding: 3px; display: flex; flex-wrap: wrap; font-weight: bold; width: max-content; gap: 10px; margin: 10px auto 0 auto; text-align: center; line-height: 1.2; }
@media screen and (max-width: 767px) { .campaignBadge .dateBox { width: 100%; flex-direction: column; border-radius: 3vw; } }
.campaignBadge .dateBox .dateTitle { background-color: #e83437; color: #FFF; font-size: 14px; border-radius: 9999px; padding: 0 10px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; }
@media screen and (max-width: 767px) { .campaignBadge .dateBox .dateTitle { border-radius: 2.2vw; padding: 1.5vw 3vw; line-height: 1; } }
.campaignBadge .dateBox .date { flex: 1; text-align: left; font-size: 14px; padding-right: 20px; color: #e83437; }
.campaignBadge .dateBox .date .num { font-size: 20px; }
@media screen and (max-width: 767px) { .campaignBadge .dateBox .date { text-align: center; padding-right: 0; font-size: 3.2vw; }
  .campaignBadge .dateBox .date .num { font-size: 5vw; } }

#btnArea { background-color: #e83437; padding: 30px 0; }
@media screen and (max-width: 767px) { #btnArea { padding: 5vw 0; } }
#btnArea .shindanBtn { position: relative; }
#btnArea a { display: inline-block; }
#btnArea a span { display: inline-block; background-color: #ffe71a; color: #333; font-size: 38px; font-weight: bold; padding: 20px; line-height: 1; border-radius: 9999px; box-shadow: 0px 5px 0px 0px black; position: relative; transition: all 0.1s ease-in; }
@media screen and (min-width: 768px) { #btnArea a span { min-width: 500px; } }
@media screen and (max-width: 767px) { #btnArea a span { width: 100%; font-size: 7vw; padding: 5vw 10vw 5vw 20vw; } }
#btnArea a:hover span { text-decoration: none; transform: translateY(5px); box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0); }
#btnArea a:hover .neko { transform: translateX(-270px) rotate(-5deg); }
#btnArea .neko { transition: all 0.1s ease-in; position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-270px); transform-origin: left bottom; }
@media screen and (max-width: 767px) { #btnArea .neko { transform: translateX(-46vw); width: 40vw; } }

.linkBtnPremium a { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 2.5em; background: #c30d24; border-radius: 9999px; font-size: 22px; font-weight: bold; color: #fff !important; text-decoration: none !important; text-align: center; transition: all 0.2s ease-in; box-sizing: border-box; }
@media screen and (min-width: 768px) { .linkBtnPremium a { min-height: 90px; min-width: 450px; } }
@media screen and (max-width: 767px) { .linkBtnPremium a { min-width: unset; width: 100%; padding: .4em 2em; min-height: auto; font-size: 3.6vw; } }
.linkBtnPremium a small { font-size: 16px; }
@media screen and (max-width: 767px) { .linkBtnPremium a small { font-size: 3.2vw; } }
.linkBtnPremium a:hover { opacity: .8; }
.linkBtnPremium a:after { position: absolute; content: ""; display: block; width: 10px; height: 10px; border-style: solid; border-width: 0 2px 2px 0; border-color: #fff; transform: rotate(-45deg); top: 50%; right: 20px; margin-top: -7px; }
@media screen and (max-width: 767px) { .linkBtnPremium a:after { right: 10px; } }
.linkBtnPremium.colBlk a { background-color: #333; }
.linkBtnPremium.disabled a { pointer-events: none; opacity: .25; }

.footerPnl { position: fixed; bottom: -130px; left: 0; width: 100%; background-color: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); z-index: 99; padding: 20px 0; transition: all 0.2s ease-in; box-sizing: border-box; }
@media screen and (max-width: 767px) { .footerPnl { padding: 3vw; bottom: -50vw; } }
.footerPnl.fixed { bottom: 0; }
.footerPnl .footerPnlInner { max-width: 960px; margin: 0 auto; text-align: center; }
.footerPnl .footerPnlWrap { display: flex; flex-wrap: wrap; gap: 50px; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap { flex-direction: column; gap: 3vw; } }
.footerPnl .footerPnlWrap li { width: calc(50% - 25px); display: flex; flex-wrap: wrap; justify-content: center; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap li { width: 100%; } }
.footerPnl .footerPnlWrap li > p { margin-bottom: 10px; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap li > p { margin-bottom: 1vw; font-size: 3.4vw; } }
.footerPnl .footerPnlWrap li .linkBtnPremium { width: 100%; display: flex; flex-wrap: wrap; }
.footerPnl .footerPnlWrap li .linkBtnPremium a { min-height: auto; padding: .4em 2.5em; width: 100%; min-width: 100%; font-size: 16px; }
.footerPnl .footerPnlWrap li .linkBtnPremium a small { font-size: 12px; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap li .linkBtnPremium a { font-size: 3.6vw; }
  .footerPnl .footerPnlWrap li .linkBtnPremium a small { font-size: 3.2vw; } }
@media screen and (min-width: 768px) { .footerPnl .footerPnlWrap li .linkBtnPremium a { height: 64px; }
  .footerPnl .footerPnlWrap li .linkBtnPremium a span.pc { display: inline-block; } }

#epsitePremium { padding-bottom: 0; }
#epsitePremium .cpSecLead { font-size: 17px; }

/* 診断フォーム */
.questionBlock { background-color: #FFF; border-radius: 20px; margin: 0 auto; text-align: center; max-width: 960px; padding: 80px 40px; min-height: 500px; overflow: hidden; position: relative; }
@media screen and (max-width: 767px) { .questionBlock { border-radius: 3vw; padding: 5vw; min-height: 110vw; } }
.questionBlock .qmark { position: absolute; top: 15px; left: 15px; }
@media screen and (max-width: 767px) { .questionBlock .qmark { top: 2vw; left: 2vw; } }
.questionBlock .qmark span { position: relative; color: #FFF; font-size: 58px; font-weight: bold; line-height: 1; }
@media screen and (max-width: 767px) { .questionBlock .qmark span { font-size: 7vw; } }
.questionBlock .qmark::before { content: ""; width: 140px; height: 140px; border-radius: 100%; background-color: #ff6400; position: absolute; top: -50px; left: -50px; }
@media screen and (max-width: 767px) { .questionBlock .qmark::before { width: 20vw; height: 20vw; top: -7vw; left: -7vw; } }

.questionBox { display: none; position: absolute; top: 80px; left: 40px; width: calc(100% - 80px); }
@media screen and (max-width: 767px) { .questionBox { top: 15vw; left: 5vw; width: calc(100% - 10vw); } }
.questionBox#a1 { display: block; }
.questionBox .questionTitle { font-size: 24px; font-weight: bold; text-align: center; position: relative; padding-bottom: 20px; }
@media screen and (max-width: 767px) { .questionBox .questionTitle { font-size: 4.6vw; height: 20vw; } }
.questionBox .questionTitle::after { content: ""; width: 50px; height: 3px; background-color: #ff6400; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.questionBox button { border: 0; outline: 0; cursor: pointer; transition: all 0.2s ease-in; }

.selectBox { margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 70px; }
@media screen and (max-width: 767px) { .selectBox { margin-top: 10vw; padding: 0 5vw; flex-direction: column; gap: 5vw; } }
.selectBox button.select { border-radius: 9999px; font-size: 38px; color: #FFF; width: 320px; padding: 15px; line-height: 1; }
@media screen and (max-width: 767px) { .selectBox button.select { width: 100%; font-size: 7vw; padding: 3vw; } }
.selectBox button.select.yes { background-color: #e83437; }
.selectBox button.select.no { background-color: #109cda; }
.selectBox button.select.is-disable { background-color: #EEE; }
.selectBox button.select:hover { opacity: .8; }

.btnBox { margin-top: 80px; }
@media screen and (max-width: 767px) { .btnBox { margin-top: 10vw; } }
.btnBox button.nextBtn { border-radius: 9999px; background-color: #FFF; border: 3px solid #CCC; color: #CCC; font-size: 24px; font-weight: bold; padding: 5px 30px; pointer-events: none; }
@media screen and (max-width: 767px) { .btnBox button.nextBtn { font-size: 5vw; }
  .btnBox button.nextBtn.to-result { font-size: 4.4vw; } }
.btnBox button.nextBtn.is-active { border-color: #ff6400; color: #ff6400; pointer-events: auto; }
.btnBox button.nextBtn.is-active:hover { background-color: #ff6400; color: #FFF; }
.btnBox .backBtn { border-radius: 9999px; background-color: #FFF; border: 3px solid #ff6400; color: #ff6400; font-size: 14px; font-weight: bold; padding: 5px 15px; }
@media screen and (max-width: 767px) { .btnBox .backBtn { font-size: 3.2vw; padding: 1.5vw 3vw; line-height: 1; } }
.btnBox .backBtn:hover { background-color: #ff6400; color: #FFF; text-decoration: none; }

.resultBlock { border-width: 5px; border-style: solid; border-radius: 20px; border-color: currentColor; max-width: 960px; margin: 0 auto; text-align: center; background-color: #FFF; box-shadow: 3.597px 3.473px 10px 0px rgba(0, 0, 0, 0.15); padding: 60px 30px 30px 30px; position: relative; }
@media screen and (max-width: 767px) { .resultBlock { border-width: 3px; border-radius: 3vw; padding: 15vw 5vw 5vw 5vw; }
  .resultBlock > p { font-size: 3.6vw; text-align: left; } }
.resultBlock h2 { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); }
@media screen and (max-width: 767px) { .resultBlock h2 { top: -13vw; width: 70%; } }
.resultBlock h3 { background-color: currentColor; color: #FFF; margin: 30px 0 15px; padding: 10px; font-size: 18px; line-height: 1; }
@media screen and (max-width: 767px) { .resultBlock h3 { font-size: 4vw; padding: 1.5vw; margin: 5vw 0 3vw; } }
.resultBlock .movieList { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
@media screen and (max-width: 767px) { .resultBlock .movieList { flex-direction: column; } }
.resultBlock .movieList li { width: calc(50% - 20px); }
@media screen and (max-width: 767px) { .resultBlock .movieList li { width: 100%; } }
.resultBlock .movieList li img { width: 100%; height: auto; }
.resultBlock .movieList li h4 { color: #e83437; margin-bottom: 10px; font-size: 20px; }
@media screen and (max-width: 767px) { .resultBlock .movieList li h4 { font-size: 4vw; } }
.resultBlock .movieList li p { text-align: left; font-size: 16px; }
@media screen and (max-width: 767px) { .resultBlock .movieList li p { font-size: 3.4vw; } }
.resultBlock .movieList li .popup-youtube { display: block; position: relative; }
.resultBlock .movieList li .popup-youtube::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ""; display: block; width: 60px; height: 42px; background: url("/katsuyou/photo/premium/campaign/photoshindan/images/icn_youtube.png") no-repeat; background-size: 60px 42px; }
.resultBlock .neko { margin: 30px auto 0 auto; text-align: center; }
@media screen and (max-width: 767px) { .resultBlock .neko { margin-top: 5vw; } }
.resultBlock .btnBox { position: absolute; top: 20px; right: 20px; margin: 0; }
@media screen and (max-width: 767px) { .resultBlock .btnBox { top: 8vw; right: 3vw; } }
.resultBlock.result1 { border-color: #e83437; }
.resultBlock.result1 h3 { background-color: #e83437; }
.resultBlock.result2 { border-color: #ff6400; }
.resultBlock.result2 h3 { background-color: #ff6400; }
.resultBlock.result3 { border-color: #268c84; }
.resultBlock.result3 h3 { background-color: #268c84; }
.resultBlock.result4 { border-color: #0484bb; }
.resultBlock.result4 h3 { background-color: #0484bb; }
.resultBlock.result5 { border-color: #92509c; }
.resultBlock.result5 h3 { background-color: #92509c; }

.otherCourse { max-width: 960px; margin: 60px auto 0 auto; text-align: center; }
@media screen and (max-width: 767px) { .otherCourse { margin-top: 7vw; } }
.otherCourse ul { display: flex; flex-wrap: wrap; gap: 20px; }
@media screen and (max-width: 767px) { .otherCourse ul { gap: 5vw; justify-content: center; } }
.otherCourse ul li { width: calc(calc(100% - 40px) /3); }
@media screen and (max-width: 767px) { .otherCourse ul li { width: calc(calc(100% - 5vw) /2); } }
.otherCourse ul li a:hover { opacity: .75; }
@media screen and (min-width: 768px) { .otherCourse.col4 ul { gap: 10px; }
  .otherCourse.col4 ul li { width: calc(calc(100% - 30px) /4); } }

.campaignBox { border-radius: 20px; max-width: 960px; margin: 60px auto 0 auto; text-align: center; background-color: #fefbe7; box-shadow: 3.597px 3.473px 10px 0px rgba(0, 0, 0, 0.15); padding: 60px 30px 30px 30px; position: relative; }
@media screen and (max-width: 767px) { .campaignBox { border-radius: 3vw; margin-top: 10vw; padding: 10vw 3vw 3vw 3vw; } }
.campaignBox .ribbon { position: absolute; top: 20px; left: -10px; height: 40px; line-height: 25px; background-color: #9b8450; color: #FFF; font-size: 20px; font-weight: bold; text-align: center; display: flex; align-items: center; padding: 0 20px; }
@media screen and (max-width: 767px) { .campaignBox .ribbon { font-size: 4vw; height: 8vw; } }
.campaignBox .ribbon::before, .campaignBox .ribbon::after { content: ''; position: absolute; width: 0px; height: 0px; }
.campaignBox .ribbon::before { top: 100%; left: 0; border: none; border-bottom: 10px solid transparent; border-right: 10px solid #333; }
.campaignBox .ribbon::after { top: 0px; right: 0; border-width: 20px 10px 20px 0px; border-color: transparent #fefbe7; border-style: solid; }
.campaignBox h2 { text-align: left; color: #e83437; font-size: 32px; line-height: 1.3; margin-top: 20px; }
@media screen and (max-width: 767px) { .campaignBox h2 { font-size: 5.2vw; } }
.campaignBox .detail { text-align: left; display: flex; flex-wrap: wrap; margin: 15px 0; gap: 10px; }
@media screen and (max-width: 767px) { .campaignBox .detail { flex-direction: column; align-items: center; } }
.campaignBox .detail .img { width: 175px; }
.campaignBox .detail .img img { margin: 0 auto; display: block; }
.campaignBox .detail .text { width: calc(100% - 185px); font-size: 16px; }
@media screen and (max-width: 767px) { .campaignBox .detail .text { width: 100%; font-size: 3.6vw; } }
.campaignBox .tblMod01 { background-color: #FFF; }
.campaignBox .tblMod01 th { width: 25%; }
@media screen and (max-width: 767px) { .campaignBox .tblMod01 th { display: block; width: 100%; padding: 2vw 3vw; } }
.campaignBox .tblMod01 td { width: 75%; }
@media screen and (max-width: 767px) { .campaignBox .tblMod01 td { display: block; width: 100%; padding: 2vw 3vw; } }
@media screen and (min-width: 768px) { .campaignBox.premiumBox .magimg { position: absolute; top: 0; right: 0; border-radius: 0 20px 0 0; overflow: hidden; padding: 5px 10px 0 0; }
  .campaignBox.premiumBox .magimg::before { content: ""; width: 360px; height: 360px; border-radius: 100%; background-color: #fff4c7; position: absolute; bottom: 0; left: 50px; } }
@media screen and (max-width: 767px) { .campaignBox.premiumBox .magimg { width: 75%; margin: 5vw auto 3vw; text-align: center; padding-right: 5vw; } }
.campaignBox.premiumBox .magimg img { position: relative; z-index: 1; }
.campaignBox.premiumBox .detail { max-width: 620px; }
.campaignBox.myEpsonBox { display: none; }
.campaignBox.myEpsonBox.hasprm { display: block; }
.campaignBox.myEpsonBox .ribbon { background-color: #347a79; }

#footer #pagetopBlock { transition: all 0.2s ease-in; }
@media screen and (max-width: 767px) { #footer #pagetopBlock.withft { bottom: 35vw !important; } }

.movie-wrap { position: relative; line-height: 0; margin: 0 auto; text-align: center; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; }
.movie-wrap iframe { width: 100%; height: 100%; }
.movie-wrap .mfp-close { top: -40px; color: #FFF; }