@charset "utf-8";

/* ****************************************************************
   商品情報ページの独自設定
   	一覧ページ
   	詳細ページ
   	メガネフレーム
   	サングラス
   	メガネレンズ
   	コラボレーションアイテム
   	フローティング
   	シリコンハイドロゲル素材
*************************************************************** */

/* ********************************
   商品情報トップページ
******************************** */
ul#itemSelect{
background:url(/item/images/ind_bg.jpg) no-repeat 0% 0%;
width:725px;
height:605px;
margin-bottom:10px;
}
ul#itemSelect li.sec01{
height:323px;
}
ul#itemSelect li.sec01 h2{
padding:29px 0 58px 19px;
}
ul#itemSelect li.sec01 ol.btnArea01{
margin:0 0 52px 43px;
position:relative;
}
ul#itemSelect li.sec01 ol.btnArea02{
width:450px;
margin:0 0 0 43px;
position:relative;
}
ul#itemSelect li.sec01 ol li,
ul#itemSelect li.sec03 ol li{
float:left;
display:inline;
}
ul#itemSelect li.sec01 ol.btnArea01 li{
margin-right:7px;
}
ul#itemSelect li.sec01 ol.btnArea02 li{
margin-right:8px;
margin-bottom:8px;
}
ul#itemSelect li.sec02{
height:136px;
}
ul#itemSelect li.sec02 h2{
padding:28px 0 28px 19px;
}
ul#itemSelect li.sec02 p.btn{
margin:0 0 0 31px;
}
ul#itemSelect li.sec03{
height:146px;
}
ul#itemSelect li.sec03 h2{
padding:26px 0 30px 19px;
}
ul#itemSelect li.sec03 ol.btnArea01{
margin:0 0 0 31px;
position:relative;
}
ul#itemSelect li.sec03 ol.btnArea01 li{
margin-right:8px;
}


/* ********************************
   一覧ページ
******************************** */
ul#itemList li{
position:relative;
float:left;
width:350px;
margin-bottom:16px;
padding-top:28px;
background:url(../../common/images/dotline_grad.gif) repeat-x 0% 0%;
}

ul#itemList li.even{
float:right;
}

ul#itemList li.heightLine-row01{
padding-top:0;
background:none;
}

ul#itemList .textArea{
float:right;
width:180px;
margin-bottom:40px;
}

ul#itemList p.maker{
font-size:0.8em;
color:#d70c18;
}

ul#itemList h2{
margin-bottom:7px;
padding-bottom:4px;
background:url(../../common/images/dotline_gray.gif) repeat-x 0% 100%;
font-size:1.2em;
font-weight:bold;
line-height:1.3;
}

ul#itemList p.text{
margin-bottom:6px;
}

ul#itemList ul li{
width:auto;
margin:0;
padding:0;
margin-right:6px;
background:none;
}

ul#itemList p.img{
float:left;
width:170px;
}

ul#itemList p.img img{
border:1px solid #d4d4d4;
}

ul#itemList p.btn{
position:absolute;
bottom:-2px;
left:252px;
text-align:right;
}


/* ********************************
   詳細ページ
******************************** */
/* ==== パンくずリスト ==== */
ol.addChild li.lastChild{
width:90%;
}

#itemTitle{
position:relative;
width:725px;
}

p#btnList{
position:absolute;
left:642px;
top:24px;
}

/* #itemDetail */
#itemDetail{
margin-bottom:30px;
padding:20px;
padding-bottom:20px !important;
padding-bottom:6px;
background:#fffae9;
font-size:0.8em;
}

* html #itemDetail,
*:first-child+html #itemDetail{
padding-bottom:8px;
}

#itemDetail dt img{
border:1px solid #dadada;
}

#itemDetail dt{
float:left;
width:217px;
}

#itemDetail dd{
float:left;
width:468px;
zoom:1;
}

/* #itemDetail h2 */
#itemDetail h2{
margin-bottom:12px;
padding-bottom:12px;
background:url(../../common/images/dotline_gray.gif) repeat-x 0% 100%;
line-height:1;
}

#itemDetail h2 span{
vertical-align:middle;
}

