{"version":3,"sources":["_basic.scss","01_01.css","_setting.scss","_module.scss","_common.scss","_audio_picture.scss"],"names":[],"mappings":"AAMA;EACE,gBAAgB;ACLlB;;ADQA;EACE,WAAW;EACX,sBAAsB;EACtB,cAAc;EACd,iBAAiB;EACjB,8BAA8B;EAC9B,mCAAmC;EACnC,WAAW;EACX,YAAY;EACZ,gBAAgB;EAGhB,cAAc;EACd,iHEZ8G;ADKhH;;ADUA;EACE,WAAW;EACX,wBAAgB;EAAhB,gBAAgB;ACPlB;;ADUA;EACE,iHErB8G;ADchH;;AEhBA;EACE,cAAc;EACd,kBAAkB;EAClB,cAAc;EACd,WAAW;AFmBb;;AG9BA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,WAAW;EACX,aAAa;AHiCf;;AG9BA;EACE,yBAAyB;EACzB,iBAAiB;EACjB,uBAAuB;EACvB,cAAc;AHiChB;;ACnBE;EElBF;IAOI,aAAa;IACb,cAAc;EHmChB;AACF;;ACtCE;EENF;IAYI,cAAc;EHqChB;AACF;;AGlCA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,sBAAsB;EACtB,WAAW;AHqCb;;AGlCA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,YAAY;AHqCd;;AC9CE;EEMF;IAMI,cAAc;EHuChB;AACF;;AG9CA;EC5BE,aAAa;AJ8Ef;;AIvEA;EACE,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,UAAU;EACV,OAAO;EACP,sBAAsB;EACtB,WAAW;AJ0Eb;;AIvEA;EACE,WAAW;EACX,YAAY;AJ0Ed;;AIvEA;EACE,cAAc;EACd,kBAAkB;EAClB,QAAQ;EACR,OAAO;EACP,WAAW;EACX,WAAW;EACX,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;AJ0EnB;;AIlEA;EAEE,kBAAkB;EAClB,YAAY;EACZ,SAAS;EACT,mBAAmB;EACnB,WAAW;AJoEb;;AI1EA;EASI,kBAAkB;EAClB,YAAY;EACZ,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA8B;MAA9B,sBAA8B;UAA9B,8BAA8B;EAC9B,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,cAAc;EACd,yBAAyB;EACzB,mBAAmB;EACnB,YAAY;AJqEhB;;AItFA;;EAqBI,WAAW;EACX,yBH9Da;EG+Db,SAAS;EACT,UAAU;EACV,eAAe;AJsEnB;;AI/FA;;EA4BM,oBAAoB;EACpB,sBAAsB;AJwE5B;;AIrGA;;EAiCM,oDAA4C;UAA5C,4CAA4C;AJyElD;;AItEI;EACE;IACE,yBH9ES;EDuJf;EIvEI;IACE,yBAAyB;EJyE/B;EIvEI;IACE,yBHpFS;ED6Jf;AACF;;AIlFI;EACE;IACE,yBH9ES;EDuJf;EIvEI;IACE,yBAAyB;EJyE/B;EIvEI;IACE,yBHpFS;ED6Jf;AACF;;AItHA;EAoDI,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;EAChB,kBAAkB;AJsEtB;;AI9HA;;EA+DI,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,kBAAkB;AJoEtB;;AItIA;;EAqEM,WAAW;EACX,YAAY;AJsElB;;AI5IA;EA2EI,mBAAmB;AJqEvB;;AIhJA;EA+EI,kBAAkB;AJqEtB","file":"01_01.css","sourcesContent":["@charset \"UTF-8\";\r\n\r\n// =======================================\r\n// basic\r\n// =======================================\r\n\r\nhtml {\r\n font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n color: #000;\r\n background-color: #fff;\r\n line-height: 1;\r\n font-size: 1.6rem;\r\n -webkit-text-size-adjust: 100%;\r\n -webkit-font-smoothing: antialiased;\r\n width: 100%;\r\n height: 100%;\r\n min-width: 320px;\r\n // min-width: 1024px;\r\n // min-height: 768px;\r\n margin: 0 auto;\r\n font-family: $font-base;\r\n}\r\n\r\na {\r\n color: #000;\r\n transition: 0.5s;\r\n}\r\n\r\nbutton {\r\n font-family: $font-base;\r\n}\r\n","html {\n font-size: 62.5%;\n}\n\nbody {\n color: #000;\n background-color: #fff;\n line-height: 1;\n font-size: 1.6rem;\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n width: 100%;\n height: 100%;\n min-width: 320px;\n margin: 0 auto;\n font-family: Meiryo, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Hiragino Kaku Gothic ProN\", sans-serif;\n}\n\na {\n color: #000;\n transition: 0.5s;\n}\n\nbutton {\n font-family: Meiryo, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Hiragino Kaku Gothic ProN\", sans-serif;\n}\n\n.container {\n display: block;\n position: relative;\n margin: 0 auto;\n width: 100%;\n}\n\n.page-container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n}\n\n.page {\n width: calc(100% - 200px);\n max-width: 1410px;\n aspect-ratio: 1 / 0.765;\n margin: 0 auto;\n}\n\n@media only screen and (min-width: 1610px) {\n .page {\n width: 1410px;\n height: 1080px;\n }\n}\n\n@media only screen and (max-height: 767px) {\n .page {\n margin: 0 auto;\n }\n}\n\n.main {\n position: relative;\n width: 100%;\n height: 100%;\n background-color: #fff;\n z-index: 10;\n}\n\n.main-box {\n position: relative;\n padding: 15vw 5vw;\n height: 100%;\n}\n\n@media only screen and (min-width: 1610px) {\n .main-box {\n padding: 170px;\n }\n}\n\n.main-box {\n padding: 30px;\n}\n\n.audio-base {\n display: block;\n position: absolute;\n width: 100%;\n height: calc(100% + 70px);\n top: -70px;\n left: 0;\n background-color: #fff;\n z-index: 20;\n}\n\n.picture-target {\n width: 100%;\n height: 100%;\n}\n\n.audio-attention {\n display: block;\n position: absolute;\n top: 5px;\n left: 0;\n width: 100%;\n color: #f00;\n text-align: center;\n font-size: 1.25em;\n font-weight: bold;\n}\n\n.control {\n position: absolute;\n bottom: 30px;\n left: 50%;\n margin-left: -150px;\n z-index: 20;\n}\n\n.control .nav {\n position: relative;\n width: 300px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 auto;\n background-color: #e8e8e8;\n border-radius: 34px;\n padding: 8px;\n}\n\n.control .nav__btn, .control .nav__btn--start, .control .nav__btn--prev,\n.control .nav__btn--next {\n color: #fff;\n background-color: #f42733;\n border: 0;\n outline: 0;\n cursor: pointer;\n}\n\n.control .nav__btn.disable, .control .disable.nav__btn--start, .control .disable.nav__btn--prev,\n.control .disable.nav__btn--next {\n pointer-events: none;\n background-color: #ccc;\n}\n\n.control .nav__btn.moving, .control .moving.nav__btn--start, .control .moving.nav__btn--prev,\n.control .moving.nav__btn--next {\n animation: anim_moving 0.8s ease 0s infinite;\n}\n\n@keyframes anim_moving {\n 0% {\n background-color: #f42733;\n }\n 50% {\n background-color: #ff9e97;\n }\n 100% {\n background-color: #f42733;\n }\n}\n\n.control .nav__btn--start {\n padding: 10px 40px 8px;\n border-radius: 30px;\n font-size: 1.35em;\n font-weight: 700;\n text-align: center;\n}\n\n.control .nav__btn--prev,\n.control .nav__btn--next {\n width: 42px;\n height: 42px;\n padding: 8px;\n border-radius: 50%;\n}\n\n.control .nav__btn--prev img,\n.control .nav__btn--next img {\n width: 14px;\n height: 18px;\n}\n\n.control .nav__btn--prev {\n padding-right: 12px;\n}\n\n.control .nav__btn--next {\n padding-left: 12px;\n}\n","@charset \"UTF-8\";\r\n\r\n// =======================================\r\n// setting\r\n// =======================================\r\n\r\n// color\r\n$col-red: #f42733;\r\n$col-cyan: #03b8df;\r\n\r\n// font\r\n$font-base: Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;\r\n\r\n\r\n// media query\r\n\r\n@mixin mq_h_max {\r\n @media only screen and (max-height: 767px) {\r\n @content\r\n }\r\n};\r\n\r\n@mixin mq_w_max {\r\n @media only screen and (max-height: 1023px) {\r\n @content\r\n }\r\n};\r\n\r\n@mixin mq_wide {\r\n @media only screen and (min-width: 1610px) {\r\n @content\r\n }\r\n};","@charset \"UTF-8\";\r\n\r\n// ==============================================================================\r\n// module\r\n// ==============================================================================\r\n\r\n// ------------------------------------------------------------------------------\r\n// container\r\n// ------------------------------------------------------------------------------\r\n.container {\r\n display: block;\r\n position: relative;\r\n margin: 0 auto;\r\n width: 100%;\r\n}\r\n\r\n","@charset \"UTF-8\";\r\n\r\n.page-container {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 100vh;\r\n}\r\n\r\n.page {\r\n width: calc(100% - 200px);\r\n max-width: 1410px;\r\n aspect-ratio: 1 / 0.765;\r\n margin: 0 auto;\r\n\r\n @include mq_wide {\r\n width: 1410px;\r\n height: 1080px;\r\n }\r\n\r\n @include mq_h_max {\r\n margin: 0 auto;\r\n };\r\n}\r\n\r\n.main {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #fff;\r\n z-index: 10;\r\n}\r\n\r\n.main-box {\r\n position: relative;\r\n padding: 15vw 5vw;\r\n height: 100%;\r\n\r\n @include mq_wide {\r\n padding: 170px;\r\n }\r\n}\r\n","@charset \"UTF-8\";\r\n\r\n// ==============================================================================\r\n// audio and picture controls\r\n// ==============================================================================\r\n\r\n.main-box {\r\n padding: 30px;\r\n}\r\n\r\n// ------------------------------------------------------------------------------\r\n// base\r\n// ------------------------------------------------------------------------------\r\n\r\n.audio-base {\r\n display: block;\r\n position: absolute;\r\n width: 100%;\r\n height: calc(100% + 70px);\r\n top: -70px;\r\n left: 0;\r\n background-color: #fff;\r\n z-index: 20;\r\n}\r\n\r\n.picture-target {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.audio-attention {\r\n display: block;\r\n position: absolute;\r\n top: 5px;\r\n left: 0;\r\n width: 100%;\r\n color: #f00;\r\n text-align: center;\r\n font-size: 1.25em;\r\n font-weight: bold;\r\n}\r\n\r\n\r\n\r\n// ------------------------------------------------------------------------------\r\n// multiple (scene)\r\n// ------------------------------------------------------------------------------\r\n.control {\r\n\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n margin-left: -150px;\r\n z-index: 20;\r\n \r\n .nav {\r\n position: relative;\r\n width: 300px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: 0 auto;\r\n background-color: #e8e8e8;\r\n border-radius: 34px;\r\n padding: 8px;\r\n }\r\n\r\n .nav__btn {\r\n color: #fff;\r\n background-color: $col-red;\r\n border: 0;\r\n outline: 0;\r\n cursor: pointer;\r\n\r\n &.disable {\r\n pointer-events: none;\r\n background-color: #ccc;\r\n }\r\n\r\n &.moving {\r\n animation: anim_moving 0.8s ease 0s infinite;\r\n }\r\n\r\n @keyframes anim_moving {\r\n 0% {\r\n background-color: $col-red;\r\n }\r\n 50% {\r\n background-color: #ff9e97;\r\n }\r\n 100% {\r\n background-color: $col-red;\r\n }\r\n }\r\n }\r\n\r\n .nav__btn--start {\r\n @extend .nav__btn;\r\n\r\n padding: 10px 40px 8px;\r\n border-radius: 30px;\r\n font-size: 1.35em;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n .nav__btn--prev,\r\n .nav__btn--next {\r\n @extend .nav__btn;\r\n\r\n width: 42px;\r\n height: 42px;\r\n padding: 8px;\r\n border-radius: 50%;\r\n\r\n img {\r\n width: 14px;\r\n height: 18px;\r\n }\r\n }\r\n\r\n .nav__btn--prev {\r\n padding-right: 12px;\r\n }\r\n\r\n .nav__btn--next {\r\n padding-left: 12px;\r\n }\r\n}\r\n"]}