comable-frontend-fashionable 0.6.0

data/app/assets/stylesheets/comable/products.scss

@@ -0,0 +1,787 @@
+@charset "UTF-8";
+/* CSS list */
+
+p.result {
+	font-size: 18px;
+	font-family: "メイリオ", Meiryo;
+	font-weight: bold;
+	margin: 18px 0;
+}
+
+/* 絞込検索 */
+.search {
+	background: #8e8e8e;
+	border-radius: 3px;
+	overflow: hidden;
+	padding: 8px 0 8px 100px;
+	margin: 0 0 30px 0;
+}
+	.search p.cate {
+		float: left;
+		color: #fff;
+	}
+	.search select {
+		float: left;
+		margin: 0 50px 0 5px;
+	}
+
+/* 商品 */
+.box {
+	border-left: 1px solid #f5f5f5;
+	margin: 0 0 0 2px;
+}
+ul.product {
+	clear: both;
+	overflow: hidden;
+	display: inline-block;
+}
+	ul.product li {
+		float: left;
+		width: 134px;
+		height: 320px;
+		border-top: 1px solid #f5f5f5;
+		border-right: #f5f5f5 1px solid;
+		border-bottom: #f5f5f5 1px solid;
+		display: inline;
+		padding: 0 10px;
+	}
+	ul.product li img {
+		clear: both;
+		width: 134px;
+		height: 186px;
+		margin: 0 0 2px 0;
+	}
+	/* 商品名 */
+	ul.product li h2 {
+		height: 60px;
+		color: #000;
+		font-size: 12px;
+		font-weight: normal;
+		line-height: 14px;
+	}
+	ul.product li h2 a {
+		color: #000;
+		font-size: 12px;
+		font-weight: normal;
+		line-height: 14px;
+	}
+	/* 価格 */
+	ul.product li p.price {
+		color: #000;
+		font-size: 10px;
+		margin: 0;
+	}
+		ul.product li p.price span {
+			display: block;
+			color: #e70505;
+		}
+	/* アイコン */
+	ul.product li .icon {
+		height: 17px;
+		overflow: hidden;
+		margin: 10px 0 5px 0;
+	}
+		/* 新着 */
+		ul.product li .icon p.new {
+			float: left;
+			width: 63px;
+			background: #f2546a;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+		/* 再入荷 */
+		ul.product li .icon p.repeat {
+			float: left;
+			width: 63px;
+			background: #54b1f2;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+		/* 値下げ */
+		ul.product li .icon p.down {
+			float: left;
+			width: 63px;
+			background: #b473eb;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+		/* SOLDOUT */
+		ul.product li .icon p.soldout {
+			float: left;
+			width: 63px;
+			background: #000;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+
+/* ページナビ */
+ul.pageNav {
+	margin: 0 0 10px;
+	padding: 10px 10px 5px;
+	text-align: right;
+}
+
+	ul.pageNav li {
+		display: inline;
+		margin: 0 2px;
+		padding: 0;
+	}
+
+	ul.pageNav li span,
+	ul.pageNav li a {
+		color: #000;
+		display: inline-block;
+		margin-bottom: 5px;
+		padding: 4px 10px;
+		text-decoration: none;
+		vertical-align: middle;
+	}
+	ul.pageNav li span {
+		background: #aaaaaa;
+		color: #fff;
+	}
+
+	ul.pageNav li a:hover {
+		color: #000;
+		background: #e6e6e6;
+		border-color: #00f;
+	}
+
+
+@charset "UTF-8";
+/* CSS top */
+
+/* -------------------------------- */
+/* 検索 */
+#MainSearch {
+        clear: both;
+        background: #d7d7d7;
+        margin: 0 0 20px 0;
+}
+#MainSearch .inner {
+        width: 747px;
+        margin: 0 auto;
+        padding: 20px 0;
+}
+        #MainSearch .inner input.textBox {
+                width: 654px;
+                height: 30px;
+                border: #616161 1px solid;
+                border-radius: 5px;
+                margin: 0;
+                padding: 0;
+        }
+        input.btn {
+                width: 82px;
+                height: 32px;
+                border-style: none;
+                border-radius: 5px;
+                background: image-url("search.png") #616161 no-repeat;
+                background-position: 10px 7px;
+                text-indent: 14px;
+                font-size: 15px;
+                color: #fff;
+                letter-spacing: 2px;
+                padding: 0;
+        }
+
+/* -------------------------------- */
+/* News & TOPICS */
+.information {
+        width: 778px;
+}
+        .information p.title {
+                background: #747272;
+                font-size: 16px;
+                font-family: "メイリオ", Meiryo;
+                font-weight: bold;
+                color: #fff;
+                letter-spacing: 1px;
+                padding: 2px 15px;
+                margin: 0 0 0 0;
+        }
+        /* 更新内容 */
+        .information .box-info {
+                overflow: scroll;
+                height: 110px;
+                border: 1px solid #f5f5f5;
+                margin: 0
+        }
+        .information .box-info  p.date {
+                padding: 0 15px;
+                line-height: 16px;
+        }
+                .information .box-info  p.date span {
+                        display: block;
+                }
+                .information .box-info  p.date span.red {
+                        color: #e70505;
+                }
+        p.date a {
+                color: #979797;
+                font-weight: bold;
+        }
+        p.date a:hover {
+                text-decoration: underline;
+        }
+
+        hr.info {
+                width: 748px;
+                border: none;
+                border-top: #b9b9b9 1px dotted;
+                margin: 0 auto;
+        }
+
+/* 特集バナー */
+.special {
+        margin: 15px 0;
+        overflow: hidden;
+}
+.special img {
+        float: left;
+        border: #dfdfdf 1px solid;
+        margin: 0 5px;
+}
+        .special img:hover {
+                opacity: 0.8;
+                filter: alpha(opacity=80);
+                -ms-filter: "alpha( opacity=80 )";
+                background: #fff;
+        }
+
+/* product */
+/* -------------------------------- */
+#product {
+        width: 777px;
+        float: left;
+}
+
+.line-bg {
+        clear: both;
+        display: block;
+        border: none;
+        height: 11px;
+        background: image-url("line_bg.gif") repeat;
+        text-indent: -9999px;
+        margin: 18px 0 0 0;
+}
+/* 入荷アイテム */
+.item-box {
+        border-left: #dfdfdf 1px solid;
+        overflow: hidden;
+}
+        /* タイトル */
+        .item-box p.title {
+                border-right: #dfdfdf 1px solid;
+                font-family: "メイリオ", Meiryo;
+                font-weight: bold;
+                font-size: 22px;
+                padding: 5px 0 2px 15px;
+        }
+        .item-box p.title span {
+                font-size: 14px;
+                margin: 0 0 0 12px;
+        }
+        /* 商品 */
+        .item-box .item {
+                width: 156px;
+                height: 314px;
+                float: left;
+                border-top: #dfdfdf 1px solid;
+                border-right: #dfdfdf 1px solid;
+                border-bottom: #dfdfdf 1px solid;
+                padding: 0 0 0 37px;
+        }
+                .item-box .item img {
+                        width: 120px;
+                        height: 174px;
+                }
+                /* 商品名 */
+                .item-box .item h2 a {
+                        width: 120px;
+                        color: #000;
+                        font-size: 12px;
+                        font-weight: normal;
+                        line-height: 14px;
+                }
+
+                /* 価格 */
+                .item-box .item p.price {
+                        width: 120px;
+                        font-size: 10px;
+                        margin: 0 0 0 0;
+                }
+                        .item p.price span {
+                                color: #e70505;
+                        }
+                /* 新着 */
+                .item-box .item p.new {
+                        width: 75px;
+                        background: #f2546a;
+                        text-align: center;
+                        font-weight: bold;
+                        color: #fff;
+                        border-radius: 3px;
+                        margin: 7px 0 5px 0;
+                }
+                /* 再入荷 */
+                .item-box .item p.repeat {
+                        width: 75px;
+                        background: #54b1f2;
+                        text-align: center;
+                        font-weight: bold;
+                        color: #fff;
+                        border-radius: 3px;
+                        margin: 7px 0 5px 0;
+                }
+                .item-box .item p a {
+                        color: #000;
+                }
+        /* もっと見る */
+        p.more {
+                text-align: right;
+                margin: 5px 0 30px 0;
+        }
+                p.more a {
+                        color: #000;
+                }
+                p.more a:hover {
+                        text-decoration: underline;
+                }
+
+/* ランキング */
+p.ranking {
+        text-align: center;
+        font-family: "メイリオ", Meiryo;
+        font-weight: bold;
+        font-size: 22px;
+        border-bottom: #dfdfdf 1px solid;
+        padding: 10px 0;
+}
+        .rank-box {
+                float: left;
+                width: 178px;
+                height: 395px;
+                padding: 0 0 0 10px;
+        }
+                /* icon */
+                .rank {
+                        width: 34px;
+                        margin : 20px auto 10px;
+                }
+        .rank-box img.product {
+                width: 168px;
+                height: 243px;
+        }
+
+        /* 商品名 */
+        .rank-box h2 a {
+                width: 168px;
+                color: #000;
+                font-size: 12px;
+                font-weight: normal;
+        }
+        /* 価格 */
+        .rank-box .price {
+                width: 168px;
+                font-size: 10px;
+                margin: 20px 0 0 0;
+        }
+                .rank-box .price span {
+                        display: block;
+                        color: #e70505;
+                }
+        .rank-box p a {
+                        color: #000;
+        }
+
+/* side-banner */
+/* -------------------------------- */
+#side-banner {
+        width: 200px;
+        float: right;
+}
+        #side-banner img {
+                margin: 0 0 10px 0;
+        }
+        #side-banner img:hover {
+                opacity: 0.8;
+                filter: alpha(opacity=80);
+                -ms-filter: "alpha( opacity=80 )";
+                background: #fff;
+        }
+
+@charset "UTF-8";
+/* CSS detail */
+
+#ProductDetailArea {
+        width: 780px;
+        overflow: hidden;
+        margin: 18px 0 0 0;
+}
+        /* 画像 */
+        /* ------------------------------ */
+        .main-product {
+                float: left;
+                width: 416px;
+        }
+                .main-product img.main {
+                        border: #000 1px solid;
+                }
+                /* 在庫 */
+                .stock {
+                        border-top: #ccc 1px solid;
+                        margin: 10px 0;
+                }
+                        .stock li {
+                                padding: 10px 20px;
+                                border-bottom: #ccc 1px solid;
+                                overflow: hidden;
+                        }
+                                .stock li p {
+                                        float: left;
+                                        width: 80px;
+                                        padding: 3px 0 0 0;
+                                }
+                                .stock li img.shoppingcart {
+                                        float: right;
+                                        margin: 0;
+                                        padding: 0;
+                                }
+                                        img.shoppingcart:hover {
+                                                opacity: 0.8;
+                                                filter: alpha(opacity=80);
+                                                -ms-filter: "alpha( opacity=80 )";
+                                                background: #fff;
+                                        }
+                                         select#quantity{
+                                                vertical-align:0.6em;
+                                                margin:0 10px 0 0;
+                                                }
+
+        /* 詳細 */
+        /* ------------------------------ */
+        .main-detail {
+                float: right;
+                width: 355px;
+        }
+                 /* アイコン */
+                .main-detail .icon {
+                        width: 332px;
+                        margin: 0 0 10px 0;
+                        overflow: hidden;
+                }
+                        /* 新着アイコン */
+                        .main-detail .icon p.new {
+                                float: left;
+                                width: 75px;
+                                background: #f2546a;
+                                text-align: center;
+                                font-weight: bold;
+                                color: #fff;
+                                border-radius: 3px;
+                                margin: 0 2px;
+                        }
+                        /* 再入荷アイコン */
+                        .main-detail .icon p.repeat {
+                                float: left;
+                                width: 75px;
+                                background: #54b1f2;
+                                text-align: center;
+                                font-weight: bold;
+                                color: #fff;
+                                border-radius: 3px;
+                                margin: 0 2px;
+                        }
+                        /* 値下げアイコン */
+                        .main-detail .icon p.down {
+                                float: left;
+                                width: 75px;
+                                background: #b473eb;
+                                text-align: center;
+                                font-weight: bold;
+                                color: #fff;
+                                border-radius: 3px;
+                                margin: 0 2px;
+                        }
+                        /* SOLDUOT */
+                        .main-detail .icon p.soldout {
+                                float: left;
+                                width: 75px;
+                                background: #000;
+                                text-align: center;
+                                font-weight: bold;
+                                color: #fff;
+                                border-radius: 3px;
+                                margin: 0 2px;
+                        }
+
+                /* 商品番号 */
+                .lot-number {
+                        clear: both;
+                        font-size: 12px;
+                }
+                /* 商品名 */
+                h2 {
+                        font-size: 18px;
+                        font-weight: normal;
+                }
+                /* 価格 */
+                .price {
+                        font-size: 14px;
+                        margin: 30px 0 20px 0;
+                }
+                        .price span {
+                                display: block;
+                                color: #e70505;
+                        }
+
+                /* Detail Color */
+                .title {
+                        font-size: 14px;
+                        margin: 0;
+                }
+                ul.DetailColor {
+                        overflow: hidden;
+                        display: inline-block;
+                }
+                        ul.DetailColor li {
+                                float: left;
+                                width: 66px;
+                                height: 110px;
+                                font-size: 10px;
+                                display: inline;
+                                cursor: pointer;
+                                margin: 0 3px 0 0;
+                        }
+                        ul.DetailColor li img {
+                                width: 66px;
+                                height: 96px;
+                                border: #000 1px solid;
+                        }
+                        ul.DetailColor li img:hover {
+                                opacity: 0.8;
+                                filter: alpha(opacity=80);
+                                -ms-filter: "alpha( opacity=80 )";
+                                background: #fff;
+                        }
+
+                /* 詳細（素材等） */
+                .other-detail {
+                        clear: both;
+                        margin: 20px 0 0 0;
+                }
+                        .other-detail th {
+                                width: 70px;
+                                vertical-align: top;
+                                padding: 5px 0px 5px 5px;
+                        }
+
+                /* サイズ */
+                .size {
+                        width: 353px;
+                        border: #aeaeae 1px solid;
+                        font-size: 11px;
+                        margin: 20px 0 0 0;
+                }
+                        .size th {
+                                background: #aeaeae;
+                                color: #fff;
+                                text-align: center;
+                                padding: 4px 10px;
+                        }
+                        .size td {
+                                border-bottom: #aeaeae 1px solid;
+                                text-align: center;
+                                padding: 4px 10px;
+                        }
+
+        /* アイテム紹介 */
+        .introduction {
+                clear: both;
+                background: #fff;
+                padding: 20px 0 50px 0;
+        }
+                .introduction p {
+                        font-size: 14px;
+                }
+                .introduction p.text {
+                        border: #ccc 1px solid;
+                        font-size: 12px;
+                        padding: 5px;
+                }
+
+/* 最近見たアイテム・他の人のチェックアイテム */
+.check-item {
+        margin: 25px 0 25px 0;
+}
+        .check-item p {
+                font-size: 14px;
+        }
+        .check-item .inner {
+                border: #ccc 1px solid;
+                padding: 12px 6px;
+                overflow: hidden;
+        }
+        .check-item .inner img {
+                float: left;
+                width: 73px;
+                margin: 0 6px;
+        }
+                .check-item .inner img:hover {
+                        opacity: 0.8;
+                        filter: alpha(opacity=80);
+                        -ms-filter: "alpha( opacity=80 )";
+                        background: #fff;
+                }
+
+hr.dod {
+        border: none;
+        border-top: #ccc 1px dotted;
+        padding: 0 0 25px 0;
+}
+
+h2 {
+        width: 120px;
+        font-size: 24px;
+        font-weight: normal;
+        line-height: 10px;
+        margin: 0 0 0 20px 0;
+}
+
+h3 {
+        font-size: 16px;
+        margin: 50px 0 0 0;
+}
+
+p.ex {
+        margin: 20px 0 20px 20px;
+}
+
+/* table */
+table {
+        width: 100%;
+        color: #3c3c3c;
+        font-weight: normal;
+        margin: 20px 0 0 0;
+}
+        table th, td {
+                vertical-align: top;
+                padding: 10px 0 10px 20px;
+        }
+        table th {
+                width: 140px;
+        }
+        table td a {
+                color: #99cccc;
+        }
+        table td a:hover {
+                text-decoration: underline;
+        }
+
+        /* リスト */
+        table ul {
+                list-style: inside;
+        }
+                table ul li {
+                        line-height: 20px;
+                }
+
+/* dl */
+dl {
+        margin: 0 0 0 20px;
+        padding: 0;
+}
+        dt, dd {
+                margin: 0;
+                padding: 0;
+        }
+        dt {
+                font-weight: bold;
+                margin: 0px 0 0 0;
+        }
+        /* リスト */
+        dd li {
+                margin: 5px 0 0 15px;
+        }
+
+/* よくある質問 */
+.faq {
+        width: 900px;
+        background: #f0f0f0;
+        margin: 20px auto 0 auto;
+        padding: 0 20px 20px 20px;
+}
+
+        .faq ul li.title {
+                font-weight: bold;
+                font-size: 13px;
+                padding: 20px 0 0 0;
+        }
+
+        .faq a {
+                color: #000;
+        }
+        .faq a:hover {
+                text-decoration: underline;
+        }
+
+.answer-box {
+        width: 940px;
+        margin: 0 auto;
+}
+        /* Q */
+        .q-box {
+                background: #424242;
+                color: #fff;
+                overflow: hidden;
+                padding: 8px 5px 5px 15px;
+        }
+                .q-box p.q {
+                        float: left;
+                        width: 20px;
+                }
+                .q-box p.question {
+                        float: left;
+                        width: 890px;
+                }
+        /* A */
+        .a-box {
+                border: #424242 1px solid;
+                overflow: hidden;
+                padding: 5px 5px 5px 15px;
+        }
+                .a-box p.a {
+                        float: left;
+                        font-weight: bold;
+                        width: 20px;
+                }
+                .a-box p.answer {
+                        float: left;
+                        width: 890px;
+                }
+
+/* error */
+p.error {
+ text-align: center;
+}