#itemDetail h2 span.maker{
font-size:1.6em;
color:#e4000d;
margin-right:12px;
}

#itemDetail h2 span.itemName{
font-size:2.2em;
margin-right:12px;
font-weight:bold;
}

#itemDetail h2 img{
margin:0 3px;
vertical-align:middle;
}

#itemDetail .text{
float:left;
width:257px;
font-size:1.4em;
line-height:1;
}

#itemDetail .text p{
margin-bottom:12px;
}

#itemDetail .text p.point{
padding-right:24px;
font-weight:bold;
}

#itemDetail .text p.coupon{
margin-bottom:0;
}

/* #btnArea */
#btnArea{
float:left;
width:211px;
height:151px;
background:url(../images/btn_area_bg.gif) no-repeat 0% 0%;
}

#btnArea h3,
#btnArea p{
padding-left:10px;
}

#btnArea h3.search{
padding-top:10px;
}

#btnArea p.search{
margin-bottom:22px;
}

/* #itemExplanation */
#itemExplanation{
width:725px;
margin-bottom:20px;
padding-bottom:11px;
background:url(../images/exp_btm.gif) no-repeat 0% 100%;
}

/* #explanationTitle */
#explanationTitle{
position:relative;
width:725px;
height:98px;
background:url(../images/exp_tit_bg.gif) no-repeat 0% 0%;
}

#explanationTitle h3,
#explanationTitle dl{
position:absolute;
}

#explanationTitle h3{
left:10px;
top:0;
}

#explanationTitle dl{
left:279px;
top:9px;
}

#explanationTitle dl dt,
#explanationTitle dl dd{
position:absolute;
}

/* #explanationTitle dt */
#explanationTitle dt.point01{
left:0;
top:0;
}
#explanationTitle dt.point02{
left:222px;
top:0;
}
#explanationTitle dt.point03{
left:0;
top:26px;
}
#explanationTitle dt.point04{
left:222px;
top:26px;
}

/* #explanation dd */
#explanationTitle dd.level01{
left:95px;
top:0;
}
#explanationTitle dd.level02{
left:316px;
top:0;
}
#explanationTitle dd.level03{
left:95px;
top:26px;
}
#explanationTitle dd.level04{
left:316px;
top:26px;
}

/* #editArea */
#editArea{
height:1%;
padding:0 10px;
padding-top:6px;
background:url(../images/exp_bg_line.gif) repeat-y 0% 0%;
}

#editArea p{
clear:both;
margin-bottom:6px;
padding-bottom:32px;
background:url(../../common/images/dotline_grad.gif) repeat-x 0% 100%;
}

#editArea p.lastChild{
background:none;
margin-bottom:0;
padding-bottom:0;
}

#editArea strong{
font-weight:bold;
}

/*
#editArea span{
background:#ffef3a;
}
*/

#editArea .right{
float:right;
margin-bottom:12px;
margin-left:20px;
padding-right:10px;
}

#editArea .left{
float:left;
margin-bottom:12px;
margin-right:20px;
padding-left:10px;
}


/* ********************************
   メガネフレームページ
******************************** */
#frames{
margin-bottom:20px;
}
#frames .info{
background:url(../../common/images/dotline_grad.gif) repeat-x 0% 100%;
padding-bottom:20px;
margin-bottom:10px;
position:relative;
}
#frames .textArea{
float:right;
width:540px;
margin-right:10px;
display:inline;
}
#frames h2{
margin-bottom:15px;
}

#frames p.text{
font-weight:bold;
font-size:1.2em;
line-height:1.2;
}

#frames ul li{
width:auto;
margin:0;
padding:0;
margin-right:6px;
background:none;
}

#frames .imgArea{
float:left;
width:154px;
display:inline;
margin-bottom:10px;
}
#frames p.img{
width:154px;
}
#frames p.img img{
border:1px solid #d4d4d4;
}
#frames p.zoom{
margin-top:5px;
text-align:center;
width:154px;
}
#frames p.zoom img{
vertical-align:middle;
margin-right:5px;
}


