/* #test2 { background-color:#fff; width:100%; height:150px; } #test3 { background-color:#fff; width:100%; height:150px; margin-top:5px; } #test4 { background-color:#fff; width:100%; height:150px; margin-top:5px; } */ /* #main1_sub2 { padding-left:20px; width:60%; height:480px; } */ /* #info1 { } #info1 h3 { line-height:0.1; } #info2 { height:100px; background-color:#fff; border:1px solid #000; padding:0 2%; overflow-y:scroll; } #info2 dl { font-size:14px; } #title { margin-top:80px; width:100%; height:300px; border:1px solid #000; background-color:#111; } */ /* 共通部設定 */ .box { background-color:rgba(211,211,211,.12); } #main2 { text-align: center; } #main2>p { text-align:left; } #main2 h2, #youtube_wrap h2 { border-bottom: 1px solid rgba(177, 253, 240, 0.746); } #cloud1 { animation:cloud1 2s ease-in-out infinite alternate; } @keyframes cloud1 { 0% { transform:scale(.95) translate3d(0px,5px,0px); } 100% { transform:scale(1) translate3d(-2px,-10px,0px); } } #cloud2 { animation:cloud2 2s ease-in-out infinite alternate; } @keyframes cloud2 { 0% { transform:scale(.95) translate3d(0px,0px,0px); } 100% { transform:scale(1) translate3d(-2px,.2px,0px); } } #cloud3 { animation:cloud3 20s ease-in-out infinite alternate; } @keyframes cloud3 { 0% { transform:scale(.9) translate3d(0px,10px,30px); } 100% { transform:scale(1) translate3d(-60px,-10px,-30px); } } #cloud4 { animation:cloud4 12s ease-in-out infinite alternate; } @keyframes cloud4 { 0% { transform:scale(1) translate3d(0px,10px,0px); } 100% { transform:scale(1) translate3d(-60px,0px,0px); } } #cloud5 { animation:cloud5 12s ease-in-out infinite alternate; } @keyframes cloud5 { 0% { transform:scale(1) translate3d(-30px,-10px,0px); } 100% { transform:scale(1) translate3d(30px,0px,0px); } } #cloud6 { animation:cloud6 14s linear infinite alternate; } @keyframes cloud6 { 0% { transform:scale(.9) translate3d(20px,10px,0px); } 100% { transform:scale(1) translate3d(-20px,-10px,0px); } } .maincloud { position:relative; z-index:5; } #youtube_wrap { padding:20px 0 20px 0; margin-top:20px; background-color:rgba(246, 255, 121, 0.048); } #youtube_wrap h2 { text-align:center; padding:20px 20px 10px 20px; font-weight:normal; } #youtube { background-color:rgba(246, 255, 121, 0.048); text-align:center; opacity:0.9; } .bx-wrapper { padding-top:30px; background-color:rgba(246, 255, 121, 0.048); box-shadow:none; border:none; margin-right:auto; margin-left:auto; } .youtube_1 { width:100%; aspect-ratio: 16 / 9; max-width:640px; } #youtube_sp { display: none; } .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; */ } /* レスポンシブ設定 */ /* PC用 [w>=769] */ @media screen and (min-width: 1500px) { .box { border:1px solid rgba(200, 255, 246, 0.541); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } /* メインコンテンツ フッター　ウィンドウ　フェードイン(js用) */ /* .fade-up1, .fade-up2, .fade-up3 { 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; */ /* トップ入り口 */ /* ロゴ 読み込み時スクロール(js) */ /* ボード */ .enter1 { opacity:0; transform:translateY(500px); transition:all 1s ease-out; } /* 紐 */ .enter2 { opacity:0; transform:translateY(700px); transition:all 1.68s; } /* 枠 */ .enter3 { transform:translateY(1000px); transition:all 1.5s ease-out; } /* ネジ */ .enter4 { opacity:0; transform:translateY(1000px); transition:all 1.3s; } /* 雲 */ .enter5 { opacity:0; transform:translateY(2000px); transition:all 3s ease-out; } /* サイトロゴ */ .enter6 { transform:translateY(1500px); transition:all 2.5s ease-out; } /* 入り口用 重ねがけ透明レイヤー */ #home { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(189, 75, 75, 0.068); z-index:2; } /* ウィンドウ */ .master3 { width:92%; } #enter { z-index:5; margin:0 auto; border:1px solid rgba(255,255,255,.3); border-radius:30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 1050px; background-color: rgba(19, 116, 206, 0.157); } #enter_wrap { width:1200px; margin:0 auto; } /* タイトルロゴ 各部品 */ #top_sp { display: none; } #thumb1 { position:relative; width:750px; padding:180px 0 250px 50px; } .name { position:absolute; z-index: 10; top:258px; left:117px; width: 77%; } #name_tr { opacity: .78; }/* 6 */ #name_bd { opacity: 1; }/* 6 */ #name_b { opacity: .12; }/* 6 */ #border { opacity:.5; z-index:7; width:100%; }/* 3 */ #neji { position: absolute; z-index: 12; width:92%; left:50px; }/* 4 */ #board { position: absolute; z-index: 8; opacity: .9; width:96%; top:171px; left:36px; }/* 1 */ #board_c { position: absolute; z-index: 9; opacity: .9; width:92%; left:50px; }/* 2 */ /* #cloud { position: absolute; z-index: 11; width:95%; } */ #cloud1 { position: absolute; padding-top:330px; margin-left:290px; z-index: 11; width:44%; }/* 5 */ #cloud2 { position: absolute; padding-top:345px; margin-left:0px; z-index: 11; width:24%; }/* 5 */ #cloud3 { position: absolute; padding-top:360px; margin-left:280px; z-index: 11; width:7%; }/* 5 */ #cloud4 { position: absolute; padding-top:830px; right:0; z-index: 11; width:30%; }/* 5 */ #cloud5 { position: absolute; padding-top:700px; margin-left:30px; z-index: 11; width:22%; }/* 5 */ #cloud6 { position: absolute; padding-top:510px; margin-left:580px; z-index: 11; width:7%; }/* 5 */ /* エンターボタン */ #b_enter { position:absolute; top:520px; left:850px; z-index:3; padding:0 50px; font-size: 75px; color:rgba(255, 245, 224, 0.687); font-weight:normal; background-color:rgba(162, 171, 226, 0.236); border:1px solid rgba(200, 255, 246, 0.541); border-radius:25px; text-shadow:2px 2px 10px rgba(253, 199, 177, 0.792); font-family:"LilyUPC"; line-height:1.2em; } a#b_enter:hover { color:rgba(101, 253, 190, 0.632); text-shadow:0px 0px 30px rgba(253, 199, 177, 0); } #b_enter:hover { background-color:rgba(254, 255, 250, 0); border:1px solid rgba(252, 255, 151, 0.298); transition: all .2s linear; } /* メインコンテンツ部 */ body #mainbox { margin-top:1550px; } .master2 { width:1120px; 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; } /* #border1 { top:1350px; height:985px; display:none; } #border2 { top:2634px; height:920px; display:none; } */ #border1 { padding-top:200px; padding-bottom:200px; } #border2 { margin-top:300px; padding-top:200px; padding-bottom:200px; } /* メインコンテンツ１ */ /* border1の上下マージン:200px, ボックス間マージン:300px */ #main1 { border:1px solid rgba(255,255,255,.55); position:static; z-index:99; padding:60px; height:100%; } #main1>div { display:table; margin-right:auto; margin-left:auto; } #main1>div>#cell { display:table-cell; vertical-align:top; } /* メインコンテンツ１ 中身 */ #cell { width:400px; height:464px; background-color:rgba(246, 255, 121, 0.048); border-radius: 50px; padding:4% 4%; text-align:left; border:1px solid rgba(200, 255, 246, 0.541); } #banner_s { padding-top:5px; } #banner_s>div p { line-height:1.5; } #banner_s2_sp { display: none; } #new_music { margin-top:40px; padding:2.5%; background-color:rgba(178, 228, 217, 0.288); border-radius:10px; } #new_music h2 { border-bottom:1px solid rgba(165, 165, 165, 0.075); text-align:center; padding-bottom:10px; letter-spacing:.3em; } #new_music dl { overflow-y:auto; padding-left:10px; height:150px; } #new_music dd { padding-left:8em; } #state { width:500px; margin-left:50px; margin-top:20px; height:100%; padding:2.5% 4%; } #state h2 { letter-spacing:.5em; } #state p { line-height:1.5; } #work { width:500px; margin-left:50px; margin-top:20px; height:100%; padding:2.5% 4%; } #work h2 { letter-spacing:0.5em; } #work p { line-height:1.5; } /* インフォメ */ #infobox { margin-left:50px; border:1px solid rgba(200, 255, 246, 0.541); background-color:rgba(246, 255, 121, 0.048); border-radius:20px; padding:2.5%; height:200px; width:500px; } #infobox h2 { font-size:30px; border-bottom:1px solid rgba(226, 252, 243, 0.534); text-align:center; padding-bottom:5px; letter-spacing:.5em; } #info { padding-top:15px; } #info dl { height:120px; padding-bottom:10px; } /* メインコンテンツ２ */ body #main_row { border:1px solid rgba(255,255,255,.5); position:relative; z-index:95; padding:60px; } #main_row>div { float:left; } #wrap2>div { float:left; } #main2 { background-color:rgba(246, 255, 121, 0.048); height:400px; padding:2% 2%; width:320px; } #main2 h2 { padding-bottom:10px; letter-spacing:.2em; } #main2 p { padding-top:10px; } #about2 { background-color:rgba(246, 255, 121, 0.048); width:320px; height:400px; padding:2% 2%; margin-left:20px; text-align:center; } #about2 h2 { padding-bottom:10px; border-bottom:1px solid rgba(177, 253, 240, 0.746); letter-spacing:.2em; } #about2 h3,#about2 p { text-align:left; padding-top:10px; line-height:1.4; } /* バナー */ #banner { margin-left:20px; } #banner>* { height:100px; width:316px; margin-bottom:20px; } #box1 { height:200px; width:200px; background-color:#fff; } #youtube_box { border:1px solid rgba(255,255,255,.5); position:static; z-index:95; padding:60px; } #youtube_box h3 { margin-top:30px; } #youtube { width:50vw; aspect-ratio:16/9; margin-right:auto; margin-left:auto; } #youtube iframe { width:100%; height:100%; display: flex; align-items: center; } } /* PC用 [w>=1025] */ @media screen and (max-width: 1499px) and (min-width: 1201px) { .box { border:1px solid rgba(200, 255, 246, 0.541); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } /* メインコンテンツ フッター　ウィンドウ　フェードイン(js用) */ /* .fade-up1, .fade-up2, .fade-up3 { 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; */ /* トップ入り口 */ /* ロゴ 読み込み時スクロール(js) */ /* ボード */ .enter1 { opacity:0; transform:translateY(500px); transition:all 1s ease-out; } /* 紐 */ .enter2 { opacity:0; transform:translateY(700px); transition:all 1.68s; } /* 枠 */ .enter3 { transform:translateY(1000px); transition:all 1.5s ease-out; } /* ネジ */ .enter4 { opacity:0; transform:translateY(1000px); transition:all 1.3s; } /* 雲 */ .enter5 { opacity:0; transform:translateY(2000px); transition:all 2s ease-out; } /* サイトロゴ */ .enter6 { transform:translateY(1500px); transition:all 2.5s ease-out; } /* 入り口用 重ねがけ透明レイヤー */ #home { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(189, 75, 75, 0.068); z-index:2; } /* ウィンドウ */ .master3 { width:92%; } #enter { z-index:5; margin:0 auto; border:1px solid rgba(255,255,255,.3); border-radius:30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 1050px; background-color: rgba(19, 116, 206, 0.157); } #enter_wrap { width:1100px; margin:0 auto; } /* タイトルロゴ 各部品 */ #top_sp { display: none; } #thumb1 { position:relative; width:700px; padding:180px 0 250px 50px; } .name { position:absolute; z-index: 10; top:250px; left:117px; width: 77%; } #name_tr { opacity: .78; }/* 6 */ #name_bd { opacity: 1; }/* 6 */ #name_b { opacity: .12; }/* 6 */ #border { opacity:.5; z-index:7; width:100%; }/* 3 */ #neji { position: absolute; z-index: 12; width:92%; left:50px; }/* 4 */ #board { position: absolute; z-index: 8; opacity: .9; width:92%; top:181px; left:50px; }/* 1 */ #board_c { position: absolute; z-index: 9; opacity: .9; width:92%; left:50px; }/* 2 */ /* #cloud { position: absolute; z-index: 11; width:95%; } */ #cloud1 { position: absolute; padding-top:310px; margin-left:270px; z-index: 11; width:44%; }/* 5 */ #cloud2 { position: absolute; padding-top:320px; margin-left:30px; z-index: 11; width:24%; }/* 5 */ #cloud3 { position: absolute; padding-top:325px; margin-left:280px; z-index: 11; width:7%; }/* 5 */ #cloud4 { position: absolute; padding-top:830px; right:0; z-index: 11; width:30%; }/* 5 */ #cloud5 { position: absolute; padding-top:700px; margin-left:30px; z-index: 11; width:22%; }/* 5 */ #cloud6 { position: absolute; padding-top:510px; margin-left:580px; z-index: 11; width:7%; }/* 5 */ /* エンターボタン */ #b_enter { position:absolute; top:520px; left:58vw; z-index:3; padding:0 50px; font-size: 70px; color:rgba(255, 245, 224, 0.687); font-weight:normal; background-color:rgba(162, 171, 226, 0.236); border:1px solid rgba(200, 255, 246, 0.541); border-radius:25px; text-shadow:2px 2px 10px rgba(253, 199, 177, 0.792); font-family:"LilyUPC"; line-height:1.2em; } a#b_enter:hover { color:rgba(101, 253, 190, 0.632); text-shadow:0px 0px 30px rgba(253, 199, 177, 0); } #b_enter:hover { background-color:rgba(254, 255, 250, 0); border:1px solid rgba(252, 255, 151, 0.298); transition: all .2s linear; } /* メインコンテンツ部 */ body #mainbox { margin-top:1550px; } .master2 { width:1120px; height:100%; 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; } /* #border1 { top:1350px; height:985px; display:none; } #border2 { top:2634px; height:920px; display:none; } */ #border1 { padding-top:200px; padding-bottom:200px; } #border2 { margin-top:300px; padding-top:200px; padding-bottom:200px; } /* メインコンテンツ１ */ /* border1の上下マージン:200px, ボックス間マージン:300px */ #main1 { border:1px solid rgba(255,255,255,.55); position:static; z-index:99; padding:60px; height:100%; } #main1>div { display:table; margin-right:auto; margin-left:auto; } #main1>div>#cell { display:table-cell; vertical-align:top; } /* メインコンテンツ１ 中身 */ #cell { width:400px; height:464px; background-color:rgba(246, 255, 121, 0.048); border-radius: 50px; padding:4% 4%; text-align:left; border:1px solid rgba(200, 255, 246, 0.541); } #banner_s { padding-top:5px; } #banner_s>div p { line-height:1.5; } #banner_s2_sp { display: none; } #new_music { margin-top:40px; padding:2.5%; background-color:rgba(178, 228, 217, 0.288); border-radius:10px; } #new_music h2 { border-bottom:1px solid rgba(165, 165, 165, 0.075); text-align:center; padding-bottom:10px; letter-spacing:.3em; } #new_music dl { overflow-y:auto; padding-left:10px; height:150px; } #new_music dd { padding-left:8em; } #state { width:500px; margin-left:50px; margin-top:20px; height:100%; padding:2.5% 4%; } #state h2 { letter-spacing:.5em; } #state p { line-height:1.5; } #work { width:500px; margin-left:50px; margin-top:20px; height:100%; padding:2.5% 4%; } #work h2 { letter-spacing:0.5em; } #work p { line-height:1.5; } /* インフォメ */ #infobox { margin-left:50px; border:1px solid rgba(200, 255, 246, 0.541); background-color:rgba(246, 255, 121, 0.048); border-radius:20px; padding:2.5%; height:200px; width:500px; } #infobox h2 { font-size:30px; border-bottom:1px solid rgba(226, 252, 243, 0.534); text-align:center; padding-bottom:5px; letter-spacing:.5em; } #info { padding-top:15px; } #info dl { height:120px; padding-bottom:10px; } /* メインコンテンツ２ */ body #main_row { border:1px solid rgba(255,255,255,.5); position:relative; z-index:95; padding:60px; } #main_row>div { float:left; } #wrap2>div { float:left; } #main2 { background-color:rgba(246, 255, 121, 0.048); height:400px; padding:2% 2%; width:320px; } #main2 h2 { padding-bottom:10px; letter-spacing:.2em; } #main2 p { padding-top:10px; } #about2 { background-color:rgba(246, 255, 121, 0.048); width:320px; height:400px; padding:2% 2%; margin-left:20px; text-align:center; } #about2 h2 { padding-bottom:10px; border-bottom:1px solid rgba(177, 253, 240, 0.746); letter-spacing:.2em; } #about2 h3,#about2 p { text-align:left; padding-top:10px; line-height:1.4; } /* バナー */ #banner { margin-left:20px; } #banner>* { height:100px; width:316px; margin-bottom:20px; } #box1 { height:200px; width:200px; background-color:#fff; } #youtube_box { border:1px solid rgba(255,255,255,.5); position:relative; z-index:95; padding:60px; text-align:center; } #youtube_box h3 { margin-top:30px; } #youtube { width:70vw; aspect-ratio:16/9; margin-right:auto; margin-left:auto; } #youtube iframe { width:100%; height:100%; display: flex; align-items: center; } } /* タブレット１ [768>w>=640] */ @media screen and (max-width: 1200px) and (min-width: 601px) { /* .box { box-shadow:0 0 3px #000; border-radius:20px; border:1px solid rgba(31,255,163,.55); } #top_sp { display: none; } #thumb1 { position:relative; margin-top: 20%; margin-left:3%; width:40vw; } .name { position:absolute; z-index:10; padding-top:12.5%; left:12.5%; } img.name { width:80%; } #name_tr { opacity: .68; } #name_bd { opacity: .9; } #name_b { opacity:.12; } #border { opacity:.5; z-index:7; } #neji { position: absolute; z-index: 12; } #board { position: absolute; z-index: 8; opacity: .9; } #board_c { position: absolute; z-index: 9; opacity: .9; } #cloud { position: absolute; z-index: 11; } #main1>div { display:table; } #main1>div>#cell { display:table-cell; vertical-align:top; } #tree img { display:none; } #tree>h1 { display:table-cell; vertical-align:top; } #cell { text-align:left; padding-top:7%; padding-left:4%; padding-right: 7%; } #tree>h1 { font-size:3vw; display:inline-block; } #cell>h3 { line-height:1.7; font-size:2.1vw; display:inline-block; } #banner_s img { width: 30%; } #banner_s>div { font-size: 1.65vw; } #banner_s2_sp { display: none; } #info { line-height:3; } dl { font-size:1.8vw; height:10vw; overflow-y:auto; margin-right:4%; margin-top:0; } dt { padding-left:5%; font-size:1.6vw; padding-top:0.8%; float:left; clear:both; padding-right:6%; } dd { border-top:1px dotted #000; margin-left:0; } #main_row { display:table; } #main_row>div { display:table-cell; vertical-align: top; } #main_row { margin-top:6%; } #main2 { width:56%; height:40vw; } .box#main2 { padding-right:4%; padding-left:4%; } #banner { padding-left:3%; } #banner>* { height:12vw; border:1px solid #000; background-color:#fff; margin-bottom:5%; } */ .box { border:1px solid rgba(200, 255, 246, 0.541); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } p { line-height:1.5; } /* メインコンテンツ フッター　ウィンドウ　フェードイン(js用) */ /* .fade-up1, .fade-up2, .fade-up3 { 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; */ /* トップ入り口 */ /* ロゴ 読み込み時スクロール(js) */ /* ボード */ .enter1 { opacity:0; transform:translateY(500px); transition:all 1s ease-out; } /* 紐 */ .enter2 { opacity:0; transform:translateY(700px); transition:all 1.68s; } /* 枠 */ .enter3 { transform:translateY(1000px); transition:all 1.5s ease-out; } /* ネジ */ .enter4 { opacity:0; transform:translateY(1000px); transition:all 1.3s; } /* 雲 */ .enter5 { opacity:0; transform:translateY(2000px); transition:all 2s ease-out; } /* サイトロゴ */ .enter6 { transform:translateY(1500px); transition:all 2.5s ease-out; } #cloud1 { position: absolute; padding-top:48%; margin-left:45%; z-index: 11; width:50%; }/* 5 */ #cloud2 { position: absolute; padding-top:49.5%; margin-left:4%; z-index: 11; width:30%; }/* 5 */ #cloud3 { position: absolute; padding-top:52%; margin-left:45%; z-index: 11; width:9%; }/* 5 */ #cloud4 { position: absolute; padding-top:94%; right:0; z-index: 11; width:50%; }/* 5 */ #cloud5 { position: absolute; padding-top:75%; margin-left:10%; z-index: 11; width:30%; }/* 5 */ #cloud6 { position: absolute; padding-top:40%; margin-left:35%; z-index: 11; width:10%; }/* 5 */ /* 入り口用 重ねがけ透明レイヤー */ #home { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(189, 75, 75, 0.068); z-index:2; } /* ウィンドウ */ .master3 { width:92%; } #enter { z-index:5; margin:0 auto; border:1px solid rgba(255,255,255,.5); border-radius:30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100dvh; padding-left:4%; background-color: rgba(19, 116, 206, 0.157); } /* タイトルロゴ 各部品 */ #top_sp { display: none; } #thumb1 { position:relative; margin-left:auto; margin-right:auto; width:92%; padding:30% 0 0 0; } #enter { height:100dvh; display: flex; align-items: center; justify-content: center; padding:0; } #enter_wrap { display: flex; align-items: center; } #thumb1 { position:relative; padding:0; width:95vw; padding-right:5vw; } .name { position:absolute; z-index: 10; padding-top:10%; left:10%; width: 88%; } #name_tr { opacity: .78; }/* 6 */ #name_bd { opacity: 1; }/* 6 */ #name_b { opacity: .12; }/* 6 */ #border { opacity:.5; z-index:7; }/* 3 */ #neji { position: absolute; z-index: 12; }/* 4 */ #board { position: absolute; z-index: 8; opacity: .9; }/* 1 */ #board_c { position: absolute; z-index: 9; opacity: .9; }/* 2 */ #cloud { position: absolute; z-index: 11; width:95%; }/* 5 */ /* エンターボタン */ #b_enter { position:absolute; top:105%; left:57%; padding:0 5%; font-size: 6.5vw; color:rgba(255, 245, 224, 0.687); font-weight:normal; background-color:rgba(162, 171, 226, 0.236); border:1px solid rgba(130, 206, 231, 0.423); border-radius:20px; text-shadow:2px 2px 10px rgba(253, 199, 177, 0.792); } a#b_enter:hover { color:rgba(101, 253, 190, 0.632); text-shadow:0px 0px 30px rgba(253, 199, 177, 0); } #b_enter:hover { background-color:rgba(254, 255, 250, 0); border:1px solid rgba(252, 255, 151, 0.298); transition: all .2s linear; } /* メインコンテンツ部 */ body #mainbox { margin-top:200dvh; } .master2 { width:90%; 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; } #border1 { padding-top:10%; padding-bottom:10%; } #border2 { margin-top:100dvh; padding-top:10%; padding-bottom:10%; } /* メインコンテンツ１ */ /* border1の上下マージン:200px, ボックス間マージン:300px */ #main1 { border:1px solid rgba(255,255,255,.55); position:relative; z-index:99; padding:2% 2% 6% 2%; } #main1 div { margin-right:auto; margin-left:auto; } #main1>div>div:not(:first-child) { margin-top:5%; } /* #main1>div>#cell { display:table-cell; vertical-align:top; } */ /* メインコンテンツ１ 中身 */ #cell { margin-right:auto; margin-left:auto; background-color:rgba(246, 255, 121, 0.048); border-radius: 30px; padding:3% 2%; border:1px solid rgba(200, 255, 246, 0.541); } #cellwrap { text-align:center; } #main1_sp { text-align:center; } #banner_s { padding-top:1%; } #banner_s img { width:80%; } #banner_s2_sp { display: none; } #new_music { margin-top:4%; padding:2%; width:90%; background-color:rgba(178, 228, 217, 0.288); border-radius:10px; } #new_music h2 { border-bottom:1px solid rgba(165, 165, 165, 0.075); text-align:center; padding-bottom:10px; letter-spacing:.3em; } #new_music dl { overflow-y:auto; padding-left:10px; height:150px; } #new_music dd { padding-left:8em; } #wrap1 { margin-right:auto; margin-left:auto; margin-top:2%; } #wrap1>div { float:left; } #state { width:100%; padding:2.2% 3.5% 3.5% 3.5%; } #state h2 { letter-spacing:.5em; } #state p { line-height:1.5; } #wrap1>#work { width:100%; margin-top:5%; padding:2.2% 3.5% 3.5% 3.5%; } #work h2 { letter-spacing:0.5em; } #work p { line-height:1.5; } /* インフォメ */ #infobox { margin-left:2%; border:1px solid rgba(200, 255, 246, 0.541); background-color:rgba(246, 255, 121, 0.048); border-radius:20px; padding:2.5%; } #infobox h2 { font-size:30px; border-bottom:1px solid rgba(226, 252, 243, 0.534); text-align:center; padding-bottom:5px; letter-spacing:.5em; } #info { padding-top:15px; } #info dl { height:120px; padding-bottom:10px; } /* メインコンテンツ２ */ body #main_row { border:1px solid rgba(255,255,255,.5); position:relative; z-index:95; } #main_row { padding:2%; } #main2 { background-color:rgba(246, 255, 121, 0.048); padding:2.2% 3.5% 3.5% 3.5%; } #main2 h2 { padding-bottom:3.5%; letter-spacing:.2em; } #main2 p { padding-top:3.5%; } #about2 { background-color:rgba(246, 255, 121, 0.048); margin-top:2%; padding:2.2% 3.5% 3.5% 3.5%; text-align:center; margin-top:5%; } #about2 h2 { padding-bottom:3.5%; border-bottom:1px solid rgba(177, 253, 240, 0.746); letter-spacing:.2em; } #about2 h3,#about2 p { text-align:left; padding-top:3.5%; line-height:1.4; } /* #main_row { display:table; } */ /* #main_row>div { float:left; width:49%; } */ /* バナー */ #banner { width:49%; margin-left:2%; } #banner>*:not(:last-child) { height:100px; margin-bottom:3%; } #box1 { height:200px; width:200px; background-color:#fff; margin-left:5%; } #navToggle_sp { display:none; } #youtube_box { border:1px solid rgba(255,255,255,.5); position:relative; z-index:3; padding:5% 3.5% 5% 3.5%; height:auto; text-align:center; } #youtube_box h3 { margin-top:2.5%; } #youtube { width:75vw; aspect-ratio:16/9; margin-right:auto; margin-left:auto; margin-top:1.5vw; } #youtube iframe { width:100%; height:100%; display: flex; align-items: center; } } @media (min-width: 1081px) and (max-width: 1200px) { #enter { height:100dvh; display: flex; align-items: center; justify-content: center; padding:0; } #enter_wrap { display: flex; align-items: center; } #thumb1 { position:relative; padding:0; width:65vw; padding-right:5vw; } } @media (min-width: 950px) and (max-width: 1080px) { #enter { height:100dvh; display: flex; align-items: center; justify-content: center; padding:0; } #enter_wrap { display: flex; align-items: center; } #thumb1 { position:relative; padding:0; width:75vw; padding-right:5vw; } } @media (min-width: 850px) and (max-width: 949px) { #thumb1 { width:85vw; } } /* 横画面用 */ @media screen and (min-width: 601px) and (max-height: 901px) { #enter { height:100vw; } #thumb1 { width:65vw; } } /* スマホ [480>=w] */ @media screen and (max-width: 600px) { .box { border:1px solid rgba(200, 255, 246, 0.541); border-radius:30px; background-color: rgba(19, 116, 206, 0.157); } p { line-height:1.5; } /* .fade-up1, .fade-up2, .fade-up3 { 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; /* トップ入り口 */ /* ロゴ 読み込み時スクロール(js) */ /* ボード */ .enter1 { opacity:0; transform:translateY(500px); transition:all 1s ease-out; } /* 紐 */ .enter2 { opacity:0; transform:translateY(700px); transition:all 1.68s; } /* 枠 */ .enter3 { transform:translateY(1000px); transition:all 1.5s ease-out; } /* ネジ */ .enter4 { opacity:0; transform:translateY(1000px); transition:all 1.3s; } /* 雲 */ .enter5 { opacity:0; transform:translateY(2000px); transition:all 2s ease-out; } /* サイトロゴ */ .enter6 { transform:translateY(1500px); transition:all 2.5s ease-out; } #cloud1 { position: absolute; padding-top:54%; margin-left:36%; z-index: 11; width:65%; }/* 5 */ #cloud2 { position: absolute; padding-top:54%; margin-left:5%; z-index: 11; width:35%; }/* 5 */ #cloud3 { position: absolute; padding-top:55%; margin-left:45%; z-index: 11; width:10%; }/* 5 */ #cloud4 { position: absolute; padding-top:120%; left:50%; z-index: 11; width:50%; }/* 5 */ #cloud5 { position: absolute; padding-top:70%; right:10%; z-index: 11; width:22%; }/* 5 */ #cloud6 { position: absolute; padding-top:45%; margin-left:8%; z-index: 11; width:10%; }/* 5 */ /* 入り口用 重ねがけ透明レイヤー */ #home { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(189, 75, 75, 0.068); z-index:2; } /* ウィンドウ */ .master3 { width:98%; } #enter { z-index:5; margin:0 auto; border:1px solid rgba(255,255,255,.5); border-radius:20px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; padding-left:4%; background-color: rgba(19, 116, 206, 0.157); } /* タイトルロゴ 各部品 */ #top_sp { display: none; } #thumb1 { position:relative; margin-left:-10%; margin-right:auto; width:100%; padding:40% 0 0 0; } .name { position:absolute; z-index: 10; padding-top:9.5%; left:9%; width: 92%; } #name_tr { opacity: .78; }/* 6 */ #name_bd { opacity: 1; }/* 6 */ #name_b { opacity: .12; }/* 6 */ #border { opacity:.5; z-index:7; }/* 3 */ #neji { position: absolute; z-index: 12; }/* 4 */ #board { position: absolute; z-index: 8; opacity: .9; }/* 1 */ #board_c { position: absolute; z-index: 9; opacity: .9; }/* 2 */ #cloud { position: absolute; z-index: 11; width:100%; margin-left:1%; }/* 5 */ /* エンターボタン */ #sp_b_enter { position:absolute; top:0; left:0; padding:0 1%; font-size: 8.5vw; color:rgb(161, 158, 148); font-weight:normal; width:100%; text-align:center; border:1px solid rgba(24, 24, 24, 0.198); border-radius:10px; z-index:100; height:100%; } .sp_enter_slideDown { animation:enterslidedown .6s ease-out forwards; } .sp_enter_slideUp { animation:enterslideup .5s ease forwards; display:none; } @keyframes enterslideup { 0% { opacity:1; } 100% { opacity:0; } } @keyframes enterslidedown { 0% { opacity:0.4; } 100% { opacity:1; } } #b_enter { display:none; } /* メインコンテンツ部 */ body #mainbox { margin-top:1050px; } .master2 { width:96%; 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; } #border1 { padding-top:10%; padding-bottom:10%; } #border2 { margin-top:30%; padding-top:10%; padding-bottom:10%; } /* メインコンテンツ１ */ /* border1の上下マージン:200px, ボックス間マージン:300px */ #main1 { border:1px solid rgba(255,255,255,.55); position:relative; z-index:99; padding:2% 2% 15% 2%; height:100vh; } #main1 div { margin-right:auto; margin-left:auto; } #main1>div>div:not(:first-child) { margin-top:5%; } /* #main1>div>#cell { display:table-cell; vertical-align:top; } */ /* メインコンテンツ１ 中身 */ #cell { margin-right:auto; margin-left:auto; background-color:rgba(246, 255, 121, 0.048); border-radius: 30px; padding:3% 2%; border:1px solid rgba(200, 255, 246, 0.541); } #cellwrap { text-align:center; } #main1_sp { text-align:left; } #banner_s { padding-top:1%; } #banner_s img { width:80%; } #banner_s2_sp { display: none; } #new_music { margin-top:4%; padding:2%; width:90%; background-color:rgba(178, 228, 217, 0.288); border-radius:10px; } #new_music h2 { border-bottom:1px solid rgba(165, 165, 165, 0.075); text-align:center; padding-bottom:10px; letter-spacing:.3em; } #new_music dl { overflow-y:auto; padding-left:10px; height:150px; } #new_music dd { padding-left:8em; } #wrap1 { margin-right:auto; margin-left:auto; margin-top:2%; } #state { width:100%; padding:2.2% 3.5% 5% 3.5%; margin-top:15%; } #state h2 { letter-spacing:.5em; } #state p { line-height:1.5; } #work { width:100%; margin-top:5%; padding:2.2% 3.5% 5% 3.5%; } #work h2 { letter-spacing:0.5em; } #work p { line-height:1.5; } /* インフォメ */ #infobox { margin-left:2%; border:1px solid rgba(200, 255, 246, 0.541); background-color:rgba(246, 255, 121, 0.048); border-radius:20px; padding:2.5%; } #infobox h2 { font-size:4vw; border-bottom:1px solid rgba(226, 252, 243, 0.534); text-align:center; padding-bottom:5px; letter-spacing:.5em; } #info { padding-top:15px; } #info dl { height:120px; padding-bottom:10px; } /* メインコンテンツ２ */ body #main_row { border:1px solid rgba(255,255,255,.5); position:relative; z-index:95; } #main_row { padding:2%; } #main2 { background-color:rgba(246, 255, 121, 0.048); padding:2% 2% 5% 2%; } #main2 h2 { padding-bottom:3.5%; letter-spacing:.2em; } #main2 p { padding-top:3.5%; } #about2 { background-color:rgba(246, 255, 121, 0.048); margin-top:2%; padding: 2% 2% 5% 2%; text-align:center; } #about2 h2 { padding-bottom:3.5%; border-bottom:1px solid rgba(177, 253, 240, 0.746); letter-spacing:.2em; } #about2 h3,#about2 p { text-align:left; padding-top:3.5%; line-height:1.4; } /* #main_row { display:table; } */ /* バナー */ #banner { width:97%; text-align:center; margin-right:auto; margin-left:auto; } #banner>*:not(:last-child) { height:100px; margin-bottom:3%; } #box1 { height:250px; width:250px; background-color:#fff; } #navToggle_sp_2 { display:none; } #youtube_box { border:1px solid rgba(255,255,255,.5); position:relative; z-index:95; padding:7% 3.5% 3.5% 3.5%; text-align:center; } #youtube_box h3 { margin-top:3%; } } /* 共通上書き用 */ #new_music { margin-top:2vh; } /* #main1 { height:100%!important; } */ /* 共通上書き用 */ /* スマホ用 */ @media (max-width: 600px) { #enter { height: calc(var(--vh, 1vh) * 100); width:100%; display: flex; align-items: center; } #enter_wrap { width:100%; display: flex; align-items: center; } #thumb1 { position:relative; padding:0; width:100vw; } body #mainbox { margin-top:200vh; } #main1 { height:auto; padding-bottom:15%; } #cell { padding:5%; } #cell p { text-align:center; } #border2 { margin-top:100vh; } #youtube_box { padding-bottom:7%; } /* #youtube_box h2 { font-size:1.4rem; } */ /* #youtube_box p { margin-top:1vw; } */ #youtube { margin-top:6vw; width:85vw; aspect-ratio:16/9; margin-right:auto; margin-left:auto; } #youtube iframe { width:100%; height:100%; } #cloud4 { margin-top:95vh; }/* 5 */ #cloud5 { margin-top:90vh; }/* 5 */ #cloud6 { margin-top:85vh; }/* 5 */ #main2 { padding:5%; } #main2 p { letter-spacing:.02em; } #about2 { padding:5%; } #about2 p { letter-spacing:.02em; } } /* 横画面用 */ @media screen and (min-width: 601px) and (max-height: 901px) { #enter { height:100vw; } #thumb1 { width:65vw; } } /* タブレット */ @media (min-width: 601px) { body #mainbox { margin-top:2160px; } #border2 { margin-top:1080px; } #cloud4 { margin-top:950px; }/* 5 */ #cloud5 { margin-top:900px; }/* 5 */ #cloud6 { margin-top:870px; }/* 5 */ /* #cloud4 { margin-top:75dvh; } #cloud5 { margin-top:70dvh; } #cloud6 { margin-top:78dvh; } */ #main2 p { letter-spacing:.03em; } #about2 p { letter-spacing:.03em; } } /* フルHD */ @media (min-width: 1301px) { #enter { height:100vh; display: flex; align-items: center; } #enter_wrap { width:75vw; margin:0 auto; margin-top:160px; } #thumb1 { width:43vw; } /* タイトルロゴ 各部品 */ .name { top:13vw; left:6vw; width: 85%; } #cloud1 { padding-top:20vw; margin-left:18.5vw; z-index: 11; width:44%; }/* 5 */ #cloud2 { padding-top:22vw; margin-left:0px; width:24%; }/* 5 */ #cloud3 { padding-top:21.5vw; margin-left:20vw; width:7%; }/* 5 */ /* エンターボタン */ #b_enter { top:30.5vw; left:49vw; font-size: 6rem; } /* メインコンテンツ部 */ body #mainbox { margin-top:2160px; } .master2 { width:75vw; } #border1 { padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #main1 { padding:60px; height:800px; display: flex; align-items: center; border-radius:50px; border:1.5px solid rgba(255,255,255,.55); } /* メインコンテンツ１ 中身 */ #cell { width:30vw; border:1.5px solid rgba(200, 255, 246, 0.541); } #first_text { text-align:center; } #link { text-align:center; } #banner_s { width:90%; margin-right:auto; margin-left:auto; text-align:center; } #new_music { height:220px; padding:3%; } #new_music dl { height:150px; } #infobox { width:35vw; height:350px; border-radius:50px; padding:5%; border:1.5px solid rgba(200, 255, 246, 0.541); } #infobox h2 { font-size:2.5rem; border-bottom:1.5px solid rgba(226, 252, 243, 0.534); } #info { padding-top:20px; } #info dl { height:215px; } #state { width:35vw; height:100%; border-radius:35px; margin-top:20px; } #work { width:35vw; height:100%; border-radius:35px; margin-top:20px; } /* YouTubeボックス yotubeの大きさは本番で要検証 */ #border2 { margin-top:1080px; padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #youtube_box { padding:120px 4vw; border-radius: 50px; border:1.5px solid rgba(255,255,255,.5); text-align:center; } #youtube_box h2 { font-size:2.5rem; } #youtube_box h3 { font-size:1.8rem; } #youtube_box p { font-size:1.5rem; } #youtube { margin-top:30px; padding:30px; } .youtube_1 { max-width:80vw; } /* メインコンテンツ２ */ #cloud4 { margin-top:950px; }/* 5 */ #cloud5 { margin-top:900px; }/* 5 */ #cloud6 { margin-top:870px; }/* 5 */ #cloud4 { animation:cloud4 12s ease-in-out infinite alternate; } @keyframes cloud4 { 0% { transform:scale(1) translate3d(0px,10px,0px); } 100% { transform:scale(1) translate3d(-6vw,0px,0px); } } #cloud5 { animation:cloud5 12s ease-in-out infinite alternate; } @keyframes cloud5 { 0% { transform:scale(1) translate3d(-30px,-10px,0px); } 100% { transform:scale(1) translate3d(3vw,0px,0px); } } #cloud6 { animation:cloud6 14s linear infinite alternate; } @keyframes cloud6 { 0% { transform:scale(.9) translate3d(20px,10px,0px); } 100% { transform:scale(1) translate3d(-2vw,-1vh,0px); } } body #main_row { padding:120px 4vw; height:800px; border-radius: 50px; display: flex; align-items: center; justify-content: center; border:1.5px solid rgba(255,255,255,.5); font-size:1.2rem; } #main2 { width:25vw; height:635px; border-radius: 50px; padding:50px; } #main2 h2 { padding-bottom:5px; border-bottom:1.5px solid rgba(177, 253, 240, 0.746); } #main2 p { padding-top:20px; } #about2 { width:25vw; height:635px; border-radius: 50px; padding:50px; margin-left:6vw; } #about2 h2 { padding-bottom:5px; border-bottom:1.5px solid rgba(177, 253, 240, 0.746); } #about2>h3 { padding-top:15px; font-size:1.1rem; } #about2>h3:first-of-type { padding-top:20px; font-size:1.1rem; } #about2 p { padding-top:7px; } } /* 横画面用 */ /* @media screen and (min-width: 1080px) and (min-height: 1920px) { #thumb1 { width:85vw; } } */ @media (min-width: 1201px) { #enter { height:100vh; display: flex; align-items: center; } #enter_wrap { width:75vw; margin:0 auto; margin-top:160px; } #thumb1 { width:43vw; } #main2, #about2 { height:605px; } #navToggle_pc { top:150px; } } @media (min-width: 1652px) { #youtube { width:45vw; margin-top:20px; } } @media (min-width: 1652px) and (max-width: 1811px) { .name { top:14.5vw; left:6.5vw; width: 80%; } } @media (min-width: 1502px) and (max-width: 1651px) { .name { top:15.5vw; left:6.7vw; width: 80%; } } @media (min-width: 1201px) and (max-width: 1501px) { #enter_wrap { width:80vw; } #thumb1 { width:50vw; } .name { top:17vw; left:7.5vw; width: 80%; } #b_enter { font-size:4.5rem; top:36vw; left:55vw; } #cloud1 { padding-top:22.5vw; margin-left:21vw; width:44%; }/* 5 */ #cloud2 { padding-top:24vw; margin-left:0px; width:24%; }/* 5 */ #cloud3 { padding-top:24vw; margin-left:22vw; width:7%; }/* 5 */ .master2 { width:1120px; } #main1 { border-radius:30px; } #cell { width:400px; padding:4% 4%; } #new_music { height:auto; } #new_music dl { height:150px; } #infobox { width:500px; border-radius:30px; padding:2.5%; height:300px; } #infobox h2 { font-size:2rem; } #info { padding-top:15px; } #info dl { height:205px; padding-bottom:10px; } #state { width:500px; } #work { width:500px; } #youtube { width:55vw; margin-top:30px; } #cloud4 { margin-top:1000px; }/* 5 */ #cloud5 { margin-top:900px; }/* 5 */ #cloud6 { margin-top:870px; }/* 5 */ body #main_row { padding:120px 4vw; border-radius:30px; } #main2 { padding:40px; width:420px; } #main2 h2 { padding-bottom:5px; font-size:2rem; } #main2 p { padding-top:25px; font-size:1.1rem; } #about2 { width:420px; border-radius:50px; padding:40px; margin-left:6vw; } #about2 h2 { font-size:2rem; padding-bottom:5px; border-bottom:1.5px solid rgba(177, 253, 240, 0.746); } #about2 h3 { padding-top:20px; font-size:1.1rem; } #about2>h3:first-of-type { padding-top:25px; font-size:1.1rem; } #about2 p { padding-top:7px; font-size:1.1rem; } } @media (min-width: 1271px) and (max-width: 1401px) { .name { top:18.5vw; left:8vw; width: 80%; } } @media (min-width: 1201px) and (max-width: 1271px) { .name { top:19vw; left:8.5vw; width: 80%; } } /* WQHD */ @media (min-width: 1921px) { /* ロゴ 読み込み時スクロール(js) */ /* ボード */ .enter1 { opacity:0; transform:translateY(700px); transition:all 1s ease-out; } /* 紐 */ .enter2 { opacity:0; transform:translateY(900px); transition:all 1.68s; } /* 枠 */ .enter3 { transform:translateY(1200px); transition:all 1.5s ease-out; } /* ネジ */ .enter4 { opacity:0; transform:translateY(1200px); transition:all 1.3s; } /* 雲 */ .enter5 { opacity:0; transform:translateY(2000px); transition:all 3s ease-out; } /* サイトロゴ */ .enter6 { transform:translateY(1700px); transition:all 2.5s ease-out; } .box { border:1.5px solid rgba(200, 255, 246, 0.541); } #enter { min-height:1440px; display: flex; align-items: center; border:1.5px solid rgba(255,255,255,.3); } #enter_wrap { width:80vw; margin:0 auto; margin-top:220px; } #b_enter { border:1.5px solid rgba(200, 255, 246, 0.541); } #b_enter:hover { border:1.5px solid rgba(252, 255, 151, 0.298); } #thumb1 { width:50vw; } /* タイトルロゴ 各部品 */ .name { top:11vw; left:6vw; width: 85%; } #cloud1 { padding-top:23.5vw; margin-left:21.5vw; z-index: 11; width:44%; }/* 5 */ #cloud2 { padding-top:24vw; margin-left:0px; width:24%; }/* 5 */ #cloud3 { padding-top:24.5vw; margin-left:20vw; width:7%; }/* 5 */ /* エンターボタン */ #b_enter { top:30.5vw; left:54.5vw; padding:0 80px; font-size: 8rem; border-radius:40px; } /* メインコンテンツ部 */ body #mainbox { margin-top:2880px; } .border { min-height:2000px; } .master2 { width:75vw; } #border1 { padding-top:150px; padding-bottom:150px; display: flex; align-items: center; } #main1 { padding:60px; min-height:1240px; display: flex; align-items: center; border-radius: 50px; border:1.5px solid rgba(255,255,255,.55); } /* メインコンテンツ１ 中身 */ #cell { width:30vw; min-height:950px; border-radius: 50px; border:1.5px solid rgba(200, 255, 246, 0.541); } #first_text { text-align:center; } #link { text-align:center; } #banner_s { width:90%; margin-right:auto; margin-left:auto; text-align:center; } #new_music { min-height:300px; padding:3%; } #new_music dl { min-height:220px; } #infobox { width:35vw; min-height:400px; border-radius:50px; padding:5%; border:1.5px solid rgba(200, 255, 246, 0.541); } #infobox h2 { font-size:3rem; border-bottom:1.5px solid rgba(226, 252, 243, 0.534); } #info { padding-top:30px; } #info dl { min-height:250px; } #state { width:35vw; border-radius:50px; margin-top:25px; } #work { width:35vw; border-radius:50px; margin-top:25px; } /* YouTubeボックス yotubeの大きさは本番で要検証 */ #border2 { margin-top:1440px; padding-top:150px; padding-bottom:150px; display: flex; align-items: center; } #youtube_box { padding:120px 4vw; min-height:48vw; border-radius: 50px; border:1.5px solid rgba(255,255,255,.5); text-align:center; } #youtube_box h2 { font-size:3.4rem; } #youtube_box h3 { font-size:2.2rem; } #youtube_box p { font-size:2rem; } #youtube { margin-top:20px; padding:30px; } .youtube_1 { max-width:80vw; } #youtube { width:50vw; aspect-ratio:16/9; margin-top:50px; margin-right:auto; margin-left:auto; } #youtube iframe { width:100%; height:100%; display: flex; align-items: center; } /* メインコンテンツ２ */ #cloud4 { margin-top:1700px; }/* 5 */ #cloud5 { margin-top:1600px; }/* 5 */ #cloud6 { margin-top:1380px; }/* 5 */ #cloud4 { animation:cloud4 12s ease-in-out infinite alternate; } @keyframes cloud4 { 0% { transform:scale(1) translate3d(0px,10px,0px); } 100% { transform:scale(1) translate3d(-6vw,0px,0px); } } #cloud5 { animation:cloud5 12s ease-in-out infinite alternate; } @keyframes cloud5 { 0% { transform:scale(1) translate3d(-30px,-10px,0px); } 100% { transform:scale(1) translate3d(3vw,0px,0px); } } #cloud6 { animation:cloud6 14s linear infinite alternate; } @keyframes cloud6 { 0% { transform:scale(.9) translate3d(20px,10px,0px); } 100% { transform:scale(1) translate3d(-2vw,-1vh,0px); } } body #main_row { padding:120px 4vw; min-height:1240px; border-radius: 50px; display: flex; align-items: center; justify-content: center; border:1.5px solid rgba(255,255,255,.5); font-size:1.7rem; } #main2 { width:25vw; min-height:935px; border-radius: 50px; padding:50px; } #main2 h2 { padding-bottom:15px; border-bottom:1.5px solid rgba(177, 253, 240, 0.746); } #main2 p { padding-top:25px; } #about2 { width:25vw; min-height:935px; border-radius: 50px; padding:50px; margin-left:6vw; } #about2 h2 { padding-bottom:15px; border-bottom:1.5px solid rgba(177, 253, 240, 0.746); } #about2 h3 { padding-top:25px; } #about2 p { padding-top:7px; } } @media (max-width: 2300px) and (min-width: 1921px) { .name { top:12.5vw; } } /* WQHD 縦画面 */ @media screen and (min-width: 1440px) and (min-height: 2100px) { body #mainbox { margin-top:100vh; } .border { min-height:100vh; } #cloud4 { margin-top:1700px; }/* 5 */ #cloud5 { margin-top:1600px; }/* 5 */ #cloud6 { margin-top:1380px; }/* 5 */ } /* 4k */ @media (min-width: 2561px) { /* ロゴ 読み込み時スクロール(js) */ /* ボード */ .enter1 { opacity:0; transform:translateY(1200px); transition:all 1s ease-out; } /* 紐 */ .enter2 { opacity:0; transform:translateY(1700px); transition:all 1.68s; } /* 枠 */ .enter3 { transform:translateY(1500px); transition:all 1.5s ease-out; } /* ネジ */ .enter4 { opacity:0; transform:translateY(2000px); transition:all 1.3s; } /* 雲 */ .enter5 { opacity:0; transform:translateY(2000px); transition:all 3s ease-out; } /* サイトロゴ */ .enter6 { transform:translateY(2500px); transition:all 2.5s ease-out; } .box { border:2.5px solid rgba(200, 255, 246, 0.541); } #enter { min-height:2160px; display: flex; align-items: center; } #enter_wrap { width:80vw; margin:0 auto; margin-top:150px; } #b_enter { border:2.5px solid rgba(200, 255, 246, 0.541); } #b_enter:hover { border:2.5px solid rgba(252, 255, 151, 0.298); } #thumb1 { width:50vw; } /* タイトルロゴ 各部品 */ .name { top:9.5vw; left:6vw; width: 85%; } #cloud1 { padding-top:23.5vw; margin-left:21.5vw; z-index: 11; width:44%; }/* 5 */ #cloud2 { padding-top:24vw; margin-left:0px; width:24%; }/* 5 */ #cloud3 { padding-top:24.5vw; margin-left:20vw; width:7%; }/* 5 */ /* エンターボタン */ #b_enter { top:30.5vw; left:55.5vw; padding:0 100px; font-size: 11rem; border-radius:80px; } /* メインコンテンツ部 */ body #mainbox { margin-top:4320px; } .border { min-height:3000px; } .master2 { width:75vw; } #border1 { padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #main1 { padding:60px; min-height:1800px; display: flex; align-items: center; border-radius: 100px; border:2.5px solid rgba(255,255,255,.55); } /* メインコンテンツ１ 中身 */ #cell { width:30vw; min-height:auto; border-radius:100px; border:2.5px solid rgba(200, 255, 246, 0.541); } #first_text { text-align:center; } #link { text-align:center; } #banner_s { width:90%; margin-right:auto; margin-left:auto; text-align:center; } #new_music { min-height:400px; padding:3%; } #new_music dl { min-height:300px; } #infobox { width:35vw; min-height:655px; border-radius:100px; padding:5%; border:2.5px solid rgba(200, 255, 246, 0.541); } #infobox h2 { font-size:4rem; border-bottom:2px solid rgba(226, 252, 243, 0.534); } #info { padding-top:30px; } #info dl { min-height:445px; } #state { width:35vw; border-radius:70px; margin-top:40px; } #work { width:35vw; border-radius:70px; margin-top:40px; } /* YouTubeボックス yotubeの大きさは本番で要検証 */ #border2 { margin-top:2160px; padding-top:300px; padding-bottom:300px; display: flex; align-items: center; } #youtube_box { padding:200px 4vw; min-height:50vw; border-radius: 100px; border:2.5px solid rgba(255,255,255,.5); text-align:center; } #youtube_box h2 { font-size:5rem; } #youtube_box h3 { font-size:4rem; } #youtube_box p { font-size:3.2rem; } #youtube { margin-top:30px; padding:45px; } #youtube { width:50vw; aspect-ratio:16/9; margin-top:60px; margin-right:auto; margin-left:auto; } #youtube iframe { width:100%; height:100%; display: flex; align-items: center; } .youtube_1 { max-width:80vw; } /* メインコンテンツ２ */ #cloud4 { margin-top:3000px; }/* 5 */ #cloud5 { margin-top:2700px; }/* 5 */ #cloud6 { margin-top:2250px; }/* 5 */ #cloud4 { animation:cloud4 12s ease-in-out infinite alternate; } @keyframes cloud4 { 0% { transform:scale(1) translate3d(0px,10px,0px); } 100% { transform:scale(1) translate3d(-6vw,0px,0px); } } #cloud5 { animation:cloud5 12s ease-in-out infinite alternate; } @keyframes cloud5 { 0% { transform:scale(1) translate3d(-30px,-10px,0px); } 100% { transform:scale(1) translate3d(3vw,0px,0px); } } #cloud6 { animation:cloud6 14s linear infinite alternate; } @keyframes cloud6 { 0% { transform:scale(.9) translate3d(20px,10px,0px); } 100% { transform:scale(1) translate3d(-2vw,-1vh,0px); } } body #main_row { padding:200px 4vw; min-height:1800px; border-radius: 100px; display: flex; align-items: center; justify-content: center; border:2.5px solid rgba(255,255,255,.5); font-size:2.5rem; } #main2 { width:25vw; min-height:1400px; border-radius: 100px; padding:75px; } #main2 h2 { padding-bottom:20px; border-bottom:2px solid rgba(177, 253, 240, 0.746); font-size:4.5rem; } #main2 p { padding-top:40px; } #about2 { width:25vw; min-height:1400px; border-radius: 100px; padding:80px; margin-left:6vw; } #about2 h2 { padding-bottom:20px; border-bottom:2px solid rgba(177, 253, 240, 0.746); font-size:4.5rem; } #about2 h3 { padding-top:30px; font-size:2.5rem; } #about2 h3:first-of-type { padding-top:40px; font-size:2.5rem; } #about2 p { padding-top:10px; } } @media (max-width: 3000px) and (min-width: 2561px) { .name { top:11vw; } } /* 4K 縦画面 */ @media screen and (min-width: 2160px) and (min-height: 2800px) { body #mainbox { margin-top:100vh; } .border { min-height:100vh; } #cloud4 { margin-top:3000px; }/* 5 */ #cloud5 { margin-top:2700px; }/* 5 */ #cloud6 { margin-top:2250px; }/* 5 */ }