@charset "UTF-8";

#contents.ver2 { box-sizing: border-box; }

#contents.ver2 > .inner { padding: 15px 15px 0; }

#contents.ver2 .list-tag { display: flex; justify-content: center; align-items: center; gap: 10px; }

#contents.ver2 .list-tag > li { font-size: clamp(14px, 3.58vw, 20px); border-radius: 2.5px; background: #DCF1FF; padding: 2px 5px; min-width: 6em; text-align: center; }

#contents.ver2 .txt-result { margin-top: 5px; font-size: clamp(14px, 3.58vw, 24px); font-weight: 700; line-height: 1.5; }

#contents.ver2 .list-presents { margin-top: 20px; }

#contents.ver2 .list-presents > li { border-radius: 10px; border: 1px solid #D4D4D4; padding: 10px; position: relative; }

#contents.ver2 .list-presents > li + li { margin-top: 30px; }

#contents.ver2 .list-presents .txt-tag { position: absolute; right: 10px; top: 10px; font-size: clamp(12px, 3.07vw, 18px); border-radius: 2.5px; background: #DCF1FF; padding: 2px 5px; min-width: 6em; text-align: center; }

#contents.ver2 .list-presents .txt-congrats { text-align: center; font-size: clamp(11px, 2.82vw, 18px); line-height: 1.5; font-weight: 700; display: flex; justify-content: center; align-items: center; margin-top: 15px; }

#contents.ver2 .list-presents .txt-congrats::before { content: ""; display: block; width: 16px; height: 16px; margin-right: 5px; background: transparent url(/common_v2/images/share/infoicon.webp) no-repeat center center; background-size: contain; -webkit-filter: brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(4999%) hue-rotate(205deg) brightness(82%) contrast(83%); filter: brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(4999%) hue-rotate(205deg) brightness(82%) contrast(83%); }

#contents.ver2 .list-presents .txt-congrats + .list-btn { margin-top: 0; }

#contents.ver2 .list-presents .txt-congrats + .list-btn a, #contents.ver2 .list-presents .txt-congrats + .list-btn button { max-width: 74.5% !important; }

#contents.ver2 .list-presents .wrap-preent-deitail { display: flex; align-items: flex-start; }

#contents.ver2 .list-presents .wrap-preent-deitail .wrap-img { width: 32vw; aspect-ratio: 43 / 28; position: relative; overflow: hidden; }

#contents.ver2 .list-presents .wrap-preent-deitail .wrap-img img { position: absolute; top: 0; bottom: 0; height: 100%; width: auto; object-fit: contain; }

#contents.ver2 .list-presents .wrap-preent-deitail .wrap-txt { width: calc(100% - 32vw); padding-left: 15px; position: relative; }

#contents.ver2 .list-presents .wrap-preent-deitail .wrap-txt:has(.txt-btn) { padding-right: 9em; }

#contents.ver2 .list-presents .wrap-preent-deitail .wrap-txt:not(:has(.txt-btn)) .card-date { padding-right: 6em; }

#contents.ver2 .list-presents .wrap-preent-deitail .card-date { color: #16549F; font-size: clamp(12px, 3.07vw, 20px); word-wrap: break-word; }

#contents.ver2 .list-presents .wrap-preent-deitail .card-date span { font-size: clamp(14px, 3.58vw, 24px); }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name { margin-top: 10px; font-size: clamp(14px, 3.58vw, 20px); }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl { display: flex; position: relative; }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.bronze:before, #contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.silver:before, #contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.gold:before, #contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.platinum:before, #contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.diamond:before { content: ""; width: clamp(12px, 3.07vw, 16px); height: clamp(16px, 4.1vw, 22px); background: transparent no-repeat center center; background-size: contain; margin-right: 3px; margin-top: 0.3em; flex-shrink: 0; }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.bronze:before { background-image: url(/common/images/share/rankicon-bronze.png); }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.silver:before { background-image: url(/common/images/share/rankicon-silver.png); }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.gold:before { background-image: url(/common/images/share/rankicon-gold.png); }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.platinum:before { background-image: url(/common/images/share/rankicon-platinum.png); }

