.modal{position:fixed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:2000;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;opacity:0;pointer-events:none;-webkit-transition:opacity 0.4s ease, visibility 0.4s ease;transition:opacity 0.4s ease, visibility 0.4s ease}.modal:not(.is-show){display:none}.modal.is-open{pointer-events:auto;opacity:1}@media screen and (min-width: 768px){.modal{padding:20px}}.modal .box{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;color:inherit;background-color:#fff;margin:auto;max-width:920px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-decoration:none}@media screen and (max-width: 767px){.modal .box{min-height:100%}}.modal .box:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(164,53,240,0.1)}.modal .box.sale:after{content:"";position:absolute;top:0}@media screen and (min-width: 768px){.modal .box.sale:after{left:0;width:140px;height:140px;background:url(img/modal-sale.svg) no-repeat center/100% 100%}}@media screen and (max-width: 767px){.modal .box.sale:after{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:calc(176 / 480 * 100vw);height:calc(40 / 480 * 100vw);background:url(img/modal-sale.sp.svg) no-repeat center/100% 100%}}.modal .box .inner{display:block;position:relative;z-index:1}@media screen and (min-width: 768px){.modal .box .inner{padding:35px 30px}}@media screen and (max-width: 767px){.modal .box .inner{padding-top:calc(66 / 480 * 100vw);padding-bottom:calc(30 / 480 * 100vw);padding-left:calc(30 / 480 * 100vw);padding-right:calc(30 / 480 * 100vw)}}.modal .box .copy{color:#A037E9;font-size:18px;font-weight:bold;line-height:1.4;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}@media screen and (min-width: 768px){.modal .box .copy{margin-bottom:20px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}}@media screen and (max-width: 767px){.modal .box .copy{margin-bottom:calc(15 / 480 * 100vw);font-size:calc(18 / 480 * 100vw)}}.modal .box .copy:before{content:"";display:block;background:url(img/icon-book.svg) no-repeat center/contain}@media screen and (min-width: 768px){.modal .box .copy:before{width:21px;height:21px;margin-right:10px}}@media screen and (max-width: 767px){.modal .box .copy:before{width:calc(21 / 480 * 100vw);height:calc(21 / 480 * 100vw);margin-right:calc(10 / 480 * 100vw)}}@media screen and (min-width: 768px){.modal .box .copy span{max-width:calc(100% - 31px)}}@media screen and (max-width: 767px){.modal .box .copy span{width:calc(359 / 480 * 100vw)}}.modal .box .title{max-width:780px;color:#000000;font-weight:bold;letter-spacing:-0.02em;margin-left:auto;margin-right:auto}@media screen and (min-width: 768px){.modal .box .title{font-size:40px;line-height:calc(52 / 40);text-align:center}}@media screen and (max-width: 767px){.modal .box .title{font-size:calc(28 / 480 * 100vw);line-height:calc(40 / 28)}}@media screen and (min-width: 768px){.modal .box .detail{margin-top:30px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 767px){.modal .box .detail{margin-top:calc(30 / 480 * 100vw)}}@media screen and (min-width: 768px){.modal .box .detail .img{width:calc(420 / 860 * 100%)}}.modal .box .detail .img img{width:100%}.modal .box .detail .img .teacher{color:#80868A;font-weight:500;line-height:1.3}@media screen and (min-width: 768px){.modal .box .detail .img .teacher{margin-top:10px;font-size:16px}}@media screen and (max-width: 767px){.modal .box .detail .img .teacher{margin-top:calc(15 / 480 * 100vw);font-size:calc(16 / 480 * 100vw)}}.modal .box .detail .txt{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff}@media screen and (min-width: 768px){.modal .box .detail .txt{padding:20px 30px;width:calc(420 / 860 * 100%)}}@media screen and (max-width: 767px){.modal .box .detail .txt{margin-top:calc(25 / 480 * 100vw);padding-top:calc(20 / 480 * 100vw);padding-bottom:calc(20 / 480 * 100vw);padding-left:calc(20 / 480 * 100vw);padding-right:calc(20 / 480 * 100vw)}}.modal .box .detail .txt .point li{position:relative;font-weight:500}@media screen and (min-width: 768px){.modal .box .detail .txt .point li{padding-left:30px;font-size:14px;line-height:1.5em}}@media screen and (max-width: 767px){.modal .box .detail .txt .point li{padding-left:calc(30 / 480 * 100vw);font-size:calc(16 / 480 * 100vw)}}@media screen and (min-width: 768px){.modal .box .detail .txt .point li:not(:first-child){margin-top:15px}}@media screen and (max-width: 767px){.modal .box .detail .txt .point li:not(:first-child){margin-top:calc(15 / 480 * 100vw)}}.modal .box .detail .txt .point li:before{content:"";position:absolute;left:0;display:block;background:url(img/icon-point.svg) no-repeat center/contain}@media screen and (min-width: 768px){.modal .box .detail .txt .point li:before{top:0.1em;width:16px;height:16px}}@media screen and (max-width: 767px){.modal .box .detail .txt .point li:before{top:0;width:calc(16 / 480 * 100vw);height:calc(16 / 480 * 100vw)}}@media screen and (min-width: 768px){.modal .box .detail .txt .review{margin-top:35px}}@media screen and (max-width: 767px){.modal .box .detail .txt .review{margin-top:calc(35 / 480 * 100vw)}}.modal .box .detail .txt .review dt{color:#A435F0;font-weight:bold}@media screen and (min-width: 768px){.modal .box .detail .txt .review dt{font-size:18px;margin-bottom:10px}}@media screen and (max-width: 767px){.modal .box .detail .txt .review dt{font-size:calc(18 / 480 * 100vw);margin-bottom:calc(10 / 480 * 100vw)}}.modal .box .detail .txt .review dd{line-height:1.5em;overflow:hidden}@media screen and (min-width: 768px){.modal .box .detail .txt .review dd{font-size:16px;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3;height:4.5em}}@media screen and (max-width: 767px){.modal .box .detail .txt .review dd{font-size:calc(16 / 480 * 100vw)}}.modal .box .detail .txt .start{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}@media screen and (min-width: 768px){.modal .box .detail .txt .start{margin-top:20px}}@media screen and (max-width: 767px){.modal .box .detail .txt .start{margin-top:calc(20 / 480 * 100vw)}}.modal .box .detail .txt .start dt{color:#F69C09;font-weight:bold}@media screen and (min-width: 768px){.modal .box .detail .txt .start dt{font-size:15px}}@media screen and (max-width: 767px){.modal .box .detail .txt .start dt{font-size:calc(16 / 480 * 100vw)}}.modal .box .detail .txt .start dd{color:#80868A;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;gap:2px}@media screen and (min-width: 768px){.modal .box .detail .txt .start dd{margin-left:5px;font-size:13px}}@media screen and (max-width: 767px){.modal .box .detail .txt .start dd{margin-left:calc(5 / 480 * 100vw);font-size:calc(13 / 480 * 100vw)}}.modal .box .detail .txt .start dd:last-child{margin-left:auto}.modal .box .detail .txt .start .icon{display:block;background-position:center;background-repeat:no-repeat;background-size:contain}@media screen and (min-width: 768px){.modal .box .detail .txt .start .icon{width:20px;height:20px}}@media screen and (max-width: 767px){.modal .box .detail .txt .start .icon{width:calc(20 / 480 * 100vw);height:calc(20 / 480 * 100vw)}}.modal .box .detail .txt .start .icon.full{background-image:url(img/icon-star-full.svg)}.modal .box .detail .txt .start .icon.half{background-image:url(img/icon-star-half.svg)}.modal .box .detail .txt .start .icon.blank{background-image:url(img/icon-star-blank.svg)}.modal .more{position:relative;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:60px;font-size:18px;font-weight:500;background-color:#A037E9;color:#ffffff}@media screen and (max-width: 767px){.modal .more{margin-top:auto}}.modal .more:before{position:absolute;top:calc(50% - 9px);right:calc(50% - 6em);content:"";display:block;width:7px;height:18px;background:url(img/icon-arrow.svg) no-repeat center/contain}.modal .close{position:absolute;background-color:#A037E9;z-index:2}@media screen and (min-width: 768px){.modal .close{top:-10px;right:-10px;width:64px;height:64px}}@media screen and (max-width: 767px){.modal .close{top:calc(0 / 480 * 100vw);right:calc(0 / 480 * 100vw);width:calc(60 / 480 * 100vw);height:calc(60 / 480 * 100vw)}}.modal .close:before,.modal .close:after{content:"";position:absolute;top:calc(50% - 1.5px);left:27.5%;width:45%;height:3px;background-color:#fff}.modal .close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.modal .close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.modal .box.about-udemy .about-title{font-weight:bold;text-align:center}@media screen and (min-width: 768px){.modal .box.about-udemy .about-title{padding-top:40px;font-size:28px}}@media screen and (max-width: 767px){.modal .box.about-udemy .about-title{padding-top:calc(40 / 480 * 100vw);font-size:calc(28 / 480 * 100vw)}}@media screen and (min-width: 768px){.modal .box.about-udemy .about-title span{font-size:40px}}@media screen and (max-width: 767px){.modal .box.about-udemy .about-title span{font-size:calc(40 / 480 * 100vw)}}.modal .box.about-udemy .about-lead{text-align:center;font-weight:500;line-height:2}@media screen and (min-width: 768px){.modal .box.about-udemy .about-lead{margin-top:40px;font-size:18px}}@media screen and (max-width: 767px){.modal .box.about-udemy .about-lead{margin-top:calc(40 / 480 * 100vw);font-size:calc(16 / 480 * 100vw)}}.modal .box.about-udemy .about-list{position:relative;background-color:#fff;font-weight:500;line-height:1.5}@media screen and (min-width: 768px){.modal .box.about-udemy .about-list{margin-top:35px;margin-left:15%;max-width:630px;padding-top:45px;padding-bottom:45px;padding-left:150px;padding-right:20px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:20px}}@media screen and (max-width: 767px){.modal .box.about-udemy .about-list{margin-top:calc(200 / 480 * 100vw);padding-top:calc(100 / 480 * 100vw);padding-bottom:calc(30 / 480 * 100vw);padding-left:calc(30 / 480 * 100vw);padding-right:calc(30 / 480 * 100vw);font-size:calc(16 / 480 * 100vw)}}@media screen and (min-width: 768px){.modal .box.about-udemy .about-list li:not(:first-child){margin-top:20px}}@media screen and (max-width: 767px){.modal .box.about-udemy .about-list li:not(:first-child){margin-top:calc(15 / 480 * 100vw)}}.modal .box.about-udemy .about-list span{color:#9E37E9}.modal .box.about-udemy .about-list:before{content:"";position:absolute;background:url(img/about-img.png) no-repeat center/contain}@media screen and (min-width: 768px){.modal .box.about-udemy .about-list:before{top:-8%;left:-22%;width:282px;height:341px}}@media screen and (max-width: 767px){.modal .box.about-udemy .about-list:before{top:calc(-210 / 480 * 100vw);left:calc(80 / 480 * 100vw);width:calc(245 / 480 * 100vw);height:calc(296 / 480 * 100vw)}}
