/* 共通部設定 */ @font-face { font-family:'LilyUPC'; src:url('../../font/lilyupc-webfont.eot') format('embedded-opentype'); src:local('Lily UPC'), url('../../font/lilyupc-webfont.eot?iefix') format('embedded-opentype'), url('../../font/lilyupc-webfont.woff') format('woff'), url('../../font/lilyupc-webfont.ttf') format('truetype'), url('../../font/lilyupc-webfont.svg#svgFontName') format('svg'); } body { font-family:'Meiryo','Hiragino Kaku Gothic ProN','MS P Gothic','Helvetica','Verdana','Arial', sans-serif; font-size:14px; line-height:2; color:rgba(0,0,0,.7); background-color:rgb(248, 248, 248); /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#76b4e0+9,77e8ff+32,cdffa8+64,cdffa8+71,cdffa8+71,ffdf77+84,ffd284+98,e7ff70+99&0.59+3,0.65+33,0.83+76,0.34+82,0.88+100 */ background: -moz-linear-gradient(top, rgba(118,180,224,0.59) 3%, rgba(118,180,224,0.6) 9%, rgba(119,232,255,0.65) 32%, rgba(122,233,252,0.65) 33%, rgba(205,255,168,0.78) 64%, rgba(205,255,168,0.81) 71%, rgba(224,243,149,0.83) 76%, rgba(247,228,127,0.34) 82%, rgba(255,223,119,0.4) 84%, rgba(255,210,132,0.82) 98%, rgba(231,255,112,0.85) 99%, rgba(231,255,112,0.88) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(118,180,224,0.59) 3%,rgba(118,180,224,0.6) 9%,rgba(119,232,255,0.65) 32%,rgba(122,233,252,0.65) 33%,rgba(205,255,168,0.78) 64%,rgba(205,255,168,0.81) 71%,rgba(224,243,149,0.83) 76%,rgba(247,228,127,0.34) 82%,rgba(255,223,119,0.4) 84%,rgba(255,210,132,0.82) 98%,rgba(231,255,112,0.85) 99%,rgba(231,255,112,0.88) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(118,180,224,0.59) 3%,rgba(118,180,224,0.6) 9%,rgba(119,232,255,0.65) 32%,rgba(122,233,252,0.65) 33%,rgba(205,255,168,0.78) 64%,rgba(205,255,168,0.81) 71%,rgba(224,243,149,0.83) 76%,rgba(247,228,127,0.34) 82%,rgba(255,223,119,0.4) 84%,rgba(255,210,132,0.82) 98%,rgba(231,255,112,0.85) 99%,rgba(231,255,112,0.88) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9676b4e0', endColorstr='#e0e7ff70',GradientType=0 ); /* IE6-9 */ } .skybg1 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1d3ff+4,0090ff+11,00bbff+55,e1d3ff+78,e1d3ff+100&0.7+3,1+10,0.7+84,0.21+91,0+100 */ background: -moz-linear-gradient(top, rgba(225,211,255,0.7) 3%, rgba(225,211,255,0.74) 4%, rgba(32,154,255,1) 10%, rgba(0,144,255,1) 11%, rgba(0,187,255,0.82) 55%, rgba(225,211,255,0.72) 78%, rgba(225,211,255,0.7) 84%, rgba(225,211,255,0.21) 91%, rgba(225,211,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(225,211,255,0.7) 3%,rgba(225,211,255,0.74) 4%,rgba(32,154,255,1) 10%,rgba(0,144,255,1) 11%,rgba(0,187,255,0.82) 55%,rgba(225,211,255,0.72) 78%,rgba(225,211,255,0.7) 84%,rgba(225,211,255,0.21) 91%,rgba(225,211,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(225,211,255,0.7) 3%,rgba(225,211,255,0.74) 4%,rgba(32,154,255,1) 10%,rgba(0,144,255,1) 11%,rgba(0,187,255,0.82) 55%,rgba(225,211,255,0.72) 78%,rgba(225,211,255,0.7) 84%,rgba(225,211,255,0.21) 91%,rgba(225,211,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3e1d3ff', endColorstr='#00e1d3ff',GradientType=0 ); /* IE6-9 */ opacity:0.5; } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form { margin: 0px;padding: 0px; } h2 { font-family:"LilyUPC"; color:rgb(0, 4, 255); line-height:1; font-weight:normal; } dl { overflow-y:auto; height:200px; padding-left:5px; } dt { float:left; } dd { padding-left:8em; margin-left:0; } /* header,footer部 */ .master { width:100%; } /* mainbox部 */ /* .master2 { margin-right:auto; margin-left:auto; width:90%; } */ /* その他共通設定 */ a:link { text-shadow:2px 2px 4px #fff; } #header { background-color:#e2d0b7; font-family:"LilyUPC"; display:table; position:fixed; top:0; left:0; z-index:99; } #header>* { display:table-cell; text-align:left; vertical-align:top; } #sidemenu { position:fixed; z-index:998; transition:0.8s ease-out; -webkit-transition:0.8s ease-out; -moz-transition:0.8s ease-out; -ms-transition:0.8s ease-out; box-shadow:5px 7px 5px rgba(0,0,0,.5); } span img { width:100%; height:100%; } #navToggle { z-index:97; } #navToggle_sp { z-index:100; } #navToggle img { box-shadow:5px 7px 5px rgba(0,0,0,.5); } footer { background-color:rgba(204,198,186,.3); box-shadow:0 0 3px #eee; } .slideUp { animation:slideup .6s ease-out forwards; } .slideDown { animation:slidedown .5s ease forwards; } @keyframes slideup { 0% { transform: translateY(195px); } 50% { transform: translateY(150px); background-color: rgba(0, 255, 200, 0.1); } 55% { opacity:0; } 100% { transform: translateY(-150px); opacity:0; } } @keyframes slidedown { 0% { transform: translateY(225px); background-color: rgba(0, 255, 200, 0); border:1px solid rgba(255, 255, 255, 0); opacity:0.4; } 50% { background-color: rgba(0, 255, 200, 0.01); border:1px solid rgba(255, 255, 255, 0); opacity:0.5; } 60% { border:1px solid rgba(255, 255, 255, 0.1); opacity:0.6; } 70% { border:1px solid rgba(255, 255, 255, 0.2); opacity:0.7; } 80% { border:1px solid rgba(255, 255, 255, 0.3); opacity:0.9; } 90% { border:1px solid rgba(255, 255, 255, 0.4); opacity:1; } 100% { transform: translateY(195px); background-color: rgba(170, 243, 200, 0); border:1px solid rgba(232, 255, 241, 0.356); opacity:1; } } /* 空色グラデーションレイヤー *//*背景色 元設定 → background-color:#FFFAF0; */ .skybg1 { position:fixed; z-index:4; top:0; right:0; left:0; width:100%; height:100%; margin-right:auto; margin-left:auto; border-radius:30px; } .newicon { background: rgba(255, 58, 84, 0.8); color: #FFF; font-size: 70%; line-height: 1.5; padding: 0 5px; border-radius: 2px; margin: 0px 5px; display: inline-block; vertical-align: text-top; } #page_top { display:none; } #page_top_sp { display:none; } #nav_sp { font-family:"LilyUPC"; } /* **************************** */ /* PC用 [w>=990] */ @media screen and (min-width: 1201px) { body { margin-top:160px; } a img:hover { opacity:0.7; } a:hover { color:#00ffff; text-shadow:0 0 20px #fff; transition:all 0.1s linear; } header#header { height:65px; display:block; box-shadow:0 1px 0px rgba(255, 255, 255, 0.5); background-color: rgba(0, 255, 200, 0.02); position:fixed; top:-185px; left:0; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; left:0; right:0; margin:0 auto; width:89%; } /* header height:75px */ /* header1と2はtablecellなので余白はwidthを合算して計算する */ #header1 { width:250px; padding:10px 0 0 40px; } #header1>a:hover { opacity:0.4; } #header2 { padding:15px 0 0 60px; vertical-align:middle; } /* width:700px; */ #header2>a { margin-right:40px; font-size:40px; line-height:0; } /* #header3 { width:250px; } */ /* サイドメニュー */ #sidemenu { color:rgb(252, 255, 209); border-radius:30px; border:1px solid rgba(221, 255, 242, 0.541); width:300px; height:94%; background-color:rgba(246, 255, 121, 0.15); top:50px; left:0px; } #sidemenu a { text-shadow: pink 1.1px 1.1px 0, pink -1.1px -1.1px 0, pink -1.1px 1.1px 0, pink 1.1px -1.1px 0, pink 0 1.1px 0, pink 0 -1.1px 0, pink -1.1px 0 0, pink 1.1px 0 0; } #sidemenu a:hover { color: rgba(223, 107, 107, 0.794); } #sidemenu.opennav { transform:translateX(-100%); } #navToggle { cursor:pointer; text-align:left; position:fixed; top:100px; left:-150px; transition:all .95s ease-out; z-index:999; opacity:0.8; } #navToggle.opennav { transform: translateX(310px) translateY(-25px) scale(0.7,0.7) rotate(0deg); opacity:1; z-index:999; } #navToggle_sp { display:none; } #nav { text-align:left; padding:30px 0 0 40px; line-height:2; font-size:30px; } /* ウィンドウ両サイドボーダー */ /* z-index原本　bg$:6, bg$_2:5 */ .background { transition: opacity 1s; width:7%; } #background1 { position:fixed; z-index:4; top:0; left:0; right:0; height:100%; background-color:rgb(3,6,37); } /* (6, 15, 139,.5); */ #background2 { position:fixed; z-index:4; top:0; right:0; height:100%; background-color:rgb(3,6,37); } /* (6, 15, 139,.5); */ /* #background1_2 { position:fixed; z-index:5; top:0; left:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } */ /* #background2_2 { position:fixed; z-index:5; top:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } */ /* background@-2の元の色→rgb(0,0,0) */ /* アニメーションなしの両サイドボーダー */ .background_m { transition: opacity 1s; width:4.7%; } #background1_m { position:fixed; z-index:7; top:0; left:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #background2_m { position:fixed; z-index:7; top:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #background1_2_m { position:fixed; z-index:6; top:0; left:0; right:0; height:100%; background-color:rgb(0, 0, 0); } #background2_2_m { position:fixed; z-index:6; top:0; right:0; height:100%; background-color:rgb(0, 0, 0); } #navToggle_sp,#nav_sp,#close_btn { display:none; } #navToggle_sp_2 { display:none; } #close_btn_sp_2 { display:none; } footer { position:relative; z-index:98; margin-top:1000px; height:100px; } #footer2 { position:absolute; right:100px; bottom:0; font-size:1.1rem; } /* スライドメニュー設定 */ #nav_sp { display:none; text-align:left; position:fixed; top:0; width:27vw; height:100vh; background-color:rgba(0, 0, 0, 0.264); right:0; font-size:2.8rem; z-index:998; overflow:auto; } #nav_sp ul { display:block; margin:0 auto; width:90%; } #nav_sp ul li { border-bottom:1px solid #fff; text-align:center; } #nav_sp ul li:first-child { padding-top:20%; } #nav_sp ul li:last-child { border:none; } #nav_sp ul li a { display:block; padding:12px; letter-spacing:0.05em; } #navToggle_pc { display:block; width:30px; height:80px; position:fixed; top:10vh; right:0; z-index:999; background-color:rgba(0, 0, 0, 0.5); } #navToggle_pc div { position:relative; } #navToggle_pc span { display:block; height:3px; background:rgb(255, 255, 255); position:absolute; width:100%; right:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; transition:0.5s ease-in-out; } #menu_span1 { transform:translateX(8px) translateY(38px) rotate(90deg); } #menu_span2 { transform:translateX(1px) translateY(38px) rotate(90deg); } #menu_span3 { transform:translateX(-6px) translateY(38px) rotate(90deg); } .open#navToggle_pc { display:none; } /* .open #sidemenu_sp span:nth-child(1) { top:12px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg); } .open #sidemenu_sp span:nth-child(2) { width:0; left:50%; } .open #sidemenu_sp span:nth-child(3) { top:12px; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); transform:rotate(-135deg); } */ /* #sidemenu_sp span:nth-child(1) { top:0px; } #sidemenu_sp span:nth-child(2) { top:12px; } #sidemenu_sp span:nth-child(3) { top:24px; } */ .no-scroll { overflow:hidden; } #close_btn_pc { display:none; position:fixed; z-index:999; top:0; right:0; width:3vw; height:100vh; background-color:rgba(0, 0, 0, 0.264); border:none; color:#fff; font-size:2em; -webkit-transition:.8s ease-out; -moz-transition:.8s ease-out; -ms-transition:.8s ease-out; transition:.8s ease-out; } } /* **************************** */ /* タブレット１ [768>w>=640] */ @media screen and (max-width: 1200px) and (min-width: 601px) { body { margin-top:16%; } img { width:100%; } .master2 { width:88%; } header { text-align:left; color:#666; box-shadow:0 2px 5px rgba(0,0,0,.5); } header#header { box-shadow:0 1px 0px rgba(255, 255, 255, 0.5); display:block; background-color: rgba(0, 255, 200, 0.02); position:fixed; top:-185px; left:0; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; left:0; right:0; margin:0 auto; width:90%; } /* ウィンドウ両サイドボーダー */ /* z-index原本　bg$:6, bg$_2:5 */ .background { transition: opacity 1s; width:7%; } #background1 { position:fixed; z-index:6; top:0; left:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #background2 { position:fixed; z-index:6; top:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #background1_2 { position:fixed; z-index:5; top:0; left:0; right:0; height:100%; background-color:rgb(0, 0, 0); } #background2_2 { position:fixed; z-index:5; top:0; right:0; height:100%; background-color:rgb(0, 0, 0); } /* アニメーションなしの両サイドボーダー */ .background_m { transition: opacity 1s; width:3.7%; } #background1_m { position:fixed; z-index:989; top:0; left:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #background2_m { position:fixed; z-index:989; top:0; right:0; height:100%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #background1_2_m { position:fixed; z-index:988; top:0; left:0; right:0; height:100%; background-color:rgb(0, 0, 0); } #background2_2_m { position:fixed; z-index:988; top:0; right:0; height:100%; background-color:rgb(0, 0, 0); } #header1 { width:35%; padding:1.7% 0 0 5%; } #header2 { padding:1% 0 0 8%; } #header2>a { margin-right:5%; font-size:3vw; } #sidemenu { display:none !important; border-radius:30px; border:10px solid #fff; width:300px; height:400px; background-color:#eee; top:150px; left:0px; display:none; } #sidemenu.opennav { display:none !important; transform:translateX(-100%); display:none; } #navToggle { display:none !important; cursor:pointer; text-align:left; position:fixed; top:180px; left:-150px; transition:1s ease-in-out; } #navToggle.opennav { display:none !important; transform:translateX(310px) translateY(-25px) scale(0.7,0.7) rotate(750deg); } #nav { display:none; } /* スライドメニュー設定 */ #nav_sp { display:none; text-align:left; position:fixed; top:0; width:60vw; height:100vh; background-color:rgba(0, 0, 0, 0.264); right:0; font-size:3.5rem; z-index:998; overflow:auto; } #nav_sp ul { display:block; margin:0 auto; width:90%; } #nav_sp ul li { border-bottom:1px solid #fff; text-align:center; } #nav_sp ul li:first-child { padding-top:10%; } #nav_sp ul li:last-child { border:none; } #nav_sp ul li a { display:block; } #navToggle_sp { display:block; width:30px; height:80px; position:fixed; top:10vh; right:0; z-index:999; background-color:rgba(0, 0, 0, 0.5); } #navToggle_sp div { position:relative; } #navToggle_sp span { display:block; height:3px; background:rgb(255, 255, 255); position:absolute; width:100%; right:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; transition:0.5s ease-in-out; } #menu_span1 { transform:translateX(8px) translateY(38px) rotate(90deg); } #menu_span2 { transform:translateX(1px) translateY(38px) rotate(90deg); } #menu_span3 { transform:translateX(-6px) translateY(38px) rotate(90deg); } .open#navToggle_sp { display:none; } /* .open #sidemenu_sp span:nth-child(1) { top:12px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg); } .open #sidemenu_sp span:nth-child(2) { width:0; left:50%; } .open #sidemenu_sp span:nth-child(3) { top:12px; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); transform:rotate(-135deg); } */ /* #sidemenu_sp span:nth-child(1) { top:0px; } #sidemenu_sp span:nth-child(2) { top:12px; } #sidemenu_sp span:nth-child(3) { top:24px; } */ .no-scroll { overflow:hidden; } #close_btn { display:none; position:fixed; z-index:999; top:0; right:0; width:6vw; height:100vh; background-color:rgba(0, 0, 0, 0.264); border:none; color:#fff; font-size:2em; -webkit-transition:.8s ease-out; -moz-transition:.8s ease-out; -ms-transition:.8s ease-out; transition:.8s ease-out; } #navToggle_sp_2 { display:none; } #close_btn_sp_2 { display:none; } #close_btn_pc { display:none; } /* ！！！　スライドメニュー設定　ここまで　！！！ */ footer { position:relative; z-index:98; height:80px; margin-top:80%; } #footer2 { font-size:2vw; position:absolute; bottom:0; left:50%; transform:translate(-50%, -50%); } } /* **************************** */ /* スマホ [480>=w] */ @media screen and (max-width: 600px) { /* body { margin-top:19%; font-weight: normal; } img { width:100%; } .master2 { width:92%; } header { padding-right:60%; text-align:left; background-color:#110000; height:50px; box-shadow:0 2px 5px rgba(0,0,0,.5); } #header1 { padding:3% 4% 0 2%; background-color:#fffcf1; vertical-align:middle; } #header2 { display:none; } #sidemenu { display:none; } #navToggle_sp { text-align:right; position:fixed; top:0px; right:0px; transition-property:none; } #navToggle { display:none; } footer { position:relative; height:80px; margin-top:50%; } #footer2 { color: #ddd; font-size:3vw; position:absolute; bottom:0; right:5%; transform:translate(0, -50%); } */ /* スマホ オーバーレイメニュー */ /* #overray { z-index:100; position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:rgba(0,0,0,.5); } #btn { cursor:pointer; } #sidemenu_sp { position:relative; z-index:101; margin:8% auto auto; border-radius:30px; border:10px solid #fff; width:90%; height:90%; background-color:#eee; } #nav { width: 90%; height: 90%; z-index:121; position:absolute; font-size:10vw; font-weight:600; text-align:center; padding-top: 10%; line-height: 2.2; color:#339933; top:0; left:0; right:0; bottom:0; margin:auto; } */ body { margin-top:16%; } img { width:100%; } .master2 { width:96%; } header { text-align:left; color:#666; box-shadow:0 2px 5px rgba(0,0,0,.5); } header#header { box-shadow:0 1px 0px rgba(255, 255, 255, 0.5); display:block; background-color: rgba(0, 255, 200, 0.02); position:fixed; top:-195px; left:0; z-index:100; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; left:0; right:0; margin:0 auto; width:97%; display:none; } /* スマホ用ウィンドウ両サイドボーダー(トップページ) */ /* z-index原本　bg$:6, bg$_2:5 */ .sp_background { height:12%; transition: opacity 1s; width:100%; } #sp_background1 { position:fixed; z-index:99; top:0; left:0; right:0; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #sp_background2 { position:fixed; z-index:99; bottom:0; right:0; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #sp_background1_2 { position:fixed; z-index:98; top:0; left:0; right:0; background-color:rgb(0, 0, 0); } #sp_background2_2 { position:fixed; z-index:98; bottom:0; right:0; background-color:rgb(0, 0, 0); } /* スマホ用ウィンドウ両サイドボーダー(トップ以外) */ /* z-index原本　bg$:6, bg$_2:5 */ .sp_background_com { height:7%; transition: opacity .8s; width:100%; } #sp_background_com1 { position:fixed; z-index:99; top:0; left:0; right:0; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #sp_background_com2 { display:none; position:fixed; z-index:99; bottom:0; right:0; height:6%; background-color:rgba(14, 31, 185, 0.2); } /* (6, 15, 139,.5); */ #sp_background_com1_2 { position:fixed; z-index:98; top:0; left:0; right:0; background-color:rgb(0, 0, 0); } #sp_background_com2_2 { display:none; position:fixed; z-index:98; bottom:0; right:0; height:6%; background-color:rgb(0, 0, 0); } .background { display:none; } #header1 { width:35%; padding:2.5% 0 0 5%; } #header2 { padding:1% 0 0 8%; } #header2>a { margin-right:5%; font-size:4vw; } #sidemenu { display:none; } #navToggle,#toggle { display:none; } #nav { display:none; } /* スライドメニュー設定 */ #nav_sp { display:none; text-align:left; position:fixed; top:0; width:70vw; height:100vh; background-color:rgba(0, 0, 0, 0.264); right:0;font-size:2.5rem; z-index:998; overflow:auto; } #nav_sp ul { display:block; margin:0 auto; width:90%; } #nav_sp ul li { border-bottom:1px solid #fff; text-align:center; padding-top:1%; padding-bottom:1%; } #nav_sp ul li:first-child { padding-top:30%; } #nav_sp ul li:last-child { border:none; } #nav_sp ul li a { display:block; } #navToggle_sp { display:none; } #navToggle_sp_2 { display:block; width:40px; height:40px; position:fixed; top:10px; right:10px; z-index:999; } #navToggle_sp_2 div { position:relative; } #navToggle_sp_2 span { display:block; height:3px; background:rgb(255, 255, 255); position:absolute; width:100%; right:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; transition:0.5s ease-in-out; } #menu_span1 { transform:translateY(0px); } #menu_span2 { transform:translateY(12px); } #menu_span3 { transform:translateY(24px); } .open#navToggle_sp_2 { display:none; } /* .open #sidemenu_sp span:nth-child(1) { top:12px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg); } .open #sidemenu_sp span:nth-child(2) { width:0; left:50%; } .open #sidemenu_sp span:nth-child(3) { top:12px; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); transform:rotate(-135deg); } */ /* #sidemenu_sp span:nth-child(1) { top:0px; } #sidemenu_sp span:nth-child(2) { top:12px; } #sidemenu_sp span:nth-child(3) { top:24px; } */ .no-scroll { overflow:hidden; } #close_btn { display:none; } #close_btn_sp_2 { display:none; position:fixed; z-index:999; top:0; right:0; width:12vw; height:100vh; background-color:rgba(0, 0, 0, 0.264); border:none; color:#fff; font-size:2em; -webkit-transition:.8s ease-out; -moz-transition:.8s ease-out; -ms-transition:.8s ease-out; transition:.8s ease-out; } #close_btn_pc { display:none; } /* ！！！　スライドメニュー設定　ここまで　！！！ */ footer { position:relative; z-index:98; height:60px; margin-top:100%; } #footer2 { font-size:3vw; position:absolute; bottom:0; right:0; transform:translate(0, -50%); } } /* オーバーレイ */ /* #overray { z-index:100; position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:rgba(0,0,0,.7); } #btn { cursor:pointer; } #close { z-index:101; cursor:pointer; position:absolute; top:50%; right:50%; border:1px solid #fff; background-color:#fff; font-size:5vw; font-weight:700; } #close:hover { color:#0f0; } */ /* スマホ用 */ @media (max-width: 600px) { /* .sp_background { height:12dvh!important; } */ /* スライドメニュー設定 */ #nav_sp { width:60vw; } footer { margin-top:100dvh; height:10vh; } } /* タブレット用（1024～600） */ @media (min-width: 601px) and (max-width: 1200px) { body { font-size:1rem; } header#header { } #header1 img#logo { width:30vw; height:5.5vw; margin-top:0.2vw; } #header2 { padding-top:0.1vw; padding-left:9vw; vertical-align:middle; } #header2>a { font-size:2rem; } footer { margin-top:100dvh; height:12vw; } } @media (min-width: 811px) { body { font-size:1.3rem; } #header2 { padding-top:0.1vw; padding-left:9vw; vertical-align:middle; } #header2>a { font-size:3rem; } } @media (min-width: 1025px) and (max-width: 1200px) { #header2 { padding-top:0.7vw; } } @media (min-width: 1025px) and (max-width: 1150px) { #header2 { padding-top:0.4vw; } } @media (min-width: 961px) and (max-width: 1024px) { #header1 img#logo { width:30vw; height:5.5vw; margin-top:0.5vw; } #header2 { padding-top:0.01vw; } } @media (min-width: 901px) and (max-width: 960px) { header#header { font-size:0.8rem; } #header1 img#logo { width:32vw; height:5.7vw; margin-top:0.6vw; } #header2 { padding-top:0vw; } } @media (min-width: 861px) and (max-width: 900px) { header#header { font-size:0.8rem; } #header1 img#logo { width:32vw; height:5.7vw; margin-top:0.95vw; } #header2 { padding-top:0vw; } } @media (min-width: 811px) and (max-width: 861px) { header#header { font-size:0.8rem; } #header1 img#logo { width:30vw; height:5.5vw; margin-top:1.4vw; } #header2 { padding-top:0vw; } } /* @media (min-width: 701px) and (max-width: 810px) { header#header { font-size:0.8rem; } #header1 img#logo { width:30vw; height:5.5vw; margin-top:1vw; } #header2 { padding-top:0vw; } } */ @media (min-width: 651px) and (max-width: 700px) { header#header { font-size:0.8rem; } #header1 img#logo { width:30vw; height:5.5vw; margin-top:0.35vw; } #header2 { padding-top:0vw; } } @media (min-width: 621px) and (max-width: 650px) { header#header { font-size:0.8rem; } #header1 img#logo { width:30vw; height:5.5vw; margin-top:0.6vw; } #header2 { padding-top:0vw; } } @media (min-width: 601px) and (max-width: 620px) { header#header { font-size:0.8rem; } #header1 img#logo { width:30vw; height:5.5vw; margin-top:0.8vw; } #header2 { padding-top:0vw; } } /* PC用フルHD */ @media (min-width: 1201px) { body { font-size:0.95rem; } #header2 { padding-top:14.5px; padding-left:4vw; } footer { height:130px; margin-top:1080px; } /* header#header { height:65px; border-radius: 50px; } #header1 { width:600px; padding:10px 0 0 40px; } #header1 img#logo { width:480px; height:80px; } #header2 { padding:15px 0 0 60px; vertical-align:middle; } #header2>a { margin-right:140px; font-size:5rem; line-height:0; } footer { height:220px; margin-top:100vh; } #footer2 { font-size:1.5rem; } */ } @media (min-width: 1201px) and (max-width: 1501px) { body { font-size:0.9rem; } } /* WQHD */ @media (min-width: 1921px) { body { font-size:1.5rem; } a:link { text-shadow:6px 6px 10px #fff; } header#header { height:110px; border-radius: 50px; border:1.5px solid rgba(255, 255, 255, 0.5)!important; } #header1 { width:600px; padding:10px 0 0 40px; } #header1 img#logo { width:480px; height:80px; } #header2 { padding:19px 0 0 60px; vertical-align:middle; } #header2>a { margin-right:140px; font-size:5rem; line-height:0; } footer { height:170px; margin-top:1440px; } #footer2 { font-size:1.5rem; right:130px; } #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); } } /* 4k */ @media (min-width: 2561px) { body { font-size:2rem; } a:link { text-shadow:8px 8px 12px #fff; } header#header { height:150px; border-radius: 50px; border:2.5px solid rgba(255, 255, 255, 0.5)!important; } #header1 { width:600px; padding:20px 0 0 40px; } #header1 img#logo { width:550px; height:100px; } #header2 { padding:32.5px 0 0 140px; vertical-align:middle; } #header2>a { margin-right:140px; font-size:6rem; line-height:0; } footer { height:280px; margin-top:2160px; } #footer2 { font-size:2.5rem; right:200px; } #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); } }