#contents.ver2 .list-presents .wrap-preent-deitail .card-name .card-point-dtl.diamond:before { background-image: url(/common/images/share/rankicon-diamond.png); }

#contents.ver2 .list-presents .wrap-preent-deitail .txt-btn { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#contents.ver2 .list-presents .wrap-preent-deitail .txt-btn button, #contents.ver2 .list-presents .wrap-preent-deitail .txt-btn a { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-decoration: none; border: none; outline: none; color: #16549F; background: none; margin: 0; padding: 0; font-size: clamp(14px, 3.58vw, 20px); font-style: normal; font-weight: 500; line-height: 1.5; cursor: pointer; padding-right: 13px; }

#contents.ver2 .list-presents .wrap-preent-deitail .txt-btn button::after, #contents.ver2 .list-presents .wrap-preent-deitail .txt-btn a::after { content: ""; display: block; width: 6px; height: 12px; right: 0; top: 50%; position: absolute; background: url(/common_v2/images/share/arrow-icon.svg) no-repeat; background-size: contain; -webkit-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%); }

#contents.ver2 .list-presents .wrap-preent-deitail + .list-btn { margin-top: 15px; }

#contents.ver2 .list-presents .wrap-preent-deitail + .list-btn a, #contents.ver2 .list-presents .wrap-preent-deitail + .list-btn button { max-width: 74.5%; }

#contents.ver2 .list-presents + .list-btn { margin-top: 36px; }

#contents.ver2 .wrap-select-present { margin-top: 20px; }

#contents.ver2 .wrap-select-present .txt-select { font-size: clamp(14px, 3.58vw, 20px); font-weight: 700; line-height: 1.5; color: #16549F; }

#contents.ver2 .wrap-select-present .list-btn a, #contents.ver2 .wrap-select-present .list-btn button { max-width: 100% !important; }

#contents.ver2 .list-select-present > li { margin-top: 10px; border-radius: 5px; background: #F3F7F9; padding: 10px; display: flex; justify-content: space-between; align-items: center; }

#contents.ver2 .list-select-present .list-btn { margin-top: 0 !important; white-space: nowrap; max-width: 100%; }

#contents.ver2 .list-select-present .list-btn a, #contents.ver2 .list-select-present .list-btn button { margin: 0; max-width: 100%; text-align: center; font-size: clamp(10px, 2.56vw, 16px); font-weight: 500; line-height: 150%; padding: 4px 20px 4px 10px; }

#contents.ver2 .list-select-present .list-btn a::after, #contents.ver2 .list-select-present .list-btn button::after { content: ""; display: block; width: 6px; height: 10px; right: 8px; top: 50%; }

#contents.ver2 .list-select-present .wrap-preent-deitail { display: flex; align-items: center; }

#contents.ver2 .list-select-present .wrap-preent-deitail .wrap-img { width: 12.8vw; aspect-ratio: 1; position: relative; overflow: hidden; }

#contents.ver2 .list-select-present .wrap-preent-deitail .wrap-img img { position: absolute; top: 0; bottom: 0; height: 100%; width: auto; object-fit: cover; }

#contents.ver2 .list-select-present .wrap-preent-deitail .wrap-txt { font-size: clamp(12px, 3.07vw, 18px); width: calc(100% - 12.8vw); padding: 0 10px; min-height: 10vw; line-height: 1.5; }

#contents.ver2 .list-select-present .wrap-preent-deitail .wrap-txt .txt-add { display: block; font-size: clamp(10px, 2.56vw, 14px); margin-top: 3px; font-weight: 400; }

.list-btn { margin-top: 20px; }

.list-btn > li { margin-top: 10px; }

