*{ margin: 0px; padding: 0px; font-family: Roboto,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3'; font-size: calc(12px + 0.25vw); color: #333; outline: none; caret-color: transparent; } a{ display: inline-block; text-decoration: none; cursor: pointer; } li { list-style: none; } h1,h2,h3,h4,h5,h6{ line-height: 1em; } h1{ font-size: calc(32px + 0.25vw); } h2{ font-size: calc(26px + 0.25vw); } h3{ font-size: calc(21px + 0.25vw); } h4{ font-size: calc(18px + 0.25vw); } h5{ font-size: calc(15px + 0.25vw); } h6{ font-size: calc(11px + 0.25vw); color: #666; } p{ line-height: 1.4em; } input{ width: 100%; height: 100%; background: #eee; border: 0px; border-radius: 6px; color: #555; caret-color: #aaa; cursor: pointer; } input:hover{ background: #aab; } input:focus{ background: #aaf; outline: 0; border: none; color: #fff; } table{ width: 100%; height: 210px; border-collapse: collapse; text-align: center; } caption{ height: 50px; line-height: 1.4em; } .capspan1{ font-size: 10pt; font-weight: normal; } .capspan2{ font-size: 18pt; } thead{ border-bottom: 1px solid #ddd; } table th{ height: 29px; border: 0; } table td{ height: 30px; border: 0; } .dayC1{ background: #f6f6f6; } audio{ width: 100%; background: #f4f4f4; border-bottom: 1px solid #ddd; border-radius: 6px; } body{ background: #fafafa; } #all{ width: 100vw; height: 100vh; overflow: hidden; } #viewbox1{ display: none; position: fixed; top: 0px; left: 0px; padding: 10px; width: calc( 100% - 20px ); height: calc( 100% - 20px ); background: transparent; z-index: 7000; } #VB1top{ margin-right: auto; margin-left: auto; padding-top: 10px; padding-right: 10px; width: calc( 100% - 12px ); max-width: 988px; height: 40px; background: #fff; border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-radius: 6px 6px 0px 0px; } #VB1close{ float: right; width: 40px; height: 40px; background: url(img/VBclose.png) no-repeat; background-size: 40px; cursor: pointer; } #VB1in{ margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); max-width: 998px; height: calc( 100% - 52px ); border-right: 1px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; border-radius: 0px 0px 6px 6px; overflow: hidden; } #VB1main{ padding: 10px; width: calc( 100% - 20px ); height: calc( 100% - 20px ); background: #fff; overflow-x: hidden; overflow-y: auto; } #VB1img{ width: 100%; max-width: 1000px; border-radius: 6px; } #VB1comment{ width: 100%; } #viewbox2{ display: none; position: fixed; top: 0px; left: 0px; padding: 10px; width: calc( 100% - 20px ); height: calc( 100% - 20px ); background: transparent; z-index: 7100; } #VB2top{ margin-right: auto; margin-left: auto; padding-top: 10px; padding-right: 10px; width: calc( 100% - 12px ); max-width: 988px; height: 40px; background: #fff; border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-radius: 6px 6px 0px 0px; } #VB2close{ float: right; width: 40px; height: 40px; background: url(img/VBclose.png) no-repeat; background-size: 40px; cursor: pointer; } #VB2in{ margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); max-width: 998px; height: calc( 100% - 52px ); border-right: 1px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; border-radius: 0px 0px 6px 6px; overflow: hidden; } #VB2main{ padding: 10px; width: calc( 100% - 20px ); height: calc( 100% - 20px ); background: #fff; overflow-x: hidden; overflow-y: auto; } #VB2img{ width: 100%; max-width: 1000px; border-radius: 6px; } #viewmanga{ display: none; position: fixed; top: 0px; left: 0px; padding: 10px; width: calc( 100% - 20px ); height: calc( 100% - 20px ); background: transparent; z-index: 7200; } #VBMin{ margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); height: calc( 100% - 2px ); background: #fff; border-right: 1px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; border-radius: 6px; overflow: hidden; } #VBMintop{ display: grid; grid-template-rows: 40px; grid-template-columns: 1fr 140px; padding: 10px; } #VBMinP{ grid-row: 1/2; grid-column: 1/2; line-height: 40px; } #VBMinul{ grid-row: 1/2; grid-column: 2/3; } #VBMinul li{ float: left; cursor: pointer; } #VBMinbkma{ margin-right: 20px; padding-left: 28px; width: 50px; height: 38px; background: url(img/VBMinbkma.png) no-repeat; background-size: 76px; border-right: 1px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; border-radius: 6px; line-height: 38px; } #VBMinbkma:active{opacity: 0.6;} #VBMinclose{ width: 40px; height: 40px; background: url(img/VBclose.png) no-repeat #fff; background-size: 40px; } #VBMincon{ width: 100%; height: calc( 100% - 120px ); background: #fafafa; overflow: hidden; } #VBMiCput{ margin-left: 0px; width: 300px; height: 100%; background: #ddd; } #VBMiCimg{ width: 100%; } #VBMinfooter{ display: grid; grid-template-rows: 40px; grid-template-columns: 40px 1fr 40px; padding: 10px; } #VBMinFP_L{ grid-row: 1/2; grid-column: 1/2; line-height: 40px; background: url(img/VBMinFP_L.png) no-repeat; background-size: 40px; cursor: pointer; } #VBMinFP_C{ grid-row: 1/2; grid-column: 2/3; line-height: 40px; text-align: center; } #VBMinFP_R{ grid-row: 1/2; grid-column: 3/4; background: url(img/VBMinFP_R.png) no-repeat; background-size: 40px; cursor: pointer; } #VBMinFP_L:active{opacity: 0.6;} #VBMinFP_R:active{opacity: 0.6;} #header{ position: fixed; top: 0px; left: 0px; padding: 12px 0px 20px 0px; width: 100%; height: 78px; z-index: 2000; } #Hicon{ margin-right: auto; margin-left: auto; width: 46px; height: 46px; cursor: pointer; } #Hicon1,#Hicon2,#Hicon3{display: none;} #Hicon0,#Hicon1,#Hicon2,#Hicon3{ width: 46px; height: 46px; border-radius: 6px; opacity: 0; animation: hianime 2s ease 0s 1 normal; } #Hicon0{background: #aab;} #Hicon1{background: #aaf;} #Hicon2{background: #f9a;} #Hicon3{background: #fba;} #Hicon1img,#Hicon2img,#Hicon3img{display: none;} #Hicon0img,#Hicon1img,#Hicon2img,#Hicon3img{ margin-top: -46px; width: 46px; height: 46px; } #Hicon0img{background: url(img/homeicon0.png) no-repeat;background-size: 46px;} #Hicon1img{background: url(img/homeicon1.png) no-repeat;background-size: 46px;} #Hicon2img{background: url(img/homeicon2.png) no-repeat;background-size: 46px;} #Hicon3img{background: url(img/homeicon3.png) no-repeat;background-size: 46px;} @keyframes hianime{ 0%{opacity: 1;} 100%{opacity: 0;} } #Hui{ padding-top: 4px; width: 100%; height: 20px; } #Huiul0{ margin-right: auto; margin-left: auto; width: 300px; height: 30px; } #Huiul0 li{ float: left; margin-right: 15px; width: 90px; height: 28px; line-height: 28px; cursor: pointer; } #Huiul0 li:first-child{background: url(img/Huili1.png) no-repeat;background-size: 90px;border-bottom: 2px solid #aaf;text-indent: 32px;} #Huiul0 li:nth-child(2){background: url(img/Huili2.png) no-repeat;background-size: 90px;border-bottom: 2px solid #f9a;text-indent: 30px;} #Huiul0 li:last-child{margin: 0px;background: url(img/Huili3.png) no-repeat;background-size: 90px;border-bottom: 2px solid #fba;text-indent: 32px;} #Huiul2{ display: none; margin-right: auto; margin-left: auto; width: 300px; height: 30px; } #Huiul2 li{ float: left; margin-right: 15px; width: 90px; height: 28px; line-height: 26px; text-align: center; cursor: pointer; } #Huiul2 li:first-child{border-bottom: 2px solid #eee;} #Huiul2 li:nth-child(2){border-bottom: 2px solid #eee;} #Huiul2 li:last-child{margin: 0px;border-bottom: 2px solid #eee;} #footer{ position: fixed; top: calc( 100% - 60px ); padding: 6px 0px; left: 0px; width: 100%; height: 47px; background: #fff; border-top: 1px solid #ddd; z-index: 3000; } #footerin{ margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); min-width: 298px; max-width: 898px; height: 46px; } #findiv{ display: grid; grid-template-rows: 46px; grid-template-columns: 56px 1fr 56px; } #findiv1{ grid-row: 1/2; grid-columns: 1/2; margin-left: 10px; background: url(img/findiv1.png) no-repeat;background-size: 46px; cursor: pointer; } #findiv1:active{opacity: 0.6;} #findiv2{ grid-row: 1/2; grid-columns: 2/3; line-height: 46px; } #findiv3{ grid-row: 1/2; grid-columns: 3/4; margin-right: 10px; background: #eaeaef; border-radius: 6px; } #fd3play{ width: 100%; height: 100%; background: url(img/play1.png) no-repeat; background-size: 46px; cursor: pointer; } #fd3pause{ display: none; width: 100%; height: 100%; background: url(img/pause1.png) no-repeat; background-size: 46px; cursor: pointer; } #fd3play:active,#fd3pause:active{opacity: 0.6;} #bgmbox{ display: none; position: fixed; top: 0px; left: 0px; width: 100vw; height: calc( 100% - 60px ); background: transparent; z-index: 3100; } #bgmboxin{ margin-right: auto; margin-left: auto; margin-top: 10px; width: calc( 100% - 22px ); min-width: 278px; max-width: 878px; height: calc( 100% - 80px ); border-right: 1px solid #aaa; border-left: 1px solid #aaa; border-radius: 6px 6px 0px 0px; overflow: hidden; } #bgmul{ width: 100%; height: 100%; background: #334; overflow-x: hidden; overflow-y: auto; } #bgmul li{ padding: 0px 20px; height: 49px; border-bottom: 1px solid #667; line-height: 49px; color: #fff; cursor: pointer; } #bgmul li:first-child{background: #223;} #bgmul li:last-child{border-bottom: 0px solid transparent;} #bgmboxbottom{ margin-right: auto; margin-left: auto; width: calc( 100% - 22px ); min-width: 278px; max-width: 878px; padding: 6px 0px; height: 46px; background: #334; border-right: 1px solid #aaa; border-bottom: 2px solid #aaa; border-left: 1px solid #aaa; border-radius: 0px 0px 6px 6px; opacity: 0.9; } #bbclose{ margin-left: calc( 50% - 23px ); width: 46px; height: 46px; background: url(img/bbclose.png) no-repeat; background-size: 46px; cursor: pointer; } #main{ width: 100vw; height: 100%; } #mainin1,#M2,#mainin2,#M3,#mainin3{display: none;} #mainin0,#mainin1,#M2,#mainin2,#M3,#mainin3{ margin-right: auto; margin-left: auto; padding-top: 110px; width: 100%; height: calc( 100% - 140px ); overflow: hidden; } #M1Aulhddn1{display: none;} #M01header{ margin-right: auto; margin-left: auto; margin-bottom: 10px; width: calc( 100% - 2px ); min-width: 298px; max-width: 898px; height: 200px; background: #ddd; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; } #M01himg1,#M01himg2,#M01himg3{ width: 100%; height: 200px; } #M01himg2,#M01himg3{ display: none; } #M01himg1{ background: #fdd; } #M01himg1cover{ position: absolute; width: calc( 100% - 2px ); min-width: 298px; max-width: 898px; height: 200px; z-index: 1100; overflow: hidden; } #M_1_ib2a{ position: absolute; width: 100%; height: 200px; background: url(homeimg/theme1/b2a.png); z-index: 1103; animation: M1ib2aanime1 4s ease 0s infinite alternate; } @keyframes M1ib2aanime1{ 0%{opacity: 0;} 100%{opacity: 1;} } #M_1_ib2b{ position: absolute; width: 100%; height: 200px; background: url(homeimg/theme1/b2b.png); z-index: 1104; opacity: 0; animation: M1ib2banime1 4s ease 2s infinite alternate; } @keyframes M1ib2banime1{ 0%{opacity: 0;} 100%{opacity: 1;} } #M_1_ic1a{ position: absolute; top: 0px; left: calc( 50% - 84px); width: 150px; height: 150px; background: url(homeimg/theme1/c1a.png) no-repeat; background-size: 150px; z-index: 1105; } #M_1_ic1b{ position: absolute; top: 20px; left: calc( 50% - 200px); width: 100px; height: 100px; background: url(homeimg/theme1/c1b.png) no-repeat; background-size: 100px; z-index: 1106; animation: M1ic1banime1 1s ease-out 0s 1 normal; } @keyframes M1ic1banime1{ 0%{left: calc( 50% - 50px);} 100%{left: calc( 50% - 200px);} } #M_1_ic1c{ position: absolute; top: 20px; left: calc( 50% + 60px); width: 150px; height: 150px; background: url(homeimg/theme1/c1c.png) no-repeat; background-size: 150px; z-index: 1107; animation: M1ic1canime1 1s ease-out 0s 1 normal; } @keyframes M1ic1canime1{ 0%{left: calc( 50% - 75px);} 100%{left: calc( 50% + 60px);} } #M_1_ic1d{ position: absolute; top: 80px; left: calc( 50% - 230px); width: 100px; height: 100px; background: url(homeimg/theme1/c1d.png) no-repeat; background-size: 100px; z-index: 1108; animation: M1ic1danime1 1s ease-in-out 0s 1 normal; } @keyframes M1ic1danime1{ 0%{left: calc( 50% - 50px);} 100%{left: calc( 50% - 230px);} } #M_1_ic1e{ position: absolute; top: 100px; left: calc( 50% + 150px); width: 100px; height: 100px; background: url(homeimg/theme1/c1e.png) no-repeat; background-size: 100px; z-index: 1109; animation: M1ic1eanime1 1s ease-in-out 0s 1 normal; } @keyframes M1ic1eanime1{ 0%{left: calc( 50% - 50px);} 100%{left: calc( 50% + 150px);} } #M_1_id1a{ position: absolute; top: 50px; left: calc( 50% - 250px); width: 50px; height: 50px; background: url(homeimg/theme1/d1a.png) no-repeat; z-index: 1110; animation: M1id1aanime1 1s ease 0s 1 normal; } @keyframes M1id1aanime1{ 0%{opacity: 0;} 80%{opacity: 0;} 100%{opacity: 1;} } #M_1_id1b{ position: absolute; top: 150px; left: calc( 50% + 250px); width: 50px; height: 50px; background: url(homeimg/theme1/d1b.png) no-repeat; z-index: 1111; animation: M1id1banime1 1s ease 0s 1 normal; } @keyframes M1id1banime1{ 0%{opacity: 0;} 80%{opacity: 0;} 100%{opacity: 1;} } #M_1_id2a{ position: absolute; top: 140px; left: calc( 50% - 300px); width: 50px; height: 50px; background: url(homeimg/theme1/d2a.png) no-repeat; z-index: 1112; animation: M1id2aanime1 1s ease 0s 1 normal; } @keyframes M1id2aanime1{ 0%{opacity: 0;} 90%{opacity: 0;} 100%{opacity: 1;} } #M_1_id2b{ position: absolute; top: 50px; left: calc( 50% + 200px); width: 50px; height: 50px; background: url(homeimg/theme1/d2b.png) no-repeat; z-index: 1113; animation: M1id2banime1 1s ease 0s 1 normal; } @keyframes M1id2banime1{ 0%{opacity: 0;} 90%{opacity: 0;} 100%{opacity: 1;} } #M_1_ich1a{ position: absolute; top: 10px; left: calc( 50% - 180px ); width: 200px; height: 200px; background: url(homeimg/theme1/ch1a.png) no-repeat; background-size: 200px; z-index: 1114; animation: M_1_ich1anime1 1s cubic-bezier( 0, 1.5, 0.5, 1) 0s 1 normal; } @keyframes M_1_ich1anime1{ 0%{top: -200px;} 100%{top: 10px;} } #M_1_ich2a{ position: absolute; top: -10px; right: calc( 50% - 180px ); width: 200px; height: 200px; background: url(homeimg/theme1/ch2a.png) no-repeat; background-size: 200px; z-index: 1115; animation: M_1_ich2anime1 1s cubic-bezier( 0, 1.5, 0.8, 1) 0s 1 normal; } @keyframes M_1_ich2anime1{ 0%{top: -200px;} 100%{top: -10px;} } #M01himg2{ background: #aaf; } #M01himg2cover{ position: absolute; width: calc( 100% - 2px ); min-width: 298px; max-width: 898px; height: 200px; z-index: 1100; overflow: hidden; } #M_2_ib2a{ position: absolute; width: 100%; height: 200px; background: url(homeimg/theme1/b2a.png); z-index: 1103; animation: M2ib2aanime1 4s ease 0s infinite alternate; } @keyframes M2ib2aanime1{ 0%{opacity: 0;} 100%{opacity: 1;} } #M01himg3{ background: #baf; } #M01himg3cover{ position: absolute; width: calc( 100% - 2px ); min-width: 298px; max-width: 898px; height: 200px; z-index: 1100; overflow: hidden; } #M_3_ib2a{ position: absolute; width: 100%; height: 200px; background: url(homeimg/theme1/b2a.png); z-index: 1103; animation: M3ib2aanime1 4s ease 0s infinite alternate; } @keyframes M3ib2aanime1{ 0%{opacity: 0;} 100%{opacity: 1;} } #M01hbar{ position: absolute; margin-top: -40px; padding: 10px 0px; width: calc( 100% - 2px ); min-width: 298px; max-width: 898px; height: 20px; background: url(img/transwhite60.png); z-index: 1900; } #M01hbarul{ padding-left: calc( 100% - 134px ); width: 124px; height: 20px; } #M01hbarul li{ float: left; margin-right: 6px; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; } #M01hbarul li:last-child{margin: 0px;} #M01hli1{background: #fdd;} #M01hli2{background: #fff;} #M01hli3{background: #fff;} #M01hli4{background: #fff;} #M01hli5{background: #fff;} #M01top{ margin-right: auto; margin-left: auto; padding: 10px; width: calc( 100% - 42px ); min-width: 278px; max-width: 878px; height: 100px; background: #fff; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; } #M01topimg{ width: 100%; height: 100px; background: url(img/prof.jpg) 10px 0px no-repeat; background-size: 100px; } #M01topimg p{ padding-top: 10px; padding-bottom: 6px; padding-left: 130px; width: calc( 100% - 130px ); } #socialul{ padding-left: 130px; width: calc( 100% - 130px ); height: 30px; } #socialul li{ float: left; margin-right: 6px; width: 60px; height: 24px; background: #667; border-bottom: 2px solid #334; border-radius: 4px; cursor: pointer; line-height: 24px; color: #fff; text-align: center; font-weight: bold; } #socialul li:last-child{margin: 0px;} #socialul li:hover{background: #334;} #socialicon1 a,#socialicon2 a{color: #fff;} #M01bottom{ margin-top: 10px; margin-right: auto; margin-left: auto; width: calc( 100% - 22px ); min-width: 298px; max-width: 898px; height: calc( 100% - 398px ); background: #fff; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; overflow-x: hidden; overflow-y: auto; } #M01bottomin{ display: grid; grid-gap: 2px; grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: #f6f6f6; } #M01bcalender{ padding: 20px; background: #fff; } #M01bulwrapp{ padding: 20px 20px; background: #fff; } #M01bul li{ padding: 20px 0px; height: 20px; line-height: 20px; border-bottom: 1px dotted #eee; text-indent: 24px; } #M01bul li:last-child{border-bottom: 0px solid transparent;} .category0{ background: url(img/category0.png) 0px 20px no-repeat; background-size: 20px; } .category1{ background: url(img/category1.png) 0px 20px no-repeat; background-size: 20px; } .category2{ background: url(img/category2.png) 0px 20px no-repeat; background-size: 20px; } .category3{ background: url(img/category3.png) 0px 20px no-repeat; background-size: 20px; } #M1A{ padding: 0px 10px; width: calc( 100% - 20px ); height: calc( 100% - 50px ); } #M1main{ margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); min-width: 278px; max-width: 878px; height: calc( 100% - 2px ); background: #fff; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; overflow: hidden; } #M1Aul{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; } #M1Aul li{ padding: 8px 10px; width: calc( 100% - 20px ); border-bottom: 2px solid #eee; } #M1Aul li:last-child{border: 0px solid transparent;} .M1AulliL{ float: left; width: 20px; height: 20px; background: #ddd; } .M1AulliL img{ width: 100%; width: 100%; } .M1AulliR{ padding-left: 30px; min-height: 50px; } .M1AulliR p{ padding-top: 10px; } #M2{ max-width: 1200px; } #M2link{ padding: 0px 10px; width: calc( 100% - 20px ); height: calc( 100% - 50px ); } #M2ul0{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-gap: 10px; width: 100%; height: 100%; } #M2ul0 li{ background: #fff; border-right: 1px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; border-radius: 6px; overflow: hidden; cursor: pointer; } #M2ul0 li:first-child{background: #f9a;} #M2ul0 li:nth-child(2){background: #fab;} #M2ul0 li:last-child{background: #fbc;} #M2ul0li1,#M2ul0li2,#M2ul0li3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); width: 100%; height: 100%; } #M2ul0li1 h3,#M2ul0li2 h3,#M2ul0li3 h3{ padding: 20px 20px 10px 20px; color: #fff; } #M2ul0li1 p,#M2ul0li2 p,#M2ul0li3 p{ padding: 10px 20px 0px 20px; color: #fff; } #M2ul01R{background: url(img/M2ul01R_1_mask.jpg) no-repeat center;} #M2ul02R{background: url(img/M2ul02R_1_mask.jpg) no-repeat center;} #M2ul03R{background: url(img/M2ul03R_1_mask.jpg) no-repeat center;} #M2B,#M2C{display: none;} #M2A,#M2B,#M2C{ width: 100%; height: calc( 100% - 50px ); } .imghddn{display: none;} #M2ul1,#M2ul2,#M2ul3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; padding: 0px 20px; width: calc( 100% - 40px ); height: 100%; overflow-x: hidden; overflow-y: auto; } #M2ul1 li,#M2ul2 li,#M2ul3 li{ padding: 8px; background: #fff; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; } #M2ul1 img,#M2ul2 img,#M2ul3 img{ width: 100%; height: 200px; object-fit: cover; border-radius: 6px; } #M3{ max-width: 1200px; } #M3link{ padding: 0px 10px; width: calc( 100% - 20px ); height: calc( 100% - 50px ); } #M3ul0{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-gap: 10px; width: 100%; height: 100%; } #M3ul0 li{ background: #fff; border-right: 1px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; border-radius: 6px; overflow: hidden; cursor: pointer; } #M3ul0 li:first-child{background: #fba;} #M3ul0 li:nth-child(2){background: #fcb;} #M3ul0 li:last-child{background: #fdc;} #M3ul0li1,#M3ul0li2,#M3ul0li3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); width: 100%; height: 100%; } #M3ul0li1 h3,#M3ul0li2 h3,#M3ul0li3 h3{ padding: 20px 20px 10px 20px; color: #fff; } #M3ul0li1 p,#M3ul0li2 p,#M3ul0li3 p{ padding: 10px 20px 0px 20px; color: #fff; } #M3ul01R{background: url(img/M3ul01R_1_mask.jpg) no-repeat center;} #M3ul02R{background: url(img/M3ul02R_1_mask.jpg) no-repeat center;} #M3ul03R{background: url(img/M3ul03R_1_mask.jpg) no-repeat center;} #M3A{ padding: 0px 10px; width: calc( 100% - 20px ); height: calc( 100% - 50px ); } #M3mainA{ margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); min-width: 278px; max-width: 878px; height: calc( 100% - 2px ); background: #fff; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; overflow: hidden; } #M3mA_header{ width: 100%; height: 160px; background: #558; } #M3AHinfo{ padding: 20px 20px 0px 20px; width: 238px; height: 70px; color: #fff; overflow: hidden; } #M3mAinfobu{ margin-top: 10px; margin-left: 20px; width: 238px; height: 40px; background: url(img/transwhite20.png); border-radius: 6px; cursor: pointer; } #M3mAinfobu p{ width: 238px; height: 40px; line-height: 40px; text-align: center; background: url(img/M3mAinfobu.png) no-repeat 10px 0px; background-size: 40px; color: #fff; } #M3mA_NEW{ display: grid; grid-template-rows: 76px; grid-template-columns: 58px 1fr 110px; border-bottom: 4px solid #eee; } #M3ANEWL{ grid-row: 1/2; grid-column: 1/2; border-right: 3px double #eee; border-radius: 6px 0px 0px 0px; font-size: 14pt; font-weight: bold; line-height: 76px; text-align: center; } #M3ANEWR{ grid-row: 1/2; grid-column: 2/3; padding-left: 10px; } #M3ANEWR h6{ padding-top: 10px; } #M3ANEWR p{ padding-top: 6px; font-size: 14pt; } #M3ANEWbu{ grid-row: 1/2; grid-column: 3/4; margin: 10px 10px 10px 0px; background: url(img/M3ANEWbu.png) no-repeat #ca6a60; background-size: 100px; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; font-size: 14pt; font-weight: bold; line-height: 54px; text-indent: 2.4em; cursor: pointer; } #M3Aul{ width: 100%; height: calc( 100% - 240px ); overflow-x: hidden; overflow-y: auto; } #M3Aul li{ display: grid; grid-template-rows: 60px; grid-template-columns: 50px 1fr 70px; padding: 10px 0px; border-bottom: 2px solid #eee; } #M3Aul li:last-child{border: 0px solid transparent;} .M3AulliH{ grid-row: 1/2; grid-column: 1/4; padding-left: 20px; font-size: 18pt; line-height: 60px; } .M3AulliL{ grid-row: 1/2; grid-column: 1/2; border-right: 1px solid #eee; line-height: 60px; font-weight: bold; text-align: center; } .M3AulliR{ grid-row: 1/2; grid-column: 2/3; padding-top: 10px; padding-left: 10px; } .M3AulliR p{ padding-top: 4px; } .M3btn{ grid-row: 1/2; grid-column: 3/4; margin: 10px 18px 8px 0px; background: url(img/M3read.png) no-repeat; background-size: 50px; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; } .M3read{ width: 100%; height: 100%; background: transparent; border-radius: 6px; color: #fff; cursor: pointer; } .M3read:active{background: #ca6a60;opacity: 0.2;} .M3AHIDN{display: none;opacity: 0;} #M3mainB{ display: none; margin-right: auto; margin-left: auto; width: calc( 100% - 2px ); min-width: 278px; max-width: 878px; height: calc( 100% - 2px ); background: #fff; border-right: 1px solid #eee; border-bottom: 2px solid #eee; border-left: 1px solid #eee; border-radius: 6px; overflow: hidden; } #guard{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: transparent; opacity: 0.8; z-index: 9000; } #guardin{ margin-right: auto; margin-left: auto; margin-top: calc( 50vh - 50px ); width: 100px; height: 100px; } #giicon1{ width: 62px; height: 62px; border: 19px dashed #eee; border-radius: 50%; transform: rotate(45deg); } #giicon2{ margin-top: -19px; margin-left: -19px; width: 62px; height: 62px; border: 19px dashed #ddd; border-radius: 50%; animation: ganime 3s ease 0s infinite normal; } @keyframes ganime{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }



#Hnotice{ position: fixed; padding: 4px; top: 10px; right: 10px; width: 90px; height: 36px; background: #aab; border: 2px solid #dde; border-radius: 6px; color: #fff; z-index: 2000;
  cursor: pointer;
}
#Hnotice p{ color: #fff; text-align: center; }
#Hnotice p:first-child{ font-size: 8pt; }
#Hnotice p:nth-child(2){ font-size: 12pt; }
#Hnoticeview{
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('/img/transwhite80.png') 0px 0px;
  z-index: 4500;
  overflow: hidden;
}
#HVheader{
  display: grid;
  grid-template-columns: 1fr 100px 46px;
  margin-right: auto;
  margin-left: auto;
  padding: 5px 0px;
  width: calc( 100% - 20px );
  max-width: 988px;
  height: 46px;
  background: #fff;
}
#HVh1{
  grid-column: 1/2;
  grid-row: 1/2;
}
#HVFONT{
  grid-column: 2/3;
  grid-row: 1/2;
  cursor: pointer;
}
#HVFONTui{
  display: none;
}
#HVCLOSE{
  grid-column: 3/4;
  grid-row: 1/2;
  background: url('/img/VBclose.png') 0px 0px no-repeat;
  background-size: 46px;
  background-position: right;
  cursor: pointer;
}
#HVIN{
  display: flex;
  padding: 100px 10px 0px 10px;
  width: calc( 100% - 20px );
  justify-content: center;
}
video{
  width: 100%;
  max-width: 580px;
}
#HVbottom,#HVbottomOPEN{
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: calc( 100% - 22px );
  max-width: 578px;
  height: 100px;
  background: url('/img/transwhite60.png') 0px 0px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #aaf;
  color: #aaf;
  cursor: pointer;
}
#HVbottomOPEN{
  display: none;
}


