/*基本*/ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*↑各ブラウザでのpadding等の計算方法の統一*/ html{ font-size: 62.5%; /*↑文字サイズ基準（62.5%で1remが10pxに近似）*/ } body{ background-color: #000000; /*↑背景色*/ background-image: url(img/01.jpg); /*↑背景画像*/ color:#000000; /*↑文字色*/ /*-webkit-font-smoothing: antialiased;*/ /*↑safariで文字が太くなる対策*/ -webkit-text-size-adjust: 100%;* /*↑iphoneで文字が大きくなる対策*/ /*↑Android向けに更にHTML内内で「maximum-scale=1.0」を指定*/ max-height: 100%; /*↑Androidのchromeで文字が太くなる対策*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*↑スマホでタップした時に出る黒い背景を透明に*/ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; /*↑テキスト選択禁止*/ } /*背景を見せるための余白。上はスマホ用*/ @media screen and (max-width: 768px){ #spes{ width:1160px; font-weight: bold; } } @media screen and (min-width: 769px){ #spes{ width:1160px; } } /*内容を乗せる為の紙*/ #wrap{ width:740px; height:530px; margin-top:18px; margin-bottom:20px; margin-left:370px; background: rgba(255,255,248,0.8); border:solid 0px #333; border-radius: 2px 2px 2px 2px; } /*各ページ範囲*/ .post { width: 370px; height:520px; margin-top:5px; border-top:dotted 1px #333; border-bottom:dotted 1px #333; font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif; float: right; overflow:hidden; } /*サイト名*/ .head { /*Other Browser*/ background:#336633; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(153,000,051,0.8) 0%, rgba(051,102,051,0.2) 10%, rgba(051,102,051,0.2) 90%, rgba(153,000,051,0.8) 100% ), top, rgba(153,000,051,0.8) 0%, rgba(051,102,051,0.2) 10%, rgba(051,102,051,0.2) 90%, rgba(153,000,051,0.8) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(153,000,051,0.8) 0%, rgba(051,102,051,0.2) 10%, rgba(051,102,051,0.2) 90%, rgba(153,000,051,0.8) 100% ), linear-gradient( 0deg, rgba(153,000,051,0.8) 0%, rgba(051,102,051,0.2) 2%, rgba(051,102,051,0.2) 98%, rgba(153,000,051,0.8) 100% ); border-radius: 4px 4px 4px 4px; display:block; margin-left:2px; float: right; width: 30px; height:360px; } .hemo20{ width:24px; font-size: 24px; line-height: 24px; margin:0 auto; font-weight: bold; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(255, 255, 255, 0.5); display:block; color:rgba(0, 100, 100, 1); } /*段落タイトル*/ .title { /*Other Browser*/ background: #007777; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(051,102,051,0.8) 0%, rgba(255,255,248,0.4) 10%, rgba(255,255,248,0.4) 90%, rgba(051,102,051,0.8) 100% ), -webkit-linear-gradient( top, rgba(051,102,051,0.8) 0%, rgba(255,255,248,0.4) 6%, rgba(255,255,248,0.4) 94%, rgba(051,102,051,0.8) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(051,102,051,0.8) 0%, rgba(255,255,248,0.4) 10%, rgba(255,255,248,0.4) 90%, rgba(051,102,051,0.8) 100% ), linear-gradient( 0deg, rgba(051,102,051,0.8) 0%, rgba(255,255,248,0.4) 6%, rgba(255,255,248,0.4) 94%, rgba(051,102,051,0.8) 100% ); display:block; border-radius: 4px 4px 4px 4px; width: 50px; color:#000000; } .tlt10{ width:20px; font-size: 20px; line-height: 20px; margin:0 auto; font-weight: bold; display:block; color:rgba(0, 0, 0, 1); } /*縦書き関係*/ /*縦書き文字サイズ20px*/ .tate20{ width:20px; font-size: 20px; line-height: 20px; display:block; float: right; } /*縦書き文字サイズ18px*/ .tate18{ width:18px; font-size: 18px; line-height: 18px; display:block; float: right; } /*改行15px；ボタン*/ .kaigyo15{ margin:15px; } /*改行6px；本文*/ .kaigyo075{ margin:6px; } /*改行2px；半分*/ .kaigyo02{ margin:2px; } /*句読点位置合わせ*/ .ten01 { display:block; margin:0; position:relative; left: 15px; bottom: 12px; } /*句読点位置合わせの後に回転等を行うときは、次の要素の前に空白（kuu）を入れる*/ /*拗音（っゅぇょ）用位置合わせ*/ .tuu01 { display:block; margin:0; position:relative; left: 2px; top: -3px; } /*伸ばし棒（ー、〜）用*/ .bou{ -webkit-transform: scale(-1,1) rotate( 90deg ); transform: scale(-1,1) rotate( 90deg ); } /*半角英数字記号、かっこ回転用*/ .han{ -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } /*空白１文字*/ .kuu{ height: 20px; } /*文字色青?*/ .ao{ font-size: 16px; color:rgba(70,60,40,1); } /*ボタン関係*/ .tot { display:block; float: right; } .bosi50{ height:50px; } .bosi200{ height:200px; } .bosi260{ height:260px; } .bosi520{ height:520px; } /*頁操作ボタン*/ .menuw { background-color: #FFFFFF; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(170,170,170,0.8) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(170,170,170,0.8) 100% ), -webkit-linear-gradient( top, rgba(170,170,170,0.8) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(170,170,170,0.8) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(170,170,170,0.8) 0%, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0.4) 90%, rgba(170,170,170,0.8) 100% ), linear-gradient( 0deg, rgba(170,170,170,0.8) 0%, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0.4) 90%, rgba(170,170,170,0.8) 100% ); width: 50px; border-radius: 6px; display:block; text-decoration: none; color:#000000; } /*お品書き用ボタン濃緑*/ .menur { /*Other Browser*/ background: #007777; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(255,255,255,1) 0%, rgba(200,193,200,0.2) 5%, rgba(200,193,200,0.2) 95%, rgba(150,150,143,1) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(255,255,255,1) 0%, rgba(150,180,150,0.2) 5%, rgba(150,180,150,0.2) 95%, rgba(150,143,143,1) 100% ); display:block; border-bottom:solid 1px rgba(200,200,193,1); width: 67px; color:#000000; } /*お品書き用ボタン黄緑*/ .menul { /*Other Browser*/ background: #007777; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(255,255,255,1) 0%, rgba(200,255,240,0.2) 5%, rgba(200,255,240,0.2) 95%, rgba(200,200,193,1) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(255,255,255,1) 0%, rgba(200,255,240,0.2) 5%, rgba(200,255,240,0.2) 95%, rgba(200,200,193,1) 100% ); display:block; border-bottom:solid 1px rgba(200,200,193,1); width: 67px; color:#000000; } .hov{ background:#dddddd; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(255,255,248,0.8) 0%, rgba(051,102,051,0.3) 15%, rgba(051,102,051,0.3) 85%, rgba(255,255,248,0.8) 100% ), -webkit-linear-gradient( top, rgba(255,255,248,0.8) 0%, rgba(051,102,051,0.3) 8%, rgba(051,102,051,0.3) 92%, rgba(255,255,248,0.8) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(255,255,248,0.8) 0%, rgba(051,102,051,0.3) 15%, rgba(051,102,051,0.3) 85%, rgba(255,255,248,0.8) 100% ), linear-gradient( 0deg, rgba(255,255,248,0.8) 0%, rgba(051,102,051,0.3) 8%, rgba(051,102,051,0.3) 92%, rgba(255,255,248,0.8) 100% ); color:#ffffff; cursor:pointer; } .dow{ background:#990000; /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(255,255,248,0.8) 0%, rgba(110,0,180,0.3) 20%, rgba(110,0,180,0.3) 80%, rgba(255,255,248,0.8) 100% ), -webkit-linear-gradient( top, rgba(255,255,248,0.8) 0%, rgba(110,0,180,0.3) 20%, rgba(110,0,180,0.3) 80%, rgba(255,255,248,0.8) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(255,255,248,0.8) 0%, rgba(110,0,180,0.3) 20%, rgba(110,0,180,0.3) 80%, rgba(255,255,248,0.8) 100% ), linear-gradient( 0deg, rgba(255,255,248,0.8) 0%, rgba(110,0,180,0.3) 20%, rgba(110,0,180,0.3) 80%, rgba(255,255,248,0.8) 100% ); color:#ffffff; cursor:pointer; } /*↑ボタン関係*/ /*頁操作ボタンベース*/ #page001 { height:200px; overflow:hidden; } #page002 { height:200px; overflow:hidden; } #page003 { height:200px; overflow:hidden; } #page004 { height:200px; overflow:hidden; } #page005 { height:200px; overflow:hidden; } #page006 { height:200px; overflow:hidden; } #page007 { height:200px; overflow:hidden; } #page008 { height:200px; overflow:hidden; } #page009 { height:200px; overflow:hidden; } /*↑頁操作ボタン*/ /*トップページindex.html*/ /*トップページindex.html*/ /*↓お品書き段落内↓*/ /*お品書き大枠*/ .osioya{ width: 201px; height: 520px; float: right; } /*お品書き段組*/ .osiko{ width: 201px; height: 260px; } /*お品書き・装飾*/ .omaru { margin:0; position:relative; right: 21px; font-size: 30px; line-height: 20px; color: rgba(0, 0, 0, 0.5); } .sankaku { margin:0; position:relative; right: 18px; font-size: 20px; line-height: 20px; color: rgba(0, 0, 0, 0.5); } .tasubatu { display:block; position:relative; left: 5px; } /*↑お品書き段落内↑*/ .tuuoya{ width: 268px; height: 520px; float: right; } /*お品書き段組*/ .tuuko{ width: 268px; height: 260px; } /*ほっこり通信*/ #tuusin { width: 268px; height: 260px; border:solid 1px #999999; border-radius: 5px 5px 5px 5px; background:#ffffff; padding:4px; font-size: 16px; line-height: 20px; display:block; float: right; } .hanbun { width: 201px; height: 260px; background: rgba(255, 255, 255, 0.5); display:block; float: right; overflow:hidden; } /*twitter*/ #twitter { width: 268px; height: 500px; display:block; float: right; overflow:hidden; } /*tumblr*/ .tumb { width: 134px; height: 520px; margin: 0; background: rgba(255, 255, 255, 0.5); display:block; float: right; overflow:hidden; } /*↓tumblrウィジェットー*/ .thumbnail_0 img, .thumbnail_1 img, .thumbnail_2 img, .thumbnail_3 img, .thumbnail_4 img, .thumbnail_5 img, .thumbnail_6 img, .thumbnail_7 img, .thumbnail_8 img, .thumbnail_9 img, .thumbnail_10 img, .thumbnail_11 img { width: 50px; border-radius: 5px 5px 5px 5px; float: right; } .thumbnails ul li { border-top: none; padding: 0; list-style: none; margin: 0; float: left; } /*↑tumblrウィジェットー*/ /*りんく*/ .linfre { width: 201px; height: 520px; display:block; float: right; } /*カウンター関係*/ #ciframe{ width: 450px; height: 40px; border:solid 0px #999999; -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); display:block; float: right; position:relative; right: 130px; bottom: 260px; } /*タロット１枚*/ #tar1{ background:#003399; background:rgba(000,051,153,0.6); /*For Old WebKit*/ background: -webkit-linear-gradient( left, rgba(255,255,248,0.8) 0%, rgba(000,051,153,0.3) 15%, rgba(000,051,153,0.3) 85%, rgba(255,255,248,0.8) 100% ), -webkit-linear-gradient( top, rgba(255,255,248,0.8) 0%, rgba(000,051,153,0.3) 8%, rgba(000,051,153,0.3) 92%, rgba(255,255,248,0.8) 100% ); /*For Modern Browser*/ background: linear-gradient( 270deg, rgba(255,255,248,0.8) 0%, rgba(000,051,153,0.3) 15%, rgba(000,051,153,0.3) 85%, rgba(255,255,248,0.8) 100% ), linear-gradient( 0deg, rgba(255,255,248,0.8) 0%, rgba(000,051,153,0.3) 8%, rgba(000,051,153,0.3) 92%, rgba(255,255,248,0.8) 100% ); width: 0px; height:0px; margin-top:5px; display:block; position:relative; border-radius: 5px 5px 5px 5px; left: 2220px; bottom: 520px; overflow:hidden; } #tar2{ margin-top:20px; margin-left:20px; border-radius: 5px 5px 5px 5px; } .tar3{ width: 36px; height:36px; margin:5px; display:block; border:solid 1px #999999; border-radius: 50%; background: rgba(255, 255, 255, 0.5); font-size:50px; line-height: 28px; color:rgba(0, 0, 0, 0.5); position:relative; bottom: 28px; } #tar4{ width: 370px; height:530px; display:block; position:relative; right: 0px; bottom: 560px; } /*↑トップページindex.html*/ /*フッター*/ #foot { padding-top:5px; padding-left:10px; padding-bottom:5px; margin-top:10px; border:solid 1px #333; border-radius: 5px 5px 5px 5px; background-color: #007777; box-shadow: 3px 3px 0px gray; text-align:center; color:#ffffff; } /*ランダム表示用iframe*/ .ifra{ border:solid 1px #999999; border-radius: 5px 5px 5px 5px; vertical-align: bottom; } /*その他*/ #etcbas { height:0px; overflow:hidden; } /*タロット占いのお部屋*/ /*トップ画像*/ .cimg { display: block; margin-left:auto; margin-right:auto; } .timg { display: block; margin-left:auto; margin-right:auto; width:100px; height:78px; opacity: 0.5; } /*占い方*/ /*ギリシャ十字展開法*/ #giri10{ width: 538px; height:0pX; overflow:hidden; } #kerut10{ width: 538px; height:0pX; overflow:hidden; } #heki{ width: 538px; height:0pX; overflow:hidden; } #v01{ width: 538px; height:0pX; overflow:hidden; } #sankaku{ width: 538px; height:0pX; overflow:hidden; } /**/ /*占い*/ /*各配置共通*/ /*占い説明*/ #setumei{ width: 538px; height:0pX; overflow:hidden; } /*復活の呪文*/ #save{ width: 540px; height:0pX; overflow:hidden; } .bigf{ width: 520px; height: 20px; font-size: 120%; } /**/ /*カードを選ぶ*/ #erabas{ width: 540px; height:356px; font-size: 100%; overflow:hidden; } .tarot01 { width: 43px; height: 93px; float: left; border:solid 1px #333; background-color: #FFFFFF; padding:2px; margin:8px; display:block; border-radius: 4px 4px 4px 4px; text-decoration: none; box-shadow: 2px 2px 0px gray; } .tarot01:hover{ background:#339999; } .tarot01:active{ background:#990000; position: relative; top: 2px; left: 2px; box-shadow: 0px 0px 0px gray; } .tarot02 { overflow:hidden; } /**/ /*配置*/ #tarot03 { width: 540px; height:0pX; overflow:hidden; } .tarot04 { width: 200px; height: 380px; margin-top:18px; float: left; } .tarot05 { margin-left:240px; } /*カードの意味*/ #imi{ width: 544px; height:0pX; overflow:hidden; } /*各配置共通の画像*/ .giri00 { width: 48px; height: 98px; position:relative; border:solid 1px #333; background-color: #FFFFFF; padding:2px; display:block; border-radius: 4px 4px 4px 4px; text-decoration: none; box-shadow: 2px 2px 0px gray; } .giri00:hover{ background:#339999; } .giri00:active{ background-color: #990000; position: relative; left: 2px; top: 2px; box-shadow: 0px 0px 0px gray; } /*ギリシャ十字法の配置*/ .girib { width: 70px; height: 128px; border:solid 0px #333; background-color: #FFFFF8; font-family:serif; font-size: 80%; font-weight: 600; line-height: 180%; } .girib:hover{ color:#339999; } .girib:active{ color:#990000; } /*配置の1枚目の位置*/ .giri00b { position:relative; top:116px; } /*配置の2枚目の位置*/ .giri01b { position:relative; top:116px; left:84px; } /*配置の3枚目の位置*/ .giri02b { position:relative; bottom:146px; left:80px; } /*配置の4枚目の位置*/ .giri03b { position:relative; top:120px; left:6px; } /*配置の5枚目の位置*/ .giri04b { position:relative; left:80px; bottom:140px; } /*二者択一法の配置*/ .vijib { width: 70px; height: 128px; border:solid 0px #333; background-color: #FFFFF8; font-family:serif; font-size: 80%; font-weight: 600; line-height: 180%; } .vijib:hover{ color:#339999; } .vijib:active{ color:#990000; } /*配置の1枚目の位置*/ .viji00b { position:relative; top:246px; left:84px; } /*配置の2枚目の位置*/ .viji01b { position:relative; top:116px; right:32px; } /*配置の3枚目の位置*/ .viji02b { position:relative; bottom:12px; left:124px; } /*配置の4枚目の位置*/ .viji03b { position:relative; right:70px; bottom:144px; } /*配置の5枚目の位置*/ .viji04b { position:relative; left:158px; bottom:272px; } /**/ /*アルカナ一覧*/ #arukana { width: 0px; height:0px; overflow:hidden; margin-left:8px; border:solid 1px #333; border-radius: 5px 5px 5px 5px; background-color: #FFFFF8; box-shadow: 3px 3px 0px gray; position: fixed; top: 34px; z-index:1; } .navi3 { height:80px; padding:0px; margin-top:10px; background-color: #FFFFF8; } .menu5 { width: 266px; height: 28px; border:solid 1px #333; border-radius: 5px 5px 5px 5px; background-color: #FFFFFF; margin-top:5px; margin-bottom:5px; display:block; text-align:center; text-decoration: none; font-size: 136%; color:#000000; font-family:serif; line-height: 120%; font-weight: 600; box-shadow: 2px 2px 0px gray; } .menu5:hover{ background:#339999; color:#ffffff; } .menu5:active{ background:#990000; color:#ffffff; box-shadow: 0px 0px 0px gray; position: relative; top: 2px; left: 2px; } .menu7 { width: 266px; height: 28px; position: relative; bottom: 35px; left: 273px; border:solid 1px #333; border-radius: 5px 5px 5px 5px; background-color: #FFFFFF; margin-top:5px; margin-bottom:5px; display:block; text-align:center; text-decoration: none; font-size: 136%; color:#000000; font-family:serif; line-height: 120%; font-weight: 600; box-shadow: 2px 2px 0px gray; } .menu7:hover{ background:#339999; color:#ffffff; } .menu7:active{ background:#990000; color:#ffffff; box-shadow: 0px 0px 0px gray; position: relative; bottom: 33px; left: 274px; } /**/ .navi2 { position: fixed; bottom: 5px; } .navi2:active{ position: fixed; bottom: 1px; } .menu2 { width: 60px; height: 40px; float: left; background-color: #ffffff; opacity: 0.8; border:solid 1px #333; border-radius: 30px 30px 5px 5px; box-shadow: 4px 4px 2px gray; margin:15px; display:block; text-align:center; line-height: 250%; color:#000000; text-decoration: none; font-family:sans-serif; font-weight: 900; } .menu2:hover{ background:#007777; color:#ffffff; } .menu2:active{ background:#990000; color:#ffffff; box-shadow: 0px 0px 0px gray; } .menu4 { width: 60px; height: 40px; float: left; background-color: #ffffff; opacity: 0.8; border:solid 1px #333; border-radius: 20px 5px 5px 20px; box-shadow: 4px 4px 2px gray; margin:15px; display:block; text-align:center; line-height: 250%; color:#000000; text-decoration: none; font-family:sans-serif; font-weight: 900; } .menu4:hover{ background:#007777; color:#ffffff; } .menu4:active{ background:#990000; color:#ffffff; box-shadow: 0px 0px 0px gray; }