/* 共通部設定 */ body { margin-top:0; } .box { background-color:rgba(211,211,211,.12); } /* メインコンテンツ フッター　ウィンドウ　フェードイン(js用) */ .fade-up1 { transition: all 1.5s; -moz-transition: all 1.5s; -webkit-transition: all 1.5s; -o-transition: all 1.5s; /* transition: transform 0.7s; -moz-transition: transform 0.7s; -webkit-transition: transform 0.7s; -o-transition: transform 0.7s; */ } .fade-up2 { transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; /* transition: transform 0.7s; -moz-transition: transform 0.7s; -webkit-transition: transform 0.7s; -o-transition: transform 0.7s; */ } .fade-up4 { transition: all 1.8s; -moz-transition: all 1.8s; -webkit-transition: all 1.8s; -o-transition: all 1.8s; /* transition: transform 0.7s; -moz-transition: transform 0.7s; -webkit-transition: transform 0.7s; -o-transition: transform 0.7s; */ } .fade-up-ontop1 { animation:topbox1 1.7s forwards; } .fade-up-ontop2 { animation:topbox2 2.7s forwards; } @keyframes topbox1 { 0% { transform: translateY(400px); opacity:0; } 100% { transform: translateY(0); opacity:1; } } @keyframes topbox2 { 0% { transform:translateY(70px); opacity:0; } 100% { transform:translateY(0); opacity:1; } } #youtube { background-color:rgba(246, 255, 121, 0.048); text-align:center; opacity:0.9; } #youtube_wrap { padding:20px 0 20px 0; margin-top:20px; background-color:rgba(246, 255, 121, 0.048); } .bx-wrapper { border:none; background-color:rgba(246, 255, 121, 0.048); margin-bottom:1%; } .youtube_1 { width:100%; aspect-ratio: 16 / 9; max-width:640px; } #dl_counter p { padding-left:0; } #youtube_sp { display: none; } /* レスポンシブ設定 */ /* PC用 [w>=950] */ @media (min-width: 950px) { body { font-size:1rem; } .box { border:1px solid rgba(255,255,255,.5); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } /* メインコンテンツ部 */ .master2 { width:88vw; margin-right:auto; margin-left:auto; } /* メインコンテンツ部 背景透明レイヤー */ .border { background-color:rgba(14, 31, 185, 0.151); width:100%; position:relative; z-index:5; right:0; left:0; } /* header height:75px */ #border1 { padding-top:234px; padding-bottom:200px; display: flex; align-items: center; } #border2 { margin-top:100vh; padding-top:200px; padding-bottom:200px; } /* メインコンテンツ１ */ /* border1の上下マージン:80px, ボックス間マージン:300px main1-listマージン:60px */ h1 { border-left:10px solid rgb(17, 218, 191); line-height:1; font-size:2rem; padding-left:10px; margin-left:40px; } #main1 p { padding-left:5px; } #main1 p:nth-child(5) { padding-bottom:30px; } #ex { padding-bottom:0!important; } #container1 { padding:30px 15px; width:82vw; margin-top:30px; margin-right:auto; margin-left:auto; } #container2 { padding:40px 40px; width:82vw; margin-top:30px; margin-right:auto; margin-left:auto; } /* メインボックス１ height:732px */ #tableheader { text-align:center; } #main1 { position:relative; z-index:99; padding:60px 0px; } #list { margin-right:auto; margin-left:auto; } #list,tr,th,td { border:1px solid rgba(207, 255, 245, 0.767); background-color:rgba(255, 255, 255, 0.034); } th,td { padding:18px 10px; vertical-align:middle; } th { text-align:left; } td { text-align:center; } #tableheader,.tabledate { padding:2px 20px; background-color:rgba(185, 255, 243, 0.521); } #main2 { position:relative; z-index:98; padding:60px 0px 90px 0px; } #music_title_sp { display:none; } #vocaroid { margin-top:60px; margin-bottom:30px; padding-top:9px; } #vocaroid_container { padding:30px 15px; width:82vw; margin-top:30px; margin-right:auto; margin-left:auto; padding-bottom:60px; } #player { width:60vw; height:100%; aspect-ratio:16/9; margin-top:10px; margin-right:auto; margin-left:auto; margin-bottom:10px; } #vocaroid_container p { text-align:center; font-size:1.2rem; } #vocaroid_container h3 { text-align:center; font-size:1.5rem; } #vocaroid_container iframe { display: flex; } #dl_count { padding:0px 5px; } /* スライドメニュー設定 */ #navToggle_sp { top:150px; right:3.7%; } } @media (max-width: 1080px) { td:nth-child(3) { display:none; } } /* レスポンシブ設定 */ /* PC用 [w>=769] */ @media screen and (max-width: 949px) and (min-width: 769px) { body { font-size:1rem; } .master2 { margin-right:auto; margin-left:auto; } .box { border:1px solid rgba(255,255,255,.5); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } .border { background-color:rgba(14, 31, 185, 0.151); width:100%; position:relative; z-index:5; right:0; left:0; } #border1 { padding-top:10%; padding-bottom:10%; } #border2 { margin-top:100vh; padding-top:10%; padding-bottom:10%; } #main1 { position:relative; z-index:99; padding:5% 3%; margin-top:10%; } #container1 { padding:4% 1.5%; margin-top:4%; } #container2 { padding:6% 6%; margin-top:4%; margin-right:auto; margin-left:auto; } h1 { border-left:1.5vw solid rgb(17, 218, 191); line-height:1; font-size:2rem; padding-left:1.5%; margin-left:1.8%; } #main1 p { padding-left:5px; font-size:0.95rem; } #main1 p:nth-child(5) { padding-bottom:4%; } #ex { padding-bottom:0!important; } /* メインボックス１ height:732px */ #list { margin-right:auto; margin-left:auto; width:96%; font-size:1.5vw; } #list,tr,th,td { border:1px solid rgba(207, 255, 245, 0.767); background-color:rgba(255, 255, 255, 0.034); } th,td { padding:1% 2%; vertical-align:middle; } th { text-align:left; width:35%; } td { text-align:center; width:50%; } #tableheader,.tabledate { padding:.2% 2%; background-color:rgba(185, 255, 243, 0.521); } #main2 { position:relative; z-index:98; padding:4% 3%; } #music_title_sp { text-align:left; font-size:1.2rem; padding-top:1.5%; padding-bottom:1.5%; } #music_title_pc { display:none; } #tablerow { display:none; } td:not(:nth-child(3n+2)) { display:none; } #jplayer { padding-top:1.2%; padding-bottom:1.2%; width:70%; } #dl { font-size:1.2rem; background-color:rgba(39, 22, 82, 0.09); width:18%; } #vocaroid { margin-top:11%; margin-bottom:4%; padding-top:1.1%; } #vocaroid_container { padding:4% 1.5%; margin-top:4%; padding-bottom:8%; } #player { width:70vw; height:100%; aspect-ratio:16/9; margin-top:10px; margin-right:auto; margin-left:auto; margin-bottom:10px; } #vocaroid_container p { text-align:center; font-size:1.2rem; } #vocaroid_container h3 { text-align:center; font-size:1.5rem; } #vocaroid_container iframe { display: flex; } #dl_counter { display:table-cell; } /* スライドメニュー設定 */ #navToggle_sp { top:150px; right:3.7%; } } /* タブレット１ [768>w>=640] */ @media screen and (max-width: 768px) and (min-width: 601px) { body { font-size:1rem; } .master2 { margin-right:auto; margin-left:auto; } .box { border:1px solid rgba(255,255,255,.5); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } .border { background-color:rgba(14, 31, 185, 0.151); width:100%; position:relative; z-index:5; right:0; left:0; } #border1 { padding-top:10%; padding-bottom:10%; } #border2 { margin-top:100vh; padding-top:10%; padding-bottom:10%; } #main1 { position:relative; z-index:99; padding:5% 2%; margin-top:10%; } #container1 { padding:4% 1.5%; margin-top:4%; } #container2 { padding:6.5% 6.5%; margin-top:4%; } h1 { border-left:1.5vw solid rgb(17, 218, 191); line-height:1; padding-left:1.5%; margin-left:1.8%; font-size:1.8rem; } #main1 p { padding-left:5px; font-size:0.9rem; } #main1 p:nth-child(5) { padding-bottom:4%; } #ex { padding-bottom:0!important; } /* メインボックス１ height:732px */ #list { margin-right:auto; margin-left:auto; width:96%; font-size:1.5vw; } #list,tr,th,td { border:1px solid rgba(207, 255, 245, 0.767); background-color:rgba(255, 255, 255, 0.034); } th,td { padding:1% 2%; vertical-align:middle; } th { text-align:left; width:35%; } td { text-align:center; width:50%; } #tableheader,.tabledate { padding:.2% 2%; background-color:rgba(185, 255, 243, 0.521); } #main2 { position:relative; z-index:98; padding:4% 2%; } #music_title_sp { text-align:left; font-size:1rem; padding-top:1.5%; padding-bottom:1.5%; } #music_title_pc { display:none; } #tablerow { display:none; } td:not(:nth-child(3n+2)) { display:none; } #jplayer { padding-top:1.2%; padding-bottom:1.2%; width:70%; } #dl { font-size:1.2rem; background-color:rgba(39, 22, 82, 0.09); width:18%; } #vocaroid { margin-top:10%; margin-bottom:4%; padding-top:1.1%; } #vocaroid_container { padding:4% 1.5%; margin-top:4%; padding-bottom:8%; } #player { width:75vw; height:100%; aspect-ratio:16/9; margin-top:15px; margin-right:auto; margin-left:auto; margin-bottom:15px; } #vocaroid_container p { text-align:center; font-size:1.2rem; } #vocaroid_container h3 { text-align:center; font-size:1.5rem; } #vocaroid_container iframe { display: flex; } #dl_counter { display:table-cell; } /* スライドメニュー設定 */ #navToggle_sp { top:150px; right:3.7%; } } /* タブレット２ [639>w>=481] */ /* スマホ [480>=w] */ @media (max-width: 600px) { body p { font-size:1rem; } .master2 { width:98%; margin-right:auto; margin-left:auto; } .box { border:1px solid rgba(255,255,255,.5); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } .border { background-color:rgba(14, 31, 185, 0.151); width:100%; position:relative; z-index:5; right:0; left:0; } #border1 { padding-top:10%; padding-bottom:10%; } #border2 { margin-top:100vh; padding-top:10%; padding-bottom:10%; } #main1 { position:relative; z-index:99; padding:5% 2%; margin-top:15%; } #container1 { padding:2% 2% 8% 2%; margin-top:5%; } #container2 { padding:2% .5% 8% .5%; margin-top:4%; } h1 { border-left:1.5vw solid rgb(17, 218, 191); line-height:1; padding-left:1.5%; margin-left:1.8%; margin-top:2%; font-size:1.45rem; } #main1 p { font-size:0.8rem; padding-left:5px; } #main1 p:first-child { padding-top:4%; } #main1 p:nth-child(5) { padding-bottom:8%; } #ex { padding-bottom:0!important; } /* メインボックス１ height:732px */ #list { margin-right:auto; margin-left:auto; width:98%; } #list,tr,th,td { border:1px solid rgba(207, 255, 245, 0.767); background-color:rgba(255, 255, 255, 0.034); } th,td { padding:1% 1%; vertical-align:middle; } th { text-align:left; width:100%; } td { text-align:center; width:80%; } td:nth-child(5) { width:20%; } #tableheader,.tabledate { padding:.2% 1%; background-color:rgba(185, 255, 243, 0.521); } #main2 { position:relative; z-index:98; padding:2% 2% 5% 2%; } #main2 h1 { margin-top:6%; } #tablerow { display:none; } td:not(:nth-child(3n+2)) { display:none; } #container2 { padding:6% 2%; margin-top:6%; } #container2 p { padding:2.2% 3.5% 3.5% 3.5%; } #container2 h3 { padding-left:3%; } #music_title_sp { text-align:left; font-size:1rem; padding-top:3%; padding-bottom:3%; padding-left:2%; } #music_title_pc { display:none; } #jplayer { padding-top:3%; padding-bottom:3%; width:70%; } #dl { font-size:3.5vw; background-color:rgba(39, 22, 82, 0.09); } #vocaroid { margin-top:12%; margin-bottom:4%; padding-top:1.1%; } #vocaroid_container { padding:7% 3.5% 3.5% 3.5%; margin-top:4%; padding-bottom:12%; } #player { width:85vw; height:100%; aspect-ratio:16/9; margin-top:15px; margin-right:auto; margin-left:auto; margin-bottom:15px; } #vocaroid_container p { text-align:center; font-size:0.95rem; } #vocaroid_container h3 { text-align:center; font-size:1.2rem; } #vocaroid_container iframe { display: flex; } #dl_counter { display:table-cell; } /* tr:nth-child(4n-2) { background-color:rgba(173, 157, 255, 0.153); } tr:nth-child(4n) { background-color:rgba(12, 31, 15, 0.18); } tr:nth-child(4n-1) { background-color:rgba(173, 157, 255, 0.153); } tr:nth-child(4n-3) { background-color:rgba(12, 31, 15, 0.18); } */ } /* フルHD */ @media (min-width: 1301px) { .master2 { width:1440px; } #border1 { padding-top:300px; padding-bottom:300px; display: flex; align-items: center; width:100%; } #container1 { width:1320px; margin-right:auto; margin-left:auto; } #tableheader { text-align:center; } th,td { padding:18px 40px; vertical-align:middle; } /* #dl_count { padding:0px 5px; } 本番環境で要検証 */ #vocaroid_container { padding-bottom:50px; width:1320px; margin-right:auto; margin-left:auto; } #player { width:45vw; height:100%; aspect-ratio:16/9; margin-top:10px; margin-right:auto; margin-left:auto; margin-bottom:10px; } #vocaroid_container p { text-align:center; font-size:1.2rem; } #vocaroid_container h3 { text-align:center; font-size:1.5rem; } #vocaroid_container iframe { display: flex; } #border2 { margin-top:1080px; padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #container2 { width:1100px; margin-right:auto; margin-left:auto; padding:40px 40px; } /* スライドメニュー設定 */ #navToggle_pc { top:150px; right:4.7%; } } @media (min-width: 1201px) { #navToggle_pc { top:150px; right:4.7%; } } /* WQHD */ @media (min-width: 1921px) { .box { border:1.5px solid rgba(200, 255, 246, 0.541); border-radius:40px; } p { font-size:1.5rem; } /* メインコンテンツ部 */ .master2 { width:1920px; } #border1 { padding-top:300px; padding-bottom:300px; display: flex; align-items: center; width:100%; } #main1 { margin-top:150px; padding:100px 20px; } h1 { border-left:15px solid rgb(17, 218, 191); line-height:1; padding-left:20px; margin-left:60px; font-size:3.2rem; } #main1 p { padding-left:5px; } #main1 p:nth-child(5) { padding-bottom:50px; } #container1 { padding:30px 30px; width:1800px; margin-top:60px; margin-right:auto; margin-left:auto; } #list,tr,th,td { border:1.5px solid rgba(207, 255, 245, 0.767); font-size:1.6rem; } #tableheader { text-align:center; } th,td { padding:20px 35px; vertical-align:middle; } /* #dl_count { padding:0px 5px; } 本番環境で要検証 */ #vocaroid { margin-top:110px; margin-bottom:50px; padding-top:12px; } #vocaroid_container { padding:50px 50px 100px 50px; width:1800px; margin-top:70px; margin-right:auto; margin-left:auto; } #player { width:48vw; height:100%; aspect-ratio:16/9; margin-top:20px; margin-right:auto; margin-left:auto; margin-bottom:20px; } /* #vocaroid_container p:first-of-type { text-align-last:left; font-size:2.3rem; } */ #vocaroid_container p { text-align:center; font-size:1.8rem; } #vocaroid_container h3 { text-align:center; font-size:2.2rem; } #vocaroid_container iframe { display: flex; } #border2 { margin-top:1440px; padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #main2 { padding:100px 20px; } #container2 { width:1600px; margin-right:auto; margin-left:auto; margin-top:60px; padding:60px 60px; } #container2 h3 { font-size:1.8rem; } /* スライドメニュー設定 */ #nav_sp { font-size:3.5rem; } #nav_sp ul li:first-child { padding-top:25%; } #navToggle_pc { width:48px; height:120px; } #navToggle_pc span { height:4px; width:60px; } #menu_span1 { transform:translateX(21px) translateY(58px) rotate(90deg); } #menu_span2 { transform:translateX(8px) translateY(58px) rotate(90deg); } #menu_span3 { transform:translateX(-6px) translateY(58px) rotate(90deg); } #navToggle_pc { top:250px; } } /* WQHD 縦画面 */ @media screen and (min-width: 1440px) and (min-height: 2100px) { .master2 { width:88vw; margin-right:auto; margin-left:auto; } #container1 { padding:30px 15px; width:82vw; margin-top:30px; margin-right:auto; margin-left:auto; } #container2 { padding:40px 40px; width:82vw; margin-top:30px; margin-right:auto; margin-left:auto; } /* メインボックス１ height:732px */ #tableheader { text-align:center; } #main1 { position:relative; z-index:99; padding:60px 0px; } #list { margin-right:auto; margin-left:auto; } #list,tr,th,td { border:1px solid rgba(207, 255, 245, 0.767); background-color:rgba(255, 255, 255, 0.034); } th,td { padding:18px 10px; vertical-align:middle; } th { text-align:left; } td { text-align:center; } th,td { padding:18px 25px; vertical-align:middle; } #vocaroid_container { width:82vw; } } /* 4k */ @media (min-width: 2561px) { .box { border:2.5px solid rgba(200, 255, 246, 0.541); border-radius:100px; } p { font-size:2.3rem; } /* メインコンテンツ部 */ .master2 { width:2880px; } #border1 { padding-top:300px; padding-bottom:300px; display: flex; align-items: center; width:100%; } #main1 { margin-top:400px; padding:160px 20px; } h1 { border-left:20px solid rgb(17, 218, 191); line-height:1; padding-left:20px; margin-left:60px; font-size:4.5rem;} #main1 p { padding-left:5px; } #main1 p:nth-child(5) { padding-bottom:50px; } #container1 { padding:50px 50px; width:2688px; margin-top:70px; margin-right:auto; margin-left:auto; } #list,tr,th,td { border:2.5px solid rgba(207, 255, 245, 0.767); font-size:2.3rem; } #tableheader { text-align:center; } th,td { padding:20px 65px; vertical-align:middle; } /* #dl_count { padding:0px 5px; } 本番環境で要検証 */ #vocaroid { margin-top:200px; margin-bottom:50px; padding-top:15px; } #vocaroid_container { padding:50px 50px 100px 50px; width:2688px; margin-top:70px; margin-right:auto; margin-left:auto; } #player { width:50vw; height:100%; aspect-ratio:16/9; margin-top:30px; margin-right:auto; margin-left:auto; margin-bottom:30px; } /* #vocaroid_container p:first-of-type { text-align-last:left; font-size:2.3rem; } */ #vocaroid_container p { text-align:center; font-size:2.5rem; } #vocaroid_container h3 { text-align:center; font-size:3rem; } #vocaroid_container iframe { display: flex; } #border2 { margin-top:2160px; padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #main2 { padding:160px 50px; } #container2 { width:2488px; margin-right:auto; margin-left:auto; margin-top:70px; padding:80px 80px; } #container2 h3 { font-size:2.5rem; } /* スライドメニュー設定 */ #nav_sp { font-size:4.5rem; } #nav_sp ul li:first-child { padding-top:25%; } #navToggle_pc { width:65px; height:160px; } #navToggle_pc span { height:5px; width:85px; } #menu_span1 { transform:translateX(28px) translateY(78px) rotate(90deg); } #menu_span2 { transform:translateX(12px) translateY(78px) rotate(90deg); } #menu_span3 { transform:translateX(-4px) translateY(78px) rotate(90deg); } #navToggle_pc { top:400px; } }