/* * Glass Studio TAPPU site v5.0 * http://www.tappu.com * * Copyright 2012,Glass Studio TAPPU / Katsushi Fukuta * * << css for top page only >> */ html,body { font-family :sans-serif; background-color:#BDB5A5; /* background: url("./img/cajon_sp1200.jpg") no-repeat;*/ color:#404040; font-size: 15px; line-height: 1.3; margin:0px; padding:0px; border:0px; scrollbar-base-color:#CAC3B8; } h1 { color:#303030; font-size:18px; } h2 {color:#ffffff; font-size:18px; margin:5px;} h3 {color:#606060; font-size:17px; margin:5px;} h4 {color:#202020; font-size:16px; margin:5px;} h5 {color:#202020; font-size:13px; margin:3px;} hr { border:1px solid #202020; } a { margin:0px; outline:none; } a:link { color:#505050; } a:visited { color:#707070; } table{ font-size:15px; color:#a0a0a0; } em { font-weight:bold; font-style:normal; } /* ナビ＆スライド部分の背景（伸縮式） */ #gallery{ width:100%; min-width:1100px; height:700px; text-align:center; background: url("./img/kuchie_glass4_c.jpg") repeat-x; } @media screen and (max-width:600px){ #gallery{ min-width:100px; } /* スマホの時　*/ } #gallery_l{ width:360px; height:700px; float:left; text-align:center; background: url("./img/kuchie_glass4_l.jpg") no-repeat; } @media screen and (max-width:600px){ #gallery_l{ width:100%; } /* スマホの時　*/ } #gallery_r{ width:360px; height:700px; float:right; text-align:center; background: url("./img/kuchie_glass4_r.jpg") no-repeat; } @media screen and (max-width:600px){ #gallery_r{ display:none; } /* スマホの時　非表示　*/ } /* ナビ＆スライドを背景に重ねるために、親に対し#navigationを絶対配置 */ #navigation { position:absolute; height:700px; left:0px; top:0px; width:100%; text-align:center; } /* ナビ＆スライド(#header)を#navigationに対し中央配置 */ #header { width:1030px; height:630px; margin:0px auto; } @media screen and (max-width:600px){ #header{ width:100%; } /* スマホの時　*/ } #header h1{ width:100%; max-width:500px; height:25px; margin:0px 10px 0px; float:left; text-align:left; } #mini_link{ width:300px; height:25px; margin:0px auto; float:right; text-align:right; } #non_nivo { position:relative; width:700px; height:auto; margin:0px auto; background-color:#202020; font-size:12px; color:#d0d0d0; -moz-box-shadow: 3px 3px 5px 1px #303030; -webkit-box-shadow: 3px 3px 5px 1px #303030; box-shadow: 3px 3px 5px 1px #303030; } /* メインナビ */ #main_menu{ position:absolute; top:20px; z-index: 10; width:1040px; height:110px; padding:0px; clear:both; } @media screen and (max-width:600px){ #main_menu{ top:40px; width:100%; } /* スマホの時　*/ } /* ナビボタンの陰影 */ .wrap_shadow { -moz-box-shadow: 3px 3px 5px 0px #303030; -webkit-box-shadow: 3px 3px 5px 0px #303030; box-shadow: 3px 4px 4px 0px #303030; /* border-left:1px solid #d0d0d0;*/ } @media screen and (max-width:600px){ .wrap_shadow{ } /* スマホ */ } /* スライド(Nivo Slider)のサイズと陰影 */ #slider { position:relative; top:120px; padding:0px; z-index: 1; width:700px; margin:10px auto; -moz-box-shadow: 4px 4px 5px 1px #303030; -webkit-box-shadow: 4px 4px 5px 1px #303030; box-shadow: 4px 4px 5px 1px #303030; } @media screen and (max-width:600px){ #slider{ position:relative; top:280px;/* スマホの時　下げる　*/ padding:0px; z-index: 1; width:340px;/* スマホの時　幅狭　*/ margin:10px auto; -moz-box-shadow: 4px 4px 5px 1px #303030; -webkit-box-shadow: 4px 4px 5px 1px #303030; box-shadow: 4px 4px 5px 1px #303030; /* display:none;*/ } } /* コンテンツ(#container)を#navigationの下、中央に配置親は */ #container { width:100%; /* width:1100px;*/ margin:0px auto; } .news { width:100%; max-width:700px; height:20px; font-size:16px; margin:0px auto 7px; color:#ffffff; text-align:center; line-height: 1.1; } @media screen and (max-width:600px){ .news{ /* display:none;*/ position:relative; font-size:14px; /* top:-300px;*/ /* text-align:left;*/ } /* スマホの時　　*/ } .news　h2{ font-size:20px; } .news a{ color:#d0d0d0; text-decoration: none; } .btn_center{ margin:5px auto 0px; text-align:center; } @media screen and (max-width:600px){ .btn_center img{ max-width:340px; width:100%; } } /* 作風説明をコンテンツ(#container)中央に配置 */ .sakufu { width:850px; height:1220px; margin:0px auto; } @media screen and (max-width:600px){ .sakufu{ width:100%; max-width:360px; height:2250px; margin:0px auto; text-align:center; clear:both; } /* スマホ対応　*/ } .sakufu_left { width:400px; text-align:left; float:left; } @media screen and (max-width:600px){ .sakufu_left { width:95%; } /* スマホ対応　*/ } .sakufu_right { width:400px; text-align:left; float:right; } @media screen and (max-width:600px){ .sakufu_right { width:95%; float:left; } /* スマホ対応　*/ } .sakufu_tr { height:220px; margin:25px 0px 7px; background-color:#202020; font-size:14px; color:#d0d0d0; -moz-box-shadow: 3px 3px 5px 1px #303030; -webkit-box-shadow: 3px 3px 5px 1px #303030; box-shadow: 3px 3px 5px 1px #303030; } @media screen and (max-width:600px){ .sakufu_tr { height:200px; } /* スマホ対応　*/ } .sakufu_tr span{ margin:5px; background-color:#000000; color:#808080; } .sakufu_tr p{ margin:0px; padding:5px 10px; } @media screen and (max-width:600px){ sakufu_tr p{ padding:0px; } /* スマホ対応　*/ } .sakufu_tr img{ width:100%; } .sakufu_tr a{ color:#c0c0c0; text-decoration: none; } /* フッターをコンテンツ(#container)の下に配置　親は */ #footer { width:100%; height:100%; /* height:1350px;*/ margin:30px 0px 0px; padding:10px; background-color:#202020; text-align:center; } @media screen and (max-width:600px){ #footer{ width:100%; margin:0px auto; padding:0px; clear:both; } /* スマホ対応　*/ } #footer h3 { width:100%; height:23px; margin:0px auto; background-color:#404040; color:#c0c0c0; clear:both; text-shadow: 3px 3px 2px #000000; } .omoi { width:850px; margin:10px auto 10px; font-size:15px; color:#c0c0c0; } @media screen and (max-width:600px){ .omoi{ display:none; } /* スマホの時　非表示　*/ } #update { width:600px; height:120px; margin:0px auto; padding:0px; font-size:12px; background-color:#000000; color:#ffffff; text-align:left; overflow:auto; } @media screen and (max-width:600px){ #update{ display:none; } /* スマホ対応　*/ } .contents_box { width:600px; background-color:#000000; color:#ffffff; margin:10px auto 10px; text-align:center; clear:both; } @media screen and (max-width:600px){ .contents_box { margin:0px; width:100%; } /* スマホ対応　*/ } /* 下部ナビ */ .bottom_link { width:100%; margin:10px 0px 5px; padding:0px; clear:both; } /* アクセスカウンタ */ #footer span { margin:5px 0px 5px; padding:0px; color:#707070; font-size:10px; /* フッター背景色(#202020)にあわせて　明るめの色 */ #footer a:link { color:#a0a0a0; } #footer a:visited { color:#707070; }