@charset "utf-8"; html { position: relative; min-height: 100%; overflow-x: hidden; padding-right: constant(safe-area-inset-right); padding-left: constant(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left);} body { width: 100%; overflow: hidden; color: #151515; font-family: 'Noto Sans JP', sans-serif; font-weight: 400;} p { } a { color: #151515;} input, select, button, textarea { color: #151515; font-family: 'Roboto', 'Noto Sans JP', sans-serif; font-weight: 400;} input:not([type="text"]):not([type="number"]), select, button { cursor: pointer;} .clearfix::after { content: ""; display: block; clear: both;} .-mark { text-indent: -0.6em;} .l-mv { position: relative; height: 100vh; background-image: linear-gradient( -45deg, rgba(233,249,255,0.99608) 0%, rgb(251,238,245) 100%);} .l-mv__bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(img/mv_bg.jpg) no-repeat 50% 50%; background-size: cover;} .l-mv__inner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;} .l-mv__logo { width: 280px; margin: 0 auto 105px;} .l-mv__catch { width: 500px;} .l-mv__scroll { display: none; position: absolute; bottom: 7%; left: 5.8%; width: 14px; height: 210px;} .l-mv__scroll::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 14px; height: 71px; background: url(img/mv_scroll.png) no-repeat 0 0; background-size: contain;} .l-mv__scrollbar { position: absolute; top: 0; left: 7px; width: 2px; height: 130px; background: rgba(255, 255, 255, 0.5); overflow: hidden; z-index: 100;} .l-mv__scrollbar::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 2px; height: 88px; background: #fff; -webkit-animation: scrollbar 1.4s ease 0s infinite; animation: scrollbar 1.4s ease 0s infinite;} @keyframes scrollbar { 0% { top: -100%;} 50% { top: 100%;} 100% { top: 100%;}} .l-intro { position: relative; padding: 100px 30px; background-image: linear-gradient( -45deg, rgba(233,249,255,0.99608) 0%, rgb(251,238,245) 100%); z-index: 100;} .l-intro__inner { max-width: 1000px; margin: auto;} .l-intro__text { width: 70%; max-width: 837px; margin: auto;} .l-main { position: relative;} .l-main__notes { position: absolute; top: 20px; right: 20px; color: #999; font-size: 1.2rem; z-index: 10;} .timeline { position: relative; padding: 0 10%;} .timeline__inner { position: relative; max-width: 1000px; margin: auto; z-index: 20;} .timeline__inner::before { content: ""; display: block; position: absolute; top: 0; left: 39%; width: 2px; height: 100%; background: #ddd;} .timeline__heading { position: relative; width: 180px; margin-bottom: 75px; margin-left: calc(39% - 90px);} .timeline-table { display: table; table-layout: fixed; width: 100%;} .timeline-table__cell { display: table-cell; vertical-align: top;} .timeline-table__cell.-ranking { width: 39%; padding-right: 4%;} .timeline-table__cell.-history { width: 61%;} .timeline-table__cell.-vam { vertical-align: middle;} .timeline.-header .timeline__inner { padding: 120px 0 0;} .timeline.-year .timeline__inner { padding-top: 75px;} .timeline.-year2009 .timeline__inner, .timeline.-year2016 .timeline__inner, .timeline.-year2019 .timeline__inner, .timeline.-year2021 .timeline__inner { padding-bottom: 100px;} .history-block { position: relative; padding-left: 13.661%;} .history-block::before { content: ""; display: block; position: absolute; top: 8px; left: -8px; width: 16px; height: 16px; background: #e5006e; border-radius: 50%;} .history-block:not(:first-of-type) { margin: 50px 0 0;} .history-block__lead, .history-block__title { display: block;} .history-block__lead { margin: 0 0 0.3em; font-size: 1.4rem; line-height: 1.3;} .history-block__title { font-size: 1.9rem; line-height: 1.6;} .history-block__title.-small { font-size: 1.6rem;} .history-block__text a { text-decoration: underline;} .history-detail + .history-detail { margin: 5px 0 0;} .history-block__text + .history-detail { margin: 20px 0 0;} .history-detail { position: relative; padding: 0 0 0 76px;} .history-detail__label { position: absolute; top: 1px; left: 0; width: 64px; height: 24px; text-align: center; font-size: 1.2rem; font-weight: 500; line-height: 26px;} .history-detail__label.-comment { background: #fce5f0;} .history-detail__label.-note { background: #e9f8f4;} .history-detail__text { color: #777; font-size: 1.4rem; line-height: 1.9;} .history-detail__link { color: #777; text-decoration: underline;} .history-detail__link.-out::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 20px; background: url(img/icon_out.png) no-repeat 0 0; background-size: contain;} .history-notes { font-size: 1.2rem; font-weight: 500;} .ranking-block:nth-of-type(2) { margin-top: 80px;} .ranking-block__heading { position: relative; padding: 0 0 20px 38px; font-size: 1.4rem; font-weight: 500; line-height: 1.3;} .ranking-block__heading::before { content: ""; display: block; position: absolute; top: 0.5em; left: 0; width: 24px; height: 2px; background: #e5006e;} .ranking-block__inner { display: block; position: relative; overflow: hidden; padding: 0 0 20px 0;} .ranking-block__inner[href]::after { content: ""; display: block; position: absolute; bottom: 5px; right: 10px; width: 50px; height: 12px; background: url(img/arrow.png) no-repeat 0 0; background-size: contain;} .ranking-block__thumb { width: 120px; float: left;} .ranking-block__thumb.-line { border: 1px solid #ddd;} .ranking-block__info { padding: 10px 0 0 18px; overflow: hidden;} .ranking-block__lead { margin: 0 0 5px; font-size: 1.4rem; font-weight: 700; line-height: 1.2;} .ranking-block__title { font-size: 1.8rem; font-weight: 700; line-height: 1.5;} .ranking-block__info.-noimage { padding: 10px 0 0 0;} .ranking-block__info.-noimage .ranking-block__title { font-size: 2.6rem;} .infographics { position: relative; padding: 0 6%; background: #eee; box-shadow: 0px 0px 57px 3px rgba(229, 0, 110, 0.08); z-index: 100;} .infographics__inner { position: relative; max-width: 1000px; margin: auto; padding: 100px 0;} .infographics.-year2009 { background: url(img/info_year2009_bg.jpg) no-repeat 50% 50%; background-size: cover;} .infographics.-year2009 .infographics__inner { padding: 190px 0;} .infographics.-year2009 .text1 { width: 49.583%; min-width: 495px; max-width: 619px; margin: 0 0 40px auto;} .infographics.-year2009 .text2 { width: 43%; min-width: 430px; max-width: 525px; margin: 0 0 0 auto;} .infographics.-year2016 { background: url(img/info_year2016_bg.jpg) no-repeat 50% 50%; background-size: cover;} .infographics.-year2016 .infographics__inner { padding: 70px 0 54px;} .infographics.-year2016 .text1 { width: 62.416%; max-width: 785px; margin: 0 0 0 auto;} .infographics.-year2016 .text2 { width: 64.75%; max-width: 813px; margin: 60px 0 40px auto;} .infographics.-year2016 .text3 { width: 26.25%; max-width: 351px; margin: 0 0 0 auto;} .infographics.-year2019 { background: url(img/info_year2019_bg.jpg) no-repeat 50% 50%; background-size: cover;} .infographics.-year2019 .infographics__inner { width: 60%; max-width: 1000px; padding: 70px 0 60px; font-size: 0;} .infographics.-year2019 .logo { width: 33%; max-width: 330px; margin: 0 auto 50px;} .infographics.-year2019 .more { position: absolute; top: 130px; right: 0; width: 17.7%; max-width: 177px; margin: 0 auto;} .infographics.-year2019 .more-link { display: block;} .infographics.-year2019 .text1 { width: 38%; max-width: 380px;} .infographics.-year2019 .text2 { width: 51.4%; max-width: 514px;} .infographics.-year2019 .text1.disp-large { display: inline-block; margin: 0 10.6% 0 0;} .infographics.-year2019 .text2.disp-large { display: inline-block;} .infographics.-trm { background: url(img/info_trm_bg.jpg) no-repeat 50% 50%; background-size: cover;} .infographics.-trm .infographics__inner { padding: 100px 0 90px;} .infographics.-trm .heading { width: 78.333%; max-width: 940px; margin: 0 auto 57px;} @media screen and (min-width:769px) { .infographics.-trm .box { display: table; table-layout: fixed; width: 78%; margin: auto;} .infographics.-trm .logo { display: table-cell; width: 53%; padding-right: 6%;} .infographics.-trm .info { display: table-cell; text-align: center; vertical-align: middle; width: 47%; color: #fff;}} .infographics.-trm .info { color: #fff;} .infographics.-trm .text1 { font-size: 3vw; font-weight: 700;} .infographics.-trm .text2 { margin: 30px 0 45px; font-size: 2.2vw; font-weight: 700; line-height: 1.4;} .infographics.-trm .btn { display: block; width: 100%; color: #fff; padding: 16px 0; border: 2px solid #fff; border-radius: 6px; font-size: 1.8vw; font-weight: 700;} @media screen and (min-width:1366px) { .infographics.-trm .text1 { font-size: 4rem;} .infographics.-trm .text2 { font-size: 2.8rem;} .infographics.-trm .btn { font-size: 2.2rem;}} .bg { position: absolute; width: auto;} .block1 { position: relative; overflow: hidden; background: #fff;} .bg1 { background-attachment: fixed;} .b1_h1 { top: -150px; right: -70px; width: 24%; max-width: 330px;} .b1_h2 { top: 510px; right: 24px; width: 15.5%; max-width: 212px;} .b1_earphone { top: 65px; right: -30px; width: 21%; max-width: 288px;} .b1_r1 { top: 20px; left: 20px; width: 6.4%; max-width: 87px;} .b1_r2 { top: 280px; left: 180px; width: 21.8%; max-width: 298px;} .b1_r3 { top: 340px; left: -200px; width: 24%; max-width: 330px;} .b1_phone { top: 515px; left: 55px; width: 24.3%; max-width: 333px;} .block2 { position: relative; overflow: hidden; background: #fff;} .b2_h1 { top: -135px; right: -90px; width: 25.6%; max-width: 350px;} .b2_h2 { top: 284px; right: 55px; width: 2%; max-width: 28px;} .b2_h3 { top: 565px; right: -6px; width: 20%; max-width: 278px;} .b2_r1 { top: 38px; left: 25px; width: 12.6%; max-width: 172px;} .b2_r2 { top: 310px; left: 240px; width: 17.6%; max-width: 241px;} .b2_r3 { top: 415px; left: -150px; width: 21.2%; max-width: 290px;} .b2_r4 { top: 478px; left: 15%; width: 6.6%; max-width: 90px;} .b2_sp { top: -100px; right: 100px; width: 26%; max-width: 357px;} .b2_3ds { bottom: 0; left: 25%; width: 12.7%; max-width: 173px;} .b2_live { top: -100px; right: 11.7%; width: 24.6%; max-width: 336px;} .b2_vr { bottom: -15px; left: 11.8%; width: 16.2%; max-width: 221px;} .block3 { position: relative; overflow: hidden; background: #fff;} .b3_h1 { top: -135px; right: -90px; width: 25.6%; max-width: 350px;} .b3_h2 { top: 284px; right: 55px; width: 2%; max-width: 28px;} .b3_h3 { top: 585px; right: 10px; width: 18.3%; max-width: 250px;} .b3_r1 { top: 30px; left: 25px; width: 10.3%; max-width: 141px;} .b3_r2 { top: 450px; left: -145px; width: 28.8%; max-width: 394px;} .b3_r3 { top: 160px; left: 24%; width: 27.8%; max-width: 38px;} .b3_digital { top: 370px; right: 43%; width: 13%; max-width: 179px;} .b3_pc { top: 170px; right: 18%; width: 22%; max-width: 301px;} .b3_switch { bottom: 0; right: 56%; width: 12.7%; max-width: 174px;} .block4 { position: relative; overflow: hidden; background: #fff;} .b4_h1 { top: -135px; right: -90px; width: 25.6%; max-width: 350px;} .b4_h2 { top: 284px; right: 55px; width: 2%; max-width: 28px;} .b4_h3 { top: 585px; right: 10px; width: 18.3%; max-width: 250px;} .b4_h4 { top: 190px; right: 42%; width: 6.4%; max-width: 88px;} .b4_h5 { top: 350px; right: 30%; width: 7.4%; max-width: 101px;} .b4_r1 { top: 30px; left: 25px; width: 10.3%; max-width: 141px;} .b4_r2 { top: 450px; left: -145px; width: 28.8%; max-width: 394px;} .b4_r3 { top: 160px; left: 430px; width: 27.8%; max-width: 38px;} .is-fixed { position: fixed; top: 0; left: 0; width: 100%;} .l-future { position: relative; padding: 120px 0; background-image: linear-gradient( -45deg, rgba(233,249,255,0.99608) 0%, rgb(251,238,245) 100%); z-index: 100;} .l-future__text { display: block; width: 30%; max-width: 450px; margin: auto;} .l-future__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(img/future_bg.png) no-repeat 50% 50%; background-size: cover;} .l-footer { padding: 50px 0; text-align: center; background: #fff;} .l-footer__copyright { color: #777; font-size: 1.2rem;} .l-footer-logo { width: 115px; margin: 0 auto 12px;} .l-footer-logo__link { display: block;} @media screen and (min-width:769px) { a:hover, button:hover { opacity: 0.6;} .disp-small { display: none;} .disp-large { display: block;} .disp-mid { display: none;}} @media screen and (min-width:769px) and (max-width:999px) { .history-block__title { font-size: 1.8rem;} .history-block__lead, .history-detail__text { font-size: 1.4rem;} .ranking-block__heading, .ranking-block__lead { font-size: 1.4rem;} .ranking-block__title { font-size: 1.7rem; line-height: 1.4;}} @media screen and (max-width:768px) { .disp-small { display: block;} .disp-large { display: none;} .l-mv__bg { background-image: url(img/mv_bg_s.jpg);} .l-mv__logo { width: 48vw; max-width: 310px; margin: 0 auto 50px;} .l-mv__catch { width: 61.733vw; max-width: 360px;} .l-mv__scroll { bottom: 8%; left: 2.6%; width: 7px; height: 106px;} .l-mv__scroll::before { width: 7px; height: 36px;} .l-mv__scrollbar { left: 3px; width: 1px; height: 65px;} .l-mv__scrollbar::after { width: 1px; height: 65px;} .l-intro { padding: 50px 0 60px;} .l-intro__text { width: 77.333vw; max-width: 290px;} .l-main__notes { top: 10px; right: 10px; text-align: right; font-size: 0.9rem; line-height: 1.4;} .timeline { padding: 0 10px;} .timeline__inner::before { left: 28%; width: 1px;} .timeline-table__cell { vertical-align: middle;} .timeline-table__cell.-ranking { width: 28%; padding-right: 10px;} .timeline-table__cell.-history { width: 72%;} .timeline-table__cell.-vat { vertical-align: top;} .timeline__heading { position: relative; width: 100px; margin-bottom: 30px; margin-left: calc(28% - 50px);} .timeline.-header .timeline__inner { padding: 60px 0 0;} .timeline.-year .timeline__inner { padding-top: 30px;} .timeline.-year2009 .timeline__inner, .timeline.-year2016 .timeline__inner, .timeline.-year2019 .timeline__inner, .timeline.-year2021 .timeline__inner { padding-bottom: 50px;} .timeline.-year2010 .timeline__inner, .timeline.-year2017 .timeline__inner, .timeline.-year2020 .timeline__inner { padding-top: 50px;} .history-block { padding-left: 20px;} .history-block:not(:first-of-type) { margin: 30px 0 0;} .history-block::before { top: 8px; left: -4px; width: 8px; height: 8px;} .history-block__lead { font-size: 1rem; font-weight: 500;} .history-block__title, .history-block__title.-small { font-size: 1.2rem;} .history-detail { padding: 0 0 0 44px;} .history-block__text + .history-detail { margin: 10px 0 0;} .history-detail + .history-detail { margin: 8px 0 0;} .history-detail__label { width: 38px; height: 15px; font-size: 0.7rem; line-height: 15px;} .history-detail__text { font-size: 1rem; line-height: 1.6;} .history-detail__link.-out::after { width: 8px; height: 8px; margin-left: 10px;} .history-notes { font-size: 0.9rem;} .ranking-block:nth-of-type(2) { margin-top: 30px;} .ranking-block__heading { padding: 0 0 10px 14px; font-size: 0.9rem;} .ranking-block__heading::before { width: 10px; height: 1px;} .ranking-block__inner { padding: 0 10px 8px 14px;} .ranking-block__inner[href]::after { bottom: 0; right: 0; width: 16px; height: 4px;} .ranking-block__thumb { width: 100%; float: none;} .ranking-block__info { padding: 10px 0 0 0;} .ranking-block__lead { margin: 0 0 2px; font-size: 0.9rem;} .ranking-block__title { font-size: 1rem; line-height: 1.3} .infographics { padding: 0 5.333%; box-shadow: 0px 0px 24px 2px rgba(229, 0, 110, 0.08);} .infographics.-year2009 { background-image: url(img/info_year2009_bg_s.jpg);} .infographics.-year2009 .infographics__inner { padding: 158px 0 40px;} .infographics.-year2009 .text1 { width: 72.533vw; min-width: inherit; max-width: 400px; margin: 0 0 25px auto;} .infographics.-year2009 .text2 { width: 76.933vw; min-width: inherit; max-width: 430px;} .infographics.-year2016 { background-image: url(img/info_year2016_bg_s.jpg);} .infographics.-year2016 .infographics__inner { padding: 60px 0 50px;} .infographics.-year2016 .text1 { width: 72.533vw; max-width: 443px;} .infographics.-year2016 .text2 { width: 86.666vw; max-width: 487px; margin: 25px 0 25px auto;} .infographics.-year2016 .text3 { width: 52.533vw; max-width: 270px;} .infographics.-year2019 { background-image: url(img/info_year2019_bg_s.jpg);} .infographics.-year2019 .infographics__inner { padding: 60px 0;} .infographics.-year2019 .logo-wrap { display: table; margin: 0 auto;} .infographics.-year2019 .logo { display: table-cell; width: auto; max-width: auto; margin: 0; padding-right: 6.666vw;} .infographics.-year2019 .logo img { width: 32.133vw; max-width: 200px;} .infographics.-year2019 .more { display: table-cell; position: relative; vertical-align: middle; top: inherit; right: inherit; width: 23.6vw; max-width: 130px;} .infographics.-year2019 .text1 { margin: 50px auto 36px; width: 40.933vw; max-width: 230px;} .infographics.-year2019 .text2 { margin: 0 auto; width: 59.866vw; max-width: 336px;} .infographics.-year2019 .text1.disp-large, .infographics.-year2019 .text2.disp-large { display: none;} .infographics.-trm { background-image: url(img/info_trm_bg_s.jpg);} .infographics.-trm .infographics__inner { padding: 55px 0 45px;} .infographics.-trm .heading { width: 67.2vw; max-width: 340px; margin: 0 auto 30px;} .infographics.-trm .logo { width: 48vw; max-width: 338px; margin: 0 auto 30px;} .infographics.-trm .info { text-align: center;} .infographics.-trm .text1 { font-size: 2.4rem;} .infographics.-trm .text2 { margin: 15px auto; font-size: 1.5rem;} .infographics.-trm .btn { width: 60vw; max-width: 380px; margin: auto; padding: 2.4vw 0; font-size: 1.4rem;} .l-future { padding: 90px 0;} .l-future__text { width: 70vw; max-width: 300px;} .l-future__bg { background-image: url(img/future_bg_s.png);} .bg { position: absolute; width: auto;} .block1 { position: relative;} .bg1 { background-attachment: fixed;} .b1_h1 { top: -18.667vw; right: -17.333vw; width: 43.467vw; max-width: 330px;} .b1_h2 { top: 86.8vw; right: -1.067vw; width: 19.867vw; max-width: 212px;} .b1_earphone { top: 9.467vw; right: 0.667vw; width: 26.267vw; max-width: 288px;} .b1_r1 { top: 3.733vw; right: 1.867vw; width: 11.2vw; max-width: 87px;} .b1_r2 { top: 52vw; left: 10.667vw; width: 22.8vw; max-width: 298px;} .b1_r3 { top: 72.533vw; left: -24.133vw; width: 35.467vw; max-width: 330px;} .b1_phone { top: 95.733vw; left: 2.667vw; width: 22.267vw; max-width: 333px;} .block2 { position: relative;} .b2_h1 { top: -14vw; right: -8.8vw; width: 30.133vw; max-width: 350px;} .b2_h2 { top: 42.133vw; right: 7.333vw; width: 3.067vw; max-width: 28px;} .b2_h3 { top: 74.133vw; right: 2.4vw; width: 21.333vw; max-width: 278px;} .b2_r1 { top: 2.667vw; left: 3.333vw; width: 16vw; max-width: 172px;} .b2_r2 { top: 22vw; left: 16.667vw; width: 22.933vw; max-width: 241px;} .b2_r3 { top: 61.333vw; left: -24vw; width: 38.133vw; max-width: 290px;} .b2_r4 { top: 58.533vw; left: 30vw; width: 7.733vw; max-width: 90px;} .b2_sp { top: 6.4vw; right: 4.4vw; width: 26vw; max-width: 357px;} .b2_3ds { bottom: -50px; left: inherit; right: 22.667vw; width: 18.4vw; max-width: 173px;} .b2_live { top: 0; right: 16vw; width: 37.867vw; max-width: 336px;} .b2_vr { bottom: 0; left: 5.333vw; width: 20.8vw; max-width: 221px;} .block3 { position: relative;} .b3_h1 { top: -14vw; right: -8.8vw; width: 30.133vw; max-width: 350px;} .b3_h2 { top: 42.133vw; right: 7.333vw; width: 3.067vw; max-width: 28px;} .b3_h3 { top: 74.133vw; right: 2.4vw; width: 21.333vw; max-width: 250px;} .b3_r1 { top: 2.667vw; left: 3.333vw; width: 16vw; max-width: 141px;} .b3_r2 { top: 61.333vw; left: -24vw; width: 49.333vw; max-width: 394px;} .b3_r3 { top: 9.333vw; left: 31.467vw; width: 4.267vw; max-width: 38px;} .b3_digital { top: 80vw; right: 31.467vw; width: 18.933vw; max-width: 179px;} .b3_pc { top: 24vw; right: 20vw; width: 27.467vw; max-width: 301px;} .b3_switch { bottom: 0; right: 33.333vw; width: 18.4vw; max-width: 174px;} .block4 { position: relative;} .b4_h1 { top: -14vw; right: -8.8vw; width: 30.133vw; max-width: 350px;} .b4_h2 { top: 42.133vw; right: 7.333vw; width: 3.067vw; max-width: 28px;} .b4_h3 { top: 74.133vw; right: 2.4vw; width: 21.333vw; max-width: 250px;} .b4_h4 { top: 35.2vw; right: 44vw; width: 8.267vw; max-width: 88px;} .b4_h5 { top: 50.667vw; right: 32vw; width: 7.467vw; max-width: 101px;} .b4_r1 { top: 2.667vw; left: 3.333vw; width: 16vw; max-width: 141px;} .b4_r2 { top: 61.333vw; left: -24vw; width: 49.333vw; max-width: 394px;} .b4_r3 { top: 9.333vw; left: 31.467vw; width: 4.267vw; max-width: 38px;} .l-footer { padding: 30px 0;} .l-footer__copyright { font-size: 1rem;} .l-footer-logo { width: 95px;}} @media screen and (max-width:359px) { .disp-mid { display: none;}}