#HVbox1{
  height: calc( 100% - 56px );
}
#HVbox2{
  display: none;
  margin-right: auto;
  margin-left: auto;
  width: calc( 100% - 20px );
  max-width: 988px;
  height: calc( 100% - 56px );
  background: #fff;
}
#HVbox2W1{
  width: 100%;
  height: 100%;
}
#HVbox2W1ul{
  margin-bottom: 10px;
  height: calc( 100% - 60px );
  overflow-x: hidden;
  overflow-y: auto;
}
#HVbox2W1ul li{
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #eef;
}
#HVbox2W1ul li:last-child{border-bottom: 0px solid #eef;}
.noupimg{
  height: 200px;
  background: #eee;
}
#HVbox2W1ul h1{
  padding: 10px 0px;
  font-size: 18pt;
}
#HVbox2W1ul h5{
  height: 40px;
  line-height: 40px;
}
.noupdNORMAL{
  padding-right: 10px;
  font-size: 12pt;
}
.noupd1{
  margin-right: 4px;
  padding: 10px;
  width: 80px;
  height: 20px;
  background: #aaf;
  font-size: 10pt;
  color: #fff;
  border-radius: 6px;
}
.noupd2{
  width: 100px;
  font-size: 10pt;
  color: #aab;
  border-radius: 50px;
}
#HVbox2W1ul p{
  padding: 10px;
}
.readui{
  width: 100%;
  height: 40px;
}
.readstyle1{
  float: right;
  width: 100px;
  height: 40px;
  background: url('img/readui.png') no-repeat 0px 0px #fff;
  background-size: 98px;
  border-top: 1px solid #aaf;
  border-right: 1px solid #6e64f0;
  border-bottom: 3px solid #6e64f0;
  border-left: 1px solid #6e64f0;
  color: #6e64f0;
  font-size: 12pt;
  font-weight: bold;
  text-indent: 1em;
}
.readstyle1:hover{
  background: url('img/readui.png') no-repeat 0px 0px #eef;
  background-size: 98px;
  border-top: 3px solid #6e64f0;
  border-right: 1px solid #6e64f0;
  border-bottom: 1px solid #aaf;
  border-left: 1px solid #6e64f0;
}
.readstyle1:focus{
  background: url('img/readui.png') no-repeat 0px 0px #aaf;
  background-size: 98px;
  border-top: 3px solid #6e64f0;
  border-right: 1px solid #6e64f0;
  border-bottom: 1px solid #aaf;
  border-left: 1px solid #6e64f0;
}
#HVulclose{
  height: 40px;
  width: 100%;
}