/* ********************************
   サングラスページ
******************************** */
#sunglasses{
margin-bottom:20px;
}
#sunglasses .info{
background:url(../../common/images/dotline_grad.gif) repeat-x 0% 100%;
padding-bottom:20px;
margin-bottom:10px;
position:relative;
}
#sunglasses .textArea{
float:right;
width:540px;
margin-right:10px;
display:inline;
}
#sunglasses h2{
margin-bottom:15px;
}

#sunglasses p.text{
font-weight:bold;
font-size:1.2em;
line-height:1.2;
}

#sunglasses ul li{
width:auto;
margin:0;
padding:0;
margin-right:6px;
background:none;
}

#sunglasses .imgArea{
float:left;
width:154px;
display:inline;
margin-bottom:10px;
}
#sunglasses p.img{
width:154px;
}
#sunglasses p.img img{
border:1px solid #d4d4d4;
}
#sunglasses p.zoom{
margin-top:5px;
text-align:center;
width:154px;
}
#sunglasses p.zoom img{
vertical-align:middle;
margin-right:5px;
}


/* ********************************
   メガネレンズページ
******************************** */
#lensSubNavi{
margin-bottom:16px;
padding-bottom:12px;
background:#fffae9 url(../images/lens_subnavi_btm.gif) no-repeat 0% 100%;
}

#lensSubNavi ul{
padding:12px;
padding-bottom:0;
background:url(../images/lens_subnavi_top.gif) no-repeat 0% 0%;
}

#lensSubNavi li{
float:left;
width:340px;
margin-bottom:6px;
}
#lensSubNavi li.last{
margin-bottom:0;
}

#lensSubNavi a{
padding-left:8px;
background:url(/common/images/arrow_pink.gif) no-repeat 0% 0%;
}

h2.lensTitle{
margin-bottom:16px;
}

.lensSection{
width:725px;
}

.lensSection .lensText li{
padding-bottom:16px;
}

.lensSection .lensText li.last{
padding-bottom:8px;
}

.lensSection .lensText li.sec03{
padding-left:30px;
}

#section01,
#section03,
#section04{
margin-bottom:6px;
padding-bottom:30px;
}

#section02,
#section05{
margin-bottom:6px;
padding-bottom:10px;
}

.sectionNote{
margin-bottom:20px;
}

.sectionNote h4{
margin-bottom:6px;
font-weight:bold;
}

.sectionNote p.img{
margin:12px 0;
text-align:center;
}

.sectionNoteLeft{
float:left;
width:340px;
}

.sectionNoteRight{
float:right;
width:340px;
}

.sectionNoteRight li{
float:left;
word-break:keep-all;
}

.sectionNoteRight p.cleaner img{
float:left;
margin-right:20px;
}

#section08{
margin-bottom:0;
padding-bottom:20px;
background:none;
}

#section08 ul{
margin-bottom:20px;
}

#section08 li{
float:left;
}

#section08 li#gua02{
margin:0 18px;
}

.lensSection h3{
margin-bottom:10px;
font-size:1.4em;
font-weight:bold;
}

#HGS p.logo{
float:left;
width:125px;
padding-bottom:20px;
}

#HGS .text{
float:left;
width:580px;
margin-bottom:20px;
}

#HGS h4{
margin-bottom:6px;
font-weight:bold;
}

#HGS li{
float:left;
margin-right:10px;
}

#HGS .text p.lead{
clear:left;
margin:10px 0;
}

#HGS .shop{
position:relative;
width:590px;
height:53px;
background:url(../images/lens_sec07_hgs_bg.gif) no-repeat 0% 0%;
}

#HGS .shop p.text,
#HGS .shop p.btn{
position:absolute;
top:9px;
}
#HGS .shop p.text{
left:20px;
}
#HGS .shop p.btn{
left:384px;
}

#lensOption{
padding-top:11px;
padding-left:12px;
background:#fff4de url(../images/lens_sec07_option_top.gif) no-repeat 0% 0%;
}

#lensOption h4{
margin-bottom:6px;
font-weight:bold;
}

#lensOption ul{
margin-bottom:6px;
}

#lensOption p{
padding-bottom:11px;
background:url(../images/lens_sec07_option_btm.gif) no-repeat 0% 100%;
}