.list-btn a, .list-btn button { display: block; width: 100%; margin: auto; max-width: 90%; border: 1px solid; border-radius: 30px; text-align: center; padding: 10px 25px 10px 15px; font-size: clamp(14px, 3.58vw, 20px); font-weight: 700; position: relative; outline: none; cursor: pointer; line-height: 1.5; }

.list-btn a:after, .list-btn button:after { content: ""; display: block; width: 8px; height: 14px; right: 18px; top: 50%; position: absolute; background: url(/common_v2/images/share/arrow-icon.svg) no-repeat; background-size: contain; -webkit-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%); }

.list-btn a.btn1, .list-btn button.btn1 { border-color: #16549F; color: #16549F; background-color: #fff; }

.list-btn a.btn2, .list-btn button.btn2 { border-color: #16549F; background-color: #16549F; color: #fff; }

.list-btn a.btn2:after, .list-btn button.btn2:after { -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5877%) hue-rotate(340deg) brightness(109%) contrast(100%); filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5877%) hue-rotate(340deg) brightness(109%) contrast(100%); }

.list-btn a.btn3, .list-btn button.btn3 { border-color: #F70; background-color: #F70; color: #fff; }

.list-btn a.btn3:after, .list-btn button.btn3:after { -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5877%) hue-rotate(340deg) brightness(109%) contrast(100%); filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5877%) hue-rotate(340deg) brightness(109%) contrast(100%); }