#HVbox2W2{
  display: none;
  width: 100%;
  height: 100%;
}
#HVb2profui2{
  position: absolute;
  top: 8px;
  margin-left: min( calc( 100% - 270px ) ,738px);
  max-width: 788px;
  width: 200px;
  height: 40px;
  z-index: 4540;
}
#HVb2proflink{
  background: #fff;
  border-top: 1px solid #aaf;
  border-right: 1px solid #6e64f0;
  border-bottom: 3px solid #6e64f0;
  border-left: 1px solid #6e64f0;
  color: #6e64f0;
  font-size: 12pt;
  font-weight: bold;
}
#HVb2proflink:hover{
  background: #eef;
  border-top: 3px solid #6e64f0;
  border-right: 1px solid #6e64f0;
  border-bottom: 1px solid #aaf;
  border-left: 1px solid #6e64f0;
}
#HVb2proflink:focus{
  background: #aaf;
  border-top: 3px solid #6e64f0;
  border-right: 1px solid #6e64f0;
  border-bottom: 1px solid #aaf;
  border-left: 1px solid #6e64f0;
}
#HVb2chara001{
  position: absolute;
  margin-top: -110px;
  margin-left: min( calc( 100% - 200px ) ,848px);
  max-width: 988px;
  width: 80px;
  height: 100px;
  background: url('character/001a.png');
  background-size: 80px;
  cursor: pointer;
  z-index: 4551;
}
#HVb2chara002{
  position: absolute;
  margin-top: -110px;
  margin-left: min( calc( 100% - 120px ) ,928px);
  max-width: 988px;
  width: 80px;
  height: 100px;
  background: url('character/002a.png');
  background-size: 80px;
  cursor: pointer;
  z-index: 4552;
}
#HVbox2W2 h2{
  padding-left: 20px;
  height: 50px;
  line-height: 50px;
}
#HVbox2W2 h4{
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
#HVNs{
  padding: 0px 20px;
  margin-bottom: 10px;
  width: calc( 100% - 40px );
  height: calc( 100% - 110px );
  overflow-x: hidden;
  overflow-y: auto;
}
#Nsummary{
  padding-bottom: 40px;
}
.HVN{
  padding-bottom: 20px;
}
.HVN:last-child{padding: 0px;}
.HVN li{
  padding: 10px 0px;
  cursor: pointer;
}
.HVN li:hover{
  font-weight: bold;
}
.HVN p{
  display: none;
}
#HVNh3close{
  height: 40px;
  width: 100%;
}
#HVb2profile{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4590;
}
#HVb2pclose{
  padding: 5px 0px 14px 0px;
  height: 46px;
  width: 100%;
}
#hvb2pui{
  float: right;
  margin-right: 10px;
  width: 46px;
  height: 46px;
  background: url('/img/hvb2pui.png') 0px 0px no-repeat;
  background-size: 46px;
}
#profWRAPP{
  height: calc( 100% - 100px );
  padding: 0px 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
