/* CSS for PC @date     2018 @author   sarahchan */
/* ------------------------------------------

------------------------------------------ */
.sp { display: none !important; }

#keyVisual { width: 100%; margin-bottom: 0;}

#keyVisual h1 { text-indent: 0px; position: relative; }

#keyVisual h1 .main { background: #00B900; padding: 30px 0 30px 14%; font-size: 0; text-align: center; display: block; }

#keyVisual h1 .qr { background: #FFF5D4; font-size: 0; padding: 20px 0 20px 14%; text-align: center; display: block; }

#keyVisual .mobile { position: absolute; left: calc(50% - 300px); bottom: 0; }

#keyVisual .mobile img { display: block; width: 50%; }

#keyVisual .star .star1 { bottom: 20px; position: absolute; right: calc(50% - 8.5%); -webkit-animation: kira 2s infinite; animation: kira 2s infinite; }

#keyVisual .star .star2 { bottom: 100px; position: absolute; right: 50%; -webkit-animation: kira 2s infinite; animation: kira 2s infinite; }

#keyVisual .star .star3 { bottom: 70px; position: absolute; right: 52%; -webkit-animation: kira 2s infinite; animation: kira 2s infinite; width: 10px; }

@-webkit-keyframes kira { 0% { -webkit-transform: scale(1); transform: scale(1); }
  12.5% { -webkit-transform: scale(0.7); transform: scale(0.7); }
  25% { -webkit-transform: scale(1); transform: scale(1); }
  27.5% { -webkit-transform: scale(0.5); transform: scale(0.5); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.5); transform: scale(0.5); } }

@keyframes kira { 0% { -webkit-transform: scale(1); transform: scale(1); }
  12.5% { -webkit-transform: scale(0.7); transform: scale(0.7); }
  25% { -webkit-transform: scale(1); transform: scale(1); }
  27.5% { -webkit-transform: scale(0.5); transform: scale(0.5); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.5); transform: scale(0.5); } }

#widewrapper { width: 100%; }

.w1240 { width: 1024px; margin: 0 auto; }

h2.w1240 { font-size: 20px; padding: 20px 0; }