#supportGuaran ul {
margin: 20px 0 0 0;
}

#supportGuaran li {
float: left;
height: auto !important;
min-height: 136px;
padding-bottom: 121px;
width: 248px;
}

#supportGuaran li h3 {
margin-bottom: 14px;
}

#supportGuaran li p {
padding-left: 6px;
padding-right: 24px;
}

#supportGuaran li#gua01 {
background: url("/support/images/gua_point01_ill.gif") no-repeat scroll 0 100% transparent;
}

#supportGuaran li#gua02 {
background: url("/support/images/gua_point02_ill.gif") no-repeat scroll 0 100% transparent;
}

#supportGuaran li#gua03 {
background: url("/support/images/gua_point03_ill.gif") no-repeat scroll 0 100% transparent;
width: 228px;
}

#supportGuaran li#gua03 p {
padding-right: 0;
}

/* ********************************
   コラボレーションアイテムページ
******************************** */
#colMainImg{
position:relative;
}

#colMainImg p.btn{
position:absolute;
left:566px;
top:179px;
}

#colMikli{
padding:0 20px;
margin-bottom:12px;
}

#colMikli .text{
float:left;
width:460px;
}

#colMikli .text p{
margin-bottom:12px;
}

#colMikli .text p.note{
font-size:0.8em;
}

#colMikli p.img{
float:right;
width:209px;
padding-top:50px;
font-size:0.8em;
text-align:right;
}

ul#colShopList{
margin:12px 0;
}

ul#colShopList li{
float:left;
width:216px;
padding:0 12px;
margin-bottom:6px;
}

ul#colShopList li a{
display:block;
padding-left:8px;
background:url(/common/images/arrow_pink.gif) no-repeat 0% 2px;
}


/* ********************************
   フローティング
******************************** */

#float{
width:644px;
font-size:1.2em;
}
#float .bgTop{
background:url(/mail/images/mailmag_bg01.png) no-repeat 0% 0%;
padding-top:20px;
width:644px;
}
#float .bgBtm{
width:644px;
background:url(/mail/images/mailmag_bg02.png) no-repeat 0% 100%;
padding:0 0 20px 0;
}
#float p.close{
margin:0;
padding:0;
text-align:right;
}
#float p.img{
margin:0;
padding:0;
text-align:center;
}


/* ********************************
   シリコンハイドロゲル素材ってなに？（body#silicon）
   10/08/23 update
******************************** */
body#silicon .silSection{
margin-bottom:28px;
}

body#silicon .silSection h2{
margin-bottom:20px;
}

body#silicon p.pageTop{
text-align:right;
}

/*#product*/
body#silicon #product{
margin-bottom:0;
}

body#silicon #product h3{
margin-bottom:16px;
}

body#silicon #product .section{
margin-bottom:8px;
}

body#silicon ul.itemList span{
display:block;
}

body#silicon ul.itemList li{
position:relative;
float:left;
width:350px;
padding-top:28px;
background:url(../../common/images/dotline_grad.gif) repeat-x 0% 0%;
}

body#silicon ul.itemList li.even{
float:right;
}

body#silicon ul.itemList li.heightLine-row01,
body#silicon ul.itemList li.heightLine-row02,
body#silicon ul.itemList li.heightLine-row06{
padding-top:0;
background:none;
}

body#silicon ul.itemList .textArea{
float:right;
width:176px;
margin-bottom:20px;
}

body#silicon ul.itemList p.maker{
font-size:0.8em;
color:#d70c18;
}

body#silicon ul.itemList h4{
margin-bottom:7px;
padding-bottom:4px;
background:url(../../common/images/dotline_gray.gif) repeat-x 0% 100%;
font-size:1.2em;
font-weight:bold;
line-height:1.3;
}

body#silicon ul.itemList p.text{
margin-bottom:6px;
}

body#silicon ul.itemList ul li{
width:auto;
margin:0;
padding:0;
margin-right:6px;
background:none;
}

body#silicon ul.itemList p.img{
float:left;
width:174px;
margin-bottom:20px;
}

body#silicon ul.itemList p.img img{
border:1px solid #d4d4d4;
}