#profUL{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-template-rows: auto;
  grid-gap: 20px;
}
#profUL li{
  padding-bottom: 10px;
  border: 1px solid #eee;
}
.profimg{
  margin-bottom: 10px;
  width: 100%;
  height: 100px;
}
.profimg div{
  width: 100%;
  height: 100px;
  background: url('prof/prof1/n1.jpg') 0px 0px no-repeat #eef;
  background-size: 240px 100px;
  background-position: center;
}
.pfI1{
  margin: 0px 20px;
  font-size: 10pt;
  border-bottom: 1px dotted #dde;
  color: #556;
}
.pfC1{
  padding: 0px 30px 20px 30px;
  font-size: 12pt;
  font-weight: bold;
}
.pfC2{padding: 20px;}

#HVbox3{
  display: none;
  margin-right: auto;
  margin-left: auto;
  width: calc( 100% - 20px );
  max-width: 988px;
  height: calc( 100% - 56px );
  background: #fff;
}
#HVbox3 h4{
  padding-left: 20px;
  height: 54px;
  line-height: 44px;
}
#HVbox3 h6{
  padding-left: 20px;
  height: 26px;
  line-height: 26px;
}
#HVbox3in{
  position: relative;
  padding: 0px 20px;
  margin-bottom: 10px;
  width: calc( 100% - 40px );
  height: calc( 100% - 140px );
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 4601;
}
#HVb3view{
  padding-bottom: 100px;
}
.bodytext{
  font-size: 14pt;
  line-height: 1.8em;
}
.furigana1{
  position: absolute;
  font-size: 10pt;
  transform: scale(0.7);
  margin-top: -14px;
  z-index: 4603;
}