.greybg { background: #F3F3F3; }

.tokuten li { border-bottom: 1px solid #fff; padding: 60px 0 40px; position: relative; }

.tokuten li:last-child { border-bottom: none; }

.tokuten li p.icon { position: absolute; top: 20px; left: 0px; background: #FF8D44; border-radius: 40px; text-align: center; font-size: 16px; padding: 12px 17px 10px; width: 50px; color: #fff; font-weight: bold; }

.tokuten li p.icon span { font-size: 40px; display: block; }

.tokuten li p.dtl { display: flex; align-items: center; justify-content: space-between; padding-left: 200px; }

.tokuten li p.dtl span { width: 60%; font-weight: bold; font-size: 20px; }

p.friends { text-align: center; padding-top: 40px; font-weight: bold; font-size: 20px; }

p.friends img { display: block; margin: 10px auto 0; }

.mb10 { margin-bottom: 10px; }

.follow > li { position: relative; }

.follow > li > ul { padding: 60px 0 40px 200px; }

.follow > li > ul li:first-child { overflow: hidden; }

.follow > li > ul li:first-child img { float: left; }

.follow > li > ul li:first-child span:first-child { font-size: 16px; width: 478px; float: left; line-height: 150%; padding-right: 30px; }

.follow > li > ul li:first-child span:first-child b { font-size: 20px; font-weight: bold; display: block; padding-bottom: 10px; }

.follow > li > ul li:first-child span.id { display: block; background: #fff; border: 1px solid #00B900; padding: 20px 10px; float: left; text-align: center; line-height: 250%; font-size: 12px; }

.follow > li > ul li:first-child span.id b { font-weight: bold; color: #00B900; font-size: 20px; display: block; }

.follow > li > ul > li { padding: 20px 0 0; }

.follow > li > ul .steps > ul { display: flex; justify-content: space-between; width: 774px; }

.follow > li > ul .steps > ul li { width: 20%; font-size: 14px; }

.follow > li p.icon { position: absolute; top: 20px; left: 0px; background: #00B900; border-radius: 40px; text-align: center; font-size: 12px; padding: 12px 17px; width: auto; color: #fff; font-weight: bold; }

.follow > li p.icon span { font-size: 40px; display: block; }

p.msg { text-align: center; font-size: 14px; padding: 40px 0; line-height: 150%; }

.greenbg{ background: #c9f0c9; overflow: hidden;}

.entrybox{ padding-bottom: 48px; }
.entrybox h2{ text-align: center; margin-top: 32px;}
.entrybox .txt1{ display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 16px;}
.entrybox .txt1 dd{ font-size: 16px; line-height: 1.6; margin-top: 8px;}
.entrybox .txt1 dd small{ font-size: 12px;}
.entrybox .txt1 dt{ display: flex; justify-content: flex-start; gap: 8px;}
.entrybox .txt1 dt span{ display: inline-table; padding: 2px 6px; border: 1px solid #333; border-radius: 3px; font-size: 14px;}

/*popup-container*/
.kk_popup_trigger{display: table; font-size: 16px; padding: 10px 24px; background: #fff; border: 1px solid #333; border-radius: 4px; margin: 16px auto 0;}
.kk_popup_trigger:hover{ opacity: .7; text-decoration: none !important;}
.kk_popup_container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;}
.kk_popup_close_btn { z-index: 10000;  position: absolute; cursor: pointer; font-size: 0; height: 34px; width: 34px; border-radius: 50px; top: 2px; right: 2px; background: #333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAFVBMVEUAAAD///////////////////////9Iz20EAAAABnRSTlMAQF+foGCwwWJQAAAAg0lEQVR42u3VBQ6EQBTA0PH7H3njCzSkuP84vOISvtl34syVqeVxn1vCJlr7F/StYR+lW9AXLGVB7wU9C/Ms1LOglwJeC3gt4LWA1wJeC3gr4KVQz/vb8iyPwnwpUvD5QSEehXgU4lGoZ+GehXsW9Df+XkX5XvFjXLueRZ39Q/lm1/kBvUEF19SMEPsAAAAASUVORK5CYII=) center center no-repeat; background-size: 26px;scrollbar-color: rgba(0, 0, 0, 0.3) transparent;}
.kk_popup_body { width: 900px; height: 550px; background: #fff; border-radius: 15px; padding: 15px; overflow-y: scroll; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); position: relative; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.3) transparent; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow: overlay;}
.kk_popup_body dl{ overflow: hidden; line-height: 1.6;}
.kk_popup_body dl dt { color: #ffffff;font-weight: bold; text-align: center; font-size: 18px; margin-bottom: 10px; background: #00b900; padding: 5px 0px 3px; }
.kk_popup_body dl dd{ margin: 14px 0 0; font-size: 14px;}
.kk_popup_body dl dd b{display: block; font-size: 14px; padding-bottom: 8px; color: #00b900;}
.kk_popup_body dl.mob{ margin-top: 24px;}
.kk_popup_body dl.mob dt{ background: #ff008c;}
.kk_popup_body dl.mob dd b{ color: #ff008c;}

.kk_popup_body::-webkit-scrollbar { width: 5px; display: none;}
.kk_popup_body::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; }
.kk_popup_body::-webkit-scrollbar-track { background-color: transparent; }

.stepbox{ margin-top: 24px; display: flex; justify-content: center; gap: 30px;}
.stepbox li{ width: 426px; background: #fff url(../images/step1_v2.png) 20px 15px no-repeat; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;}
.stepbox li:nth-of-type(2){ background: #fff url(../images/step2_v2.png) 20px 15px no-repeat; }
.stepbox li p.txt{ font-size: 16px; margin-top: 30px; text-align: center; line-height: 1.5; }
.stepbox li p.txt b{ display: block; margin-bottom: 16px; font-size: 28px;}
.stepbox li p.photo{ line-height: 0;}
.stepbox li p.link a{ color: #0769B0 !important; }