.list-btn a.disabled, .list-btn a:disabled, .list-btn button.disabled, .list-btn button:disabled { border-color: #E8E8E8 !important; background-color: #E8E8E8 !important; color: #9E9E9E !important; pointer-events: none; }

.list-btn a.disabled:after, .list-btn a:disabled:after, .list-btn button.disabled:after, .list-btn button:disabled:after { display: none !important; }

#contents.ver2.empty { display: flex; height: 100%; align-items: center; justify-content: center; position: relative; }

#contents.ver2.empty > .inner { text-align: center; padding: 0; width: 100%; padding: 15px; }

#contents.ver2.empty > .inner .wrap-ttl { position: absolute; top: 60px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

#contents.ver2.empty .txt-st { font-size: clamp(14px, 3.58vw, 24px); font-weight: 500; }

#contents.ver2.empty .txt-st em { font-weight: 700; font-style: normal; }

#contents.ver2.empty .txt-st + .txt-st { margin-top: 5px; }

.wrap-modal-normal { width: 100%; max-width: 980px; height: 100vh; height: 100svh; height: 100dvh; max-height: 100vh; max-height: 100svh; max-height: 100dvh; display: flex; flex-direction: column; }

.wrap-modal-normal .wrap-presents-img { margin-top: 15px; }

.wrap-modal-normal .wrap-presents-img .wrap-img { margin: 0; }

.wrap-modal-normal .wrap-presents-img .wrap-img img { object-fit: contain; }

.wrap-modal-normal .txt-hdg1 { line-height: 1.75; font-size: clamp(18px, 4.61vw, 30px); font-weight: 700; margin-top: 0; }

.wrap-modal-normal .txt-st { line-height: 2; font-size: clamp(14px, 3.58vw, 20px); font-weight: 400; margin-top: 15px; }

.wrap-modal-normal .txt-attend { line-height: 1.75; font-size: clamp(12px, 3.07vw, 14px); font-weight: 400; margin-top: 10px; }

.wrap-modal-normal .txt-hdg2 { display: flex; align-items: center; font-size: clamp(18px, 4.61vw, 30px); margin-top: 30px; font-weight: 700; line-height: 1.5; position: relative; padding-left: 16px; }

.wrap-modal-normal .txt-hdg2::before { content: ""; display: block; border-radius: 20px; background: #41A5E4; width: 6px; position: absolute; top: 3px; bottom: 3px; left: 0; }

.wrap-modal-normal .list-present-pt-modal > li { margin-top: 15px; border-radius: 5px; background: #F3F7F9; padding: 10px; display: block; }

.wrap-modal-normal .list-present-pt-modal > li .hdg { color: #000; font-family: "Noto Sans JP"; font-size: clamp(14px, 3.58vw, 20px); font-weight: 700; line-height: 2; }

.wrap-modal-normal .list-present-pt-modal > li dl { margin-top: 10px; }

.wrap-modal-normal .list-present-pt-modal > li dl dt { display: flex; }

.wrap-modal-normal .list-present-pt-modal > li dl dt span { color: #FFF; font-size: clamp(12px, 3.07vw, 16px); font-weight: 500; line-height: 1.2; background-color: #16549F; border-radius: 3px; padding: 2px 6px; }

.wrap-modal-normal .list-present-pt-modal > li dl dd { margin-top: 5px; color: #000; font-size: clamp(12px, 3.07vw, 16px); font-weight: 400; line-height: 2; }

.wrap-modal-normal .wrap-head { border-radius: 0; background: #fff; text-align: center; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 50px; border-bottom: 1px solid #D4D4D4; position: relative; }

.wrap-modal-normal .wrap-head .hdg { color: #16549F; text-align: center; font-size: clamp(16px, 4.1vw, 24px); font-weight: 700; line-height: 1.4; }

.wrap-modal-normal .wrap-head .modal__popup--close { position: absolute; left: 0; top: 0; width: 50px; height: 100%; background: transparent url(/common_v2/images/share/iconclose.webp) no-repeat center center; background-size: 14px 14px; font-size: 0; line-height: 0; }

.wrap-modal-normal .wrap-head .modal__popup--close::before, .wrap-modal-normal .wrap-head .modal__popup--close::after { display: none; }

.wrap-modal-normal .wrap-body { overflow: scroll; flex-grow: 1; background: #fff; padding: 15px; outline: none; }

.wrap-modal-normal .wrap-body .hdg { color: #16549F; text-align: center; font-size: clamp(16px, 4.1vw, 24px); font-weight: 700; line-height: 1.4; margin-bottom: 16px; }

.wrap-modal-normal .wrap-foot { border-radius: 0; background: #fff; text-align: center; padding: 15px 45px 30px; }

.wrap-modal-normal .wrap-foot .list-btn a, .wrap-modal-normal .wrap-foot .list-btn button { display: block; width: 100%; margin: auto; max-width: 100%; border-radius: 30px; text-align: center; padding: 10px 25px 10px 15px !important; font-size: clamp(16px, 4.1vw, 24px) !important; font-weight: 700; position: relative; outline: none; cursor: pointer; line-height: 1.5; }

.wrap-modal-normal .wrap-foot .list-btn a:after, .wrap-modal-normal .wrap-foot .list-btn button:after { width: 8px !important; height: 14px !important; right: 18px !important; }

.wrap-modal-normal.ver-present-all { width: calc(36000% / 390); max-width: 700px; max-height: 800px; max-height: calc(90vh - 85px); display: flex; flex-direction: column; }

.wrap-modal-normal.ver-present-all .btn-normal { display: block; width: 100%; max-width: 300px; margin: auto; background-color: #fff; border-radius: 30px; padding: 10px 10px 8px; border: 1px solid #16549F; color: #16549F; text-align: center; font-size: clamp(12px, 3.07vw, 20px); font-weight: 700; line-height: 1.5; cursor: pointer; }

.wrap-modal-normal.ver-present-all .wrap-presents { display: block; margin: 0; }

.wrap-modal-normal.ver-present-all .wrap-presents .wrap-img-present { position: relative; margin: 0; display: block; }

.wrap-modal-normal.ver-present-all .wrap-presents .wrap-img-present img { position: relative; width: 100%; height: auto; }

.wrap-modal-normal.ver-present-all .txt-st, .wrap-modal-normal.ver-present-all .list-normal > li { line-height: 1.75; font-size: clamp(14px, 3.58vw, 20px); font-weight: 400; }

.wrap-modal-normal.ver-present-all .txt-st em, .wrap-modal-normal.ver-present-all .list-normal > li em { font-style: normal; font-weight: 700; }

.wrap-modal-normal.ver-present-all .txt-st { margin-top: 20px; }

.wrap-modal-normal.ver-present-all .list-normal > li { margin-top: 5px; padding-left: 10px; position: relative; }

.wrap-modal-normal.ver-present-all .list-normal > li:before { content: ""; display: block; width: 3px; height: 3px; background-color: #000; border-radius: 50%; position: absolute; left: 0; top: 0.8em; }

.wrap-modal-normal.ver-present-all .wrap-attend { background-color: #F7F7F7; border-radius: 5px; padding: 15px; margin-bottom: 30px; }

.wrap-modal-normal.ver-present-all .wrap-attend .txt-st { color: #16549F; font-size: clamp(14px, 3.58vw, 20px); font-weight: 700; line-height: 1.5; margin: 0; }

.wrap-modal-normal.ver-present-all .wrap-attend .txt-st u { text-decoration: underline; color: #16549F; }

.wrap-modal-normal.ver-present-all .wrap-head { border-radius: 10px 10px 0 0; background: #16549F; text-align: center; padding: 15px 10px; }

.wrap-modal-normal.ver-present-all .wrap-head .hdg { color: #FFF; text-align: center; font-size: clamp(14px, 3.58vw, 24px); font-weight: 700; line-height: 1.4; }

.wrap-modal-normal.ver-present-all .wrap-head .add { font-size: clamp(24px, 4.1vw, 36px); font-weight: 600; }

.wrap-modal-normal.ver-present-all .wrap-body { overflow: scroll; flex-grow: 1; background: #fff; padding: 20px 20px 10px; outline: none; }

.wrap-modal-normal.ver-present-all .wrap-foot { border-radius: 0 0 10px 10px; background: #fff; text-align: center; padding: 10px 30px 15px; }

@media screen and (min-width: 768px) { #contents.ver2 > .inner { padding: 20px 140px 0; } #contents.ver2 .list-tag { gap: 15px; }
  #contents.ver2 .list-tag > li { border-radius: 5px; padding: 5px; min-width: 7em; } #contents.ver2 .txt-result { margin-top: 15px; } #contents.ver2 .list-presents { margin-top: 30px; }
  #contents.ver2 .list-presents > li { padding: 20px; }
  #contents.ver2 .list-presents .txt-tag { right: 20px; top: 20px; border-radius: 5px; padding: 3px 5px; min-width: 6em; }
  #contents.ver2 .list-presents .txt-congrats { margin-top: 20px; }
  #contents.ver2 .list-presents .txt-congrats::before { width: 24px; height: 24px; }
  #contents.ver2 .list-presents .txt-congrats + .list-btn { margin-top: 0; }
  #contents.ver2 .list-presents .txt-congrats + .list-btn > li { margin-top: 10px; }
  #contents.ver2 .list-presents .txt-congrats + .list-btn a, #contents.ver2 .list-presents .txt-congrats + .list-btn button { max-width: 360px !important; }
  #contents.ver2 .list-presents .wrap-preent-deitail { display: flex; align-items: center; }
  #contents.ver2 .list-presents .wrap-preent-deitail .wrap-img { width: 215px; }
  #contents.ver2 .list-presents .wrap-preent-deitail .wrap-txt { width: calc(100% - 215px); padding-left: 20px; }
  #contents.ver2 .list-presents .wrap-preent-deitail .wrap-txt:has(.txt-btn) { padding-right: 11em; }
  #contents.ver2 .list-presents .wrap-preent-deitail .wrap-txt:not(:has(.txt-btn)) .card-date { padding-right: 6em; }
  #contents.ver2 .list-presents .wrap-preent-deitail .txt-btn button, #contents.ver2 .list-presents .wrap-preent-deitail .txt-btn a { padding-right: 21px; }
  #contents.ver2 .list-presents .wrap-preent-deitail .txt-btn button::after, #contents.ver2 .list-presents .wrap-preent-deitail .txt-btn a::after { width: 8px; height: 14px; }
  #contents.ver2 .list-presents .wrap-preent-deitail + .list-btn { margin-top: 0; }
  #contents.ver2 .list-presents .wrap-preent-deitail + .list-btn > li { margin-top: 20px; }
  #contents.ver2 .list-presents .wrap-preent-deitail + .list-btn a, #contents.ver2 .list-presents .wrap-preent-deitail + .list-btn button { max-width: 360px; }
  #contents.ver2 .list-presents + .list-btn { margin-top: 70px; } #contents.ver2 .wrap-select-present { margin-top: 20px; } #contents.ver2 .list-select-present .list-btn a, #contents.ver2 .list-select-present .list-btn button { padding: 5px 40px 5px 20px; }
  #contents.ver2 .list-select-present .list-btn a::after, #contents.ver2 .list-select-present .list-btn button::after { width: 8px; height: 12px; right: 20px; }
  #contents.ver2 .list-select-present .wrap-preent-deitail { width: calc(100% - 160px); }
  #contents.ver2 .list-select-present .wrap-preent-deitail .wrap-img { width: 70px; }
  #contents.ver2 .list-select-present .wrap-preent-deitail .wrap-txt { width: 100%; padding: 0 0 0 15px; min-height: 1em; } .list-btn { margin-top: 30px; }
  .list-btn > li { margin-top: 30px; }
  .list-btn a, .list-btn button { max-width: 500px; border-radius: 76px; padding: 15px 50px 15px 50px; }
  .list-btn a:after, .list-btn button:after { width: 12px; height: 18px; right: 22px; } #contents.ver2.empty > .inner .wrap-ttl { top: 90px; } }

@media print, all and (min-width: 768px) { .wrap-modal-normal .wrap-presents-img { margin-top: 30px; }
  .wrap-modal-normal .wrap-presents-img .wrap-img { margin: 0; }
  .wrap-modal-normal .wrap-presents-img .wrap-img img { object-fit: contain; width: 100%; }
  .wrap-modal-normal .txt-st { margin-top: 30px; }
  .wrap-modal-normal .txt-hdg2 { margin-top: 50px; padding-left: 32px; }
  .wrap-modal-normal .txt-hdg2::before { border-radius: 50px; width: 12px; }
  .wrap-modal-normal .list-present-pt-modal > li { margin-top: 30px; padding: 15px; }
  .wrap-modal-normal .list-present-pt-modal > li dl dt span { padding: 2px 12px 4px; }
  .wrap-modal-normal .list-present-pt-modal > li dl dd { margin-top: 5px; color: #000; font-size: clamp(12px, 3.07vw, 16px); font-weight: 400; line-height: 2; }
  .wrap-modal-normal .wrap-head { min-height: 70px; }
  .wrap-modal-normal .wrap-head .modal__popup--close { width: 70px; background-size: 24px 24px; }
  .wrap-modal-normal .wrap-body { padding: 50px 140px 25px; }
  .wrap-modal-normal .wrap-body .hdg { margin-bottom: 30px; }
  .wrap-modal-normal .wrap-foot { padding: 25px 240px 50px; }
  .wrap-modal-normal .wrap-foot .list-btn a, .wrap-modal-normal .wrap-foot .list-btn button { padding: 20px 50px 20px 30px !important; border-radius: 75px; }
  .wrap-modal-normal .wrap-foot .list-btn a:after, .wrap-modal-normal .wrap-foot .list-btn button:after { width: 12px !important; height: 20px !important; right: 24px !important; } }