#HVb3ui{
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  height: 40px;
  width: 100%;
}
#HVb3ui1{
  grid-column: 1/2;
  grid-row: 1/2;
}
#HVb3ui2{
  grid-column: 2/3;
  grid-row: 1/2;
}
#HVb3ui3{
  grid-column: 3/4;
  grid-row: 1/2;
}
#HVb3preview{
  border-radius: 6px 0px 0px 6px;
}
#HVb3center{
  border-radius: 0px;
  border-right: 4px solid #fafafa;
  border-left: 4px solid #fafafa;
  background: #f6f6f6;
}
#HVb3center:hover{
  background: #eaeaea;
}
#HVb3next{
  border-radius: 0px 6px 6px 0px;
}



#HVFONTview{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url('/img/transwhite60.png') 0px 0px;
  z-index: 4700;
  overflow: hidden;
}
#HVFONTviewA{
  display: grid;
  margin-top: calc( 100vh - 260px );
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 40px 60px 50px;
  grid-row-gap: 20px;
  width: calc( 100% - 60px );
  max-width: 940px;
  border-radius: 6px;
  background: #334;
}
#fontsizeP{
  grid-column: 1/6;
  grid-row: 1/2;
  font-size: 16pt;
  color: #fff;
  line-height: 40px;
}
#fontsize1{
  grid-column: 1/2;
  grid-row: 2/3;
}
#fontsize2{
  grid-column: 2/3;
  grid-row: 2/3;
}
#fontsize3{
  grid-column: 3/4;
  grid-row: 2/3;
}
#fontsize4{
  grid-column: 4/5;
  grid-row: 2/3;
}
#fontsize5{
  grid-column: 5/6;
  grid-row: 2/3;
}
#HVFONTvAbottom{
  grid-column: 1/6;
  grid-row: 3/4;
}
#fsize1,#fsize2,#fsize4,#fsize5{
  background: transparent;
  color: #aab;
}
#fsize1{
  font-size: 10pt;
  border-top: 1px solid #667;
  border-right: 1px solid #667;
  border-bottom: 1px solid #667;
  border-left: 1px solid #667;
  border-radius:6px 0px 0px 6px;
}
#fsize2{
  font-size: 12pt;
  border-top: 1px solid #778;
  border-right: 1px solid #778;
  border-bottom: 1px solid #778;
  border-radius: 0px;
}
#fsize3{
  font-size: 14pt;
  background: #fff;
  color: #334;
  border-top: 1px solid #889;
  border-right: 1px solid #889;
  border-bottom: 1px solid #889;
  border-radius: 0px;
}
#fsize4{
  font-size: 16pt;
  border-top: 1px solid #99a;
  border-right: 1px solid #99a;
  border-bottom: 1px solid #99a;
  border-radius: 0px;
}
#fsize5{
  font-size: 18pt;
  border-top: 1px solid #aab;
  border-right: 1px solid #aab;
  border-bottom: 1px solid #aab;
  border-radius: 0px 6px 6px 0px;
}
#fsize1:hover,#fsize2:hover,#fsize3:hover,#fsize4:hover,#fsize5:hover,#fsize1:focus,#fsize2:focus,#fsize3:focus,#fsize4:focus,#fsize5:focus{
  background: #fff;
  color: #334;
}
#HVFONTCLOSE{
  background: #445;
  color: #fff;
}
#HVFONTCLOSE:hover,#HVFONTCLOSE:focus{
  border-top: 2px solid #223;
  border-bottom: 1px solid #445;
}

#xxxDIV{
  display: none;
}