/* The CSS has been optimized in 126 column (tab size:4) of sublimetext. */ /* Each style must be extended based on the framework. */ /* ======================================================================================================================== */ /* reset style /* ======================================================================================================================== */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{font-weight:normal;text-align:left;vertical-align:top}html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}del{color:#333}ins{background:#fff9c0;text-decoration:none}hr{background-color:#ccc;border:0;height:1px;margin:24px;margin-bottom:1.714285714rem}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}small{font-size:smaller}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.clear:after,.wrapper:after,.format-status .entry-header:after{clear:both}.clear:before,.clear:after,.wrapper:before,.wrapper:after,.format-status .entry-header:before,.format-status .entry-header:after{display:table;content:""} /* ======================================================================================================================== */ /* default pl framework /* ======================================================================================================================== */ /* -------------------------------------------------------------------------------------------------------------------- */ /* margin styles "05 10 15 20 25 30 35 40 45 50" /* -------------------------------------------------------------------------------------------------------------------- */ .ma05{margin:5px}.ma10{margin:10px}.ma15{margin:15px}.ma20{margin:20px}.ma25{margin:25px}.ma30{margin:30px}.ma35{margin:35px}.ma40{margin:40px}.ma45{margin:45px}.ma50{margin:50px}.mt05{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt25{margin-top:25px}.mt30{margin-top:30px}.mt35{margin-top:35px}.mt40{margin-top:40px}.mt45{margin-top:45px}.mt50{margin-top:50px}.mr05{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr20{margin-right:20px}.mr25{margin-right:25px}.mr30{margin-right:30px}.mr35{margin-right:35px}.mr40{margin-right:40px}.mr45{margin-right:45px}.mr50{margin-right:50px}.mb05{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb25{margin-bottom:25px}.mb30{margin-bottom:30px}.mb35{margin-bottom:35px}.mb40{margin-bottom:40px}.mb45{margin-bottom:45px}.mb50{margin-bottom:50px}.ml05{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml25{margin-left:25px}.ml30{margin-left:30px}.ml35{margin-left:35px}.ml40{margin-left:40px}.ml45{margin-left:45px}.ml50{margin-left:50px} /* -------------------------------------------------------------------------------------------------------------------- */ /* padding styles "05 10 15 20 25 30 35 40 45 50" /* -------------------------------------------------------------------------------------------------------------------- */ .pa05{padding:5px}.pa10{padding:10px}.pa15{padding:15px}.pa20{padding:20px}.pa25{padding:25px}.pa30{padding:30px}.pa35{padding:35px}.pa40{padding:40px}.pa45{padding:45px}.pa50{padding:50px}.pt05{padding-top:5px}.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}.pt25{padding-top:25px}.pt30{padding-top:30px}.pt35{padding-top:35px}.pt40{padding-top:40px}.pt45{padding-top:45px}.pt50{padding-top:50px}.pr05{padding-right:5px}.pr10{padding-right:10px}.pr15{padding-right:10px}.pr20{padding-right:20px}.pr20{padding-right:20px}.pr30{padding-right:30px}.pr30{padding-right:30px}.pr40{padding-right:40px}.pr45{padding-right:45px}.pr50{padding-right:50px}.pb05{padding-bottom:5px}.pb10{padding-bottom:10px}.pb15{padding-bottom:15px}.pb20{padding-bottom:20px}.pb25{padding-bottom:25px}.pb30{padding-bottom:30px}.pb35{padding-bottom:35px}.pb40{padding-bottom:40px}.pb45{padding-bottom:45px}.pb50{padding-bottom:50px}.pl05{padding-left:5px}.pl10{padding-left:10px}.pl15{padding-left:15px}.pl20{padding-left:20px}.pl25{padding-left:25px}.pl30{padding-left:30px}.pl35{padding-left:35px}.pl40{padding-left:40px}.pl45{padding-left:45px}.pl50{padding-left:50px} /* -------------------------------------------------------------------------------------------------------------------- */ /* pentalab 8px system /* margin styles "08 16 24 32 48 56 64 104 112 120" /* -------------------------------------------------------------------------------------------------------------------- */ .ma08{margin:8px}.ma16{margin:16px}.ma24{margin:24px}.ma32{margin:32px}.ma40{margin:40px}.ma48{margin:48px}.ma56{margin:56px}.ma64{margin:64px}.ma72{margin:72px}.ma80{margin:80px}.ma88{margin:88px}.ma96{margin:96px}.ma104{margin:104px}.ma112{margin:112px}.ma120{margin:120px}.mt08{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt48{margin-top:48px}.mt56{margin-top:56px}.mt64{margin-top:64px}.mt72{margin-top:72px}.mt80{margin-top:80px}.mt88{margin-top:88px}.mt96{margin-top:96px}.mt104{margin-top:104px}.mt112{margin-top:112px}.mt120{margin-top:120px}.mr08{margin-right:8px}.mr16{margin-right:16px}.mr24{margin-right:24px}.mr32{margin-right:32px}.mr40{margin-right:40px}.mr48{margin-right:48px}.mr56{margin-right:56px}.mr64{margin-right:64px}.mr72{margin-right:72px}.mr80{margin-right:80px}.mr88{margin-right:88px}.mr96{margin-right:96px}.mr104{margin-right:104px}.mr112{margin-right:112px}.mr120{margin-right:120px}.mb08{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}.mb40{margin-bottom:40px}.mb48{margin-bottom:48px}.mb56{margin-bottom:56px}.mb64{margin-bottom:64px}.mb72{margin-bottom:72px}.mb80{margin-bottom:80px}.mb88{margin-bottom:88px}.mb96{margin-bottom:96px}.mb104{margin-bottom:104px}.mb112{margin-bottom:112px}.mb120{margin-bottom:120px}.ml08{margin-left:8px}.ml16{margin-left:16px}.ml24{margin-left:24px}.ml32{margin-left:32px}.ml40{margin-left:40px}.ml48{margin-left:48px}.ml56{margin-left:56px}.ml64{margin-left:64px}.ml72{margin-left:72px}.ml80{margin-left:80px}.ml88{margin-left:88px}.ml96{margin-left:96px}.ml104{margin-left:104px}.ml112{margin-left:112px}.ml120{margin-left:120px} /* -------------------------------------------------------------------------------------------------------------------- */ /* padding styles "08 16 24 32 48 56 64 104 112 120" /* -------------------------------------------------------------------------------------------------------------------- */ .pa08{padding:8px}.pa16{padding:16px}.pa24{padding:24px}.pa32{padding:32px}.pa40{padding:40px}.pa48{padding:48px}.pa56{padding:56px}.pa64{padding:64px}.pa72{padding:72px}.pa80{padding:80px}.pa88{padding:88px}.pa96{padding:96px}.pa104{padding:104px}.pa112{padding:112px}.pa120{padding:120px}.pt08{padding-top:8px}.pt16{padding-top:16px}.pt24{padding-top:24px}.pt32{padding-top:32px}.pt40{padding-top:40px}.pt48{padding-top:48px}.pt56{padding-top:56px}.pt64{padding-top:64px}.pt72{padding-top:72px}.pt80{padding-top:80px}.pt88{padding-top:88px}.pt96{padding-top:96px}.mt104{padding-top:104px}.mt112{padding-top:112px}.mt120{padding-top:120px}.pr08{padding-right:8px}.pr16{padding-right:16px}.pr24{padding-right:24px}.pr32{padding-right:32px}.pr40{padding-right:40px}.pr48{padding-right:48px}.pr56{padding-right:56px}.pr64{padding-right:64px}.pr72{padding-right:72px}.pr80{padding-right:80px}.pr88{padding-right:88px}.pr96{padding-right:96px}.pr104{padding-right:104px}.pr112{padding-right:112px}.pr120{padding-right:120px}.pb08{padding-bottom:8px}.pb16{padding-bottom:16px}.pb24{padding-bottom:24px}.pb32{padding-bottom:32px}.pb40{padding-bottom:40px}.pb48{padding-bottom:48px}.pb56{padding-bottom:56px}.pb64{padding-bottom:64px}.pb72{padding-bottom:72px}.pb80{padding-bottom:80px}.pb88{padding-bottom:88px}.pb96{padding-bottom:96px}.pb104{padding-bottom:104px}.pb112{padding-bottom:112px}.pb120{padding-bottom:120px}.pl08{padding-left:8px}.pl16{padding-left:16px}.pl24{padding-left:24px}.pl32{padding-left:32px}.pl40{padding-left:40px}.pl48{padding-left:48px}.pl56{padding-left:56px}.pl64{padding-left:64px}.pl72{padding-left:72px}.pl80{padding-left:80px}.pl88{padding-left:88px}.pl96{padding-left:96px}.pl104{padding-left:104px}.pl112{padding-left:112px}.pl120{padding-left:120px} /* -------------------------------------------------------------------------------------------------------------------- */ /* font size /* -------------------------------------------------------------------------------------------------------------------- */ /* font int */ html {font-size: 62.5%} body {font-size: 1.0rem;} /* rem 08-40 */ .fs08{font-size:0.8rem}.fs09{font-size:0.9rem}.fs10{font-size:1.0rem}.fs11{font-size:1.1rem}.fs12{font-size:1.2rem}.fs13{font-size:1.3rem}.fs14{font-size:1.4rem}.fs15{font-size:1.5rem}.fs16{font-size:1.6rem}.fs17{font-size:1.7rem}.fs18{font-size:1.8rem}.fs19{font-size:1.9rem}.fs20{font-size:2.0rem}.fs21{font-size:2.1rem}.fs22{font-size:2.2rem}.fs23{font-size:2.3rem}.fs24{font-size:2.4rem}.fs25{font-size:2.5rem}.fs26{font-size:2.6rem}.fs27{font-size:2.7rem}.fs28{font-size:2.8rem}.fs29{font-size:2.9rem}.fs30{font-size:3.0rem}.fs31{font-size:3.1rem}.fs32{font-size:3.2rem}.fs33{font-size:3.3rem}.fs34{font-size:3.4rem}.fs35{font-size:3.5rem}.fs36{font-size:3.6rem}.fs37{font-size:3.7rem}.fs38{font-size:3.8rem}.fs39{font-size:3.9rem}.fs40{font-size:4.0rem} /* -------------------------------------------------------------------------------------------------------------------- */ /* radius styles "03 05 10 15 20" /* -------------------------------------------------------------------------------------------------------------------- */ .r03 {border-radius: 3px;} .r05 {border-radius: 5px;} .r10 {border-radius: 10px;} .r15 {border-radius: 15px;} .r20 {border-radius: 20px;} /* -------------------------------------------------------------------------------------------------------------------- */ /* float styles "fl fr" /* -------------------------------------------------------------------------------------------------------------------- */ .fl {float: left;} .fr {float:right;} /* -------------------------------------------------------------------------------------------------------------------- */ /* list style /* -------------------------------------------------------------------------------------------------------------------- */ ol.number li {list-style-type: number;} ul.list li {list-style-type: square;} /* -------------------------------------------------------------------------------------------------------------------- */ /* default hover /* -------------------------------------------------------------------------------------------------------------------- */ .ov * {-webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; } .ov:hover * {filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;} .bcgWhite{ background-color:#ffffff; display:block;} .shadow {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);} /* -------------------------------------------------------------------------------------------------------------------- */ /* table /* -------------------------------------------------------------------------------------------------------------------- */ table {} table tr {/*border-top: 1px #ccc solid;*/} table tr:first-child {/*border-top: 2px #ccc solid;*/ vertical-align: middle;} table tr:last-child {border-bottom: 1px #ccc solid; vertical-align: middle;} table th {padding: 10px; vertical-align: middle;} table td {padding: 10px; vertical-align: middle;} table.form {} table.form tr:nth-child(odd) {background: #f2f2f2;} table.form th {padding: 15px; vertical-align: middle;} table.form td {padding: 15px; vertical-align: middle;} span.required {color: #D31414; font-size: 12px; display: block; clear: both;} /* -------------------------------------------------------------------------------------------------------------------- */ /* form /* -------------------------------------------------------------------------------------------------------------------- */ /* area */ .submitArea {display: block; text-align: center;} /* module */ input { padding: 10px 13px; background: #fff; color: #333; border-radius: 5px; } input:hover {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);} input:focus {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);} input[type="submit"] {background-color: #ffd826; color: #613c24;} input[type="submit"]:hover {cursor: pointer; background-color: #222222; color: #fff;} .subBtn{ width : 100%; border-radius : 4px; padding : 25px; font-size : 2rem; font-weight : bold; border : none; } input[type="text"] { padding : 0 10px; border : #ccc 1px solid; position : relative; vertical-align : baseline; font-family : "ＭＳ Ｐゴシック", arial, helvetica, clean, sans-serif; } input[type="text"]:focus {border: #fff 1px solid;} input[type="email"] {padding: 10px; border: #ccc 1px solid;} input[type="email"]:focus {border: #fff 1px solid;} input[name="submitBack"] {} textarea {padding: 10px;} select{ width : 100px; line-height : 2rem; padding : 5px; font-size : 1.5rem; } /* input placeholder */ ::-webkit-input-placeholder {color: #999;} :-ms-input-placeholder {color: #999;} ::-moz-placeholder {color: #999;} :-moz-placeholder {color: #999;} /* -------------------------------------------------------------------------------------------------------------------- */ /* clearFix /* -------------------------------------------------------------------------------------------------------------------- */ .cfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;} .cfix {min-height: 1px;} * html .cfix {height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/} /* */ /* ======================================================================================================================== */ /* WordPress Native Styles /* ======================================================================================================================== */ /* default */ p {display: block;} strong { font-weight: bold; } blockquote { display : block; -webkit-margin-before : 1em; -webkit-margin-after : 1em; -webkit-margin-start : 40px; -webkit-margin-end : 40px; } /* img */ .aligncenter {display: block; margin: 0 auto;} .alignright {float: right;} .alignleft {float: left; } img[class*="wp-image-"], img[class*="attachment-"] {height: auto; max-width: 100%;} /* ======================================================================================================================== */ /* Accessibility /* ======================================================================================================================== */ /* Recognition of text */ body { background-color : #fff; color : #666; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/bgp.png); background-size : cover; background-position : center center; background-attachment : fixed; font-family : "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; } /* Recognition of the link */ a {text-decoration: none; color: #666;} a:hover {text-decoration: none;} a:after {color: #666;} /* Brevity of the sentence */ h1 { width : 500px; height : 0px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/h1.png); background-repeat : no-repeat; padding-top : 100px; overflow : hidden; line-height : 1.5; float : left; } .spLogo {display: none;} h2 {} h3 {} h4 {} h5 {} h6 {} .lead {} .caption {} .sentence {} /* ======================================================================================================================== */ /* bace layout /* ======================================================================================================================== */ #outContainer {font-size: 1.6rem;} #container {margin: 0 auto;} /* -------------------------------------------------------------------------------------------------------------------- */ /* layout width /* -------------------------------------------------------------------------------------------------------------------- */ #outContainer {width: 100%;} #container, main, header, nav, footer {width: 1200px;} /* -------------------------------------------------------------------------------------------------------------------- */ /* header area /* -------------------------------------------------------------------------------------------------------------------- */ /* header area */ header {height: 160px;} /* global navigation */ nav {height: 50px; clear: both; padding: 0 8px; margin-bottom: 20px;} nav ul li a { width : 235px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/gnavi.png); float : left; padding-top : 50px; overflow : hidden; height : 0; margin-right : 1px; line-height : 1.5; } nav ul li a:hover {background-position: 0 -50px;} nav ul li:last-child a {margin-right: 0;} nav ul li ul { width : 236px; position : absolute; margin-top : 50px; z-index : 500; margin-left : 236px; display : none; } /* default */ nav li.newItem a {background-position: 0px 0px;} nav li.item a {background-position: -237px 0px;} nav li.info a {background-position: -474px 0px;} nav li.delivery a {background-position: -711px 0px;} nav li.cart a {background-position: -948px 0px;} nav li.sofbi a {background-position: 0px 0px;} nav li.apparel a {background-position: 0px 0px;} nav li.maudou a {background-position: 0px 0px;} nav li.other a {background-position: 0px 0px;} /* hover */ nav li.newItem:hover a {background-position: 0px -50px;} nav li.item:hover a {background-position: -237px -50px;} nav li.info:hover a {background-position: -474px -50px;} nav li.delivery:hover a {background-position: -711px -50px;} nav li.cart:hover a {background-position: -948px -50px;} nav li.sofbi:hover a {background-position: -948px -50px;} nav li.apparel:hover a {background-position: -948px -50px;} nav li.maudou:hover a {background-position: -948px -50px;} nav li.other:hover a {background-position: -948px -50px;} /* sub menu */ nav ul li.subMenu {position: relative;} nav ul li.subMenu:hover ul {display: block; margin-top: 50px;} nav ul li.subMenu:hover ul {display: block;} nav ul li.subMenu:hover ul li a {background: url(https://img11.shop-pro.jp/PA01147/524/etc_base64/Z25hdmlfc3Vi.png);} nav ul li.subMenu:hover ul li.sofbi a {background-position: 0 0;} nav ul li.subMenu:hover ul li.apparel a {background-position: 0 -50px;} nav ul li.subMenu:hover ul li.maudou a {background-position: 0 -100px;} nav ul li.subMenu:hover ul li.other a {background-position: 0 -150px;} nav ul li.subMenu:hover ul li.sofbi:hover a {background-position: -236px 0;} nav ul li.subMenu:hover ul li.apparel:hover a {background-position: -236px -50px;} nav ul li.subMenu:hover ul li.maudou:hover a {background-position: -236px -100px;} nav ul li.subMenu:hover ul li.other:hover a {background-position: -236px -150px;} main {clear: both;} /* -------------------------------------------------------------------------------------------------------------------- */ /* footer area /* -------------------------------------------------------------------------------------------------------------------- */ footer {clear: both; margin: 20px auto; padding: 8px; height: 50px; padding-top: 20px;} footer a {color: #fff;} footer a:hover {color: #fff; text-decoration: underline;} footer p {float: left; color: #fff; font-size:1.0rem;} footer .company { float : right; width : 265px; height : 0; line-height : 30px; padding-top : 25px; overflow : hidden; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/logo_baketan.png); background-repeat : no-repeat; } footer .company2 { float : right; width : 265px; height : 0; line-height : 30px; padding-top : 25px; overflow : hidden; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/logo_polly.png); background-repeat : no-repeat; } address {} /* ======================================================================================================================== */ /* element common /* ======================================================================================================================== */ /* -------------------------------------------------------------------------------------------------------------------- */ /* common /* -------------------------------------------------------------------------------------------------------------------- */ .list {clear: both;} .list article { float : left; width : 284px; background : #fff; height : 200px; border-radius : 5px; margin : 8px; padding : 5px; border : 3px #fff solid; } .list h3 {margin-top: 10px; font-size: 1.2rem} .list h3 + p {font-size: 1rem; margin-top: 3px; padding-bottom: 5px;} .icoInstagram { display : block; width : 40px; height : 0; padding-top : 40px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/ico_instagram.png); margin-right : 10px; overflow : hidden; line-height : 1.5; float : right; margin-top : 30px; } .icoTwitter { display : block; width : 40px; height : 0; padding-top : 40px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/ico_twitter.png); overflow : hidden; line-height : 1.5; float : right; margin-top : 30px; margin-right : 11px; } .icoLogin { display : block; width : 80px; height : 0; padding-top : 40px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/ico_login.png); overflow : hidden; line-height : 1.5; float : right; margin-top : 30px; margin-right : 11px; } .explMin { width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* -------------------------------------------------------------------------------------------------------------------- */ /* home /* -------------------------------------------------------------------------------------------------------------------- */ .mainVisual { width : 584px; margin : 8px; height : 416px; float : left; position: relative; } .mainVisual img {border-radius: 5px;} .mainVisual .btnMore { width : 584px; height : 0; padding-top : 67px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/btn_front_more.png); position : absolute; bottom : 0; overflow : hidden; line-height : 1.5; border-radius : 5px; } .mainVisual .btnMore:hover {background-position: 0 -67px;} .moreBtnImg {display: none;} /* -------------------------------------------------------------------------------------------------------------------- */ /* contentsArea /* -------------------------------------------------------------------------------------------------------------------- */ .contentsArea { background-color : #fff; border-radius : 3px; width : 100%; } .contentsArea h2 { line-height : 2.2rem; margin-top : 8px; font-size : 2.2rem; border-bottom : 1px solid #ccc; } .contentsArea h2 span{font-size:1.5rem;color:#cccccc;} .itemInfo {} .itemInfo table{ width : 100%; margin : 10px auto; } .itemInfo table tr:first-child{border-top: none;} .captionArea { margin-top: 20px; } .captionArea p { line-height: 2.2rem; margin-bottom: 1rem;} .textSmall {font-size: 1rem;} .btnArea {width: 100%;} .btnArea form { width: 100%; } .new_mark_img1 {display: none;} /* free1 */ iframe {width: 594px; height: 340px; overflow: hidden;} /* home info */ .infoBox { display: block; padding: 20px; background: #fff; line-height: 1.5; margin: 0 8px; border-radius: 5px; margin-bottom: 10px; } /* policy */ .policy h2 { margin-bottom: 30px; padding-bottom: 20px; } .policy h3 { font-size: large; margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-top: 20px; } .policy p { margin-bottom: 20px; line-height: 1.8; } #delivery { margin-top: -20px; } .pad_l_10 { margin-bottom : 15px; padding-top : 20px; padding-bottom : 10px; } dd + dt {margin-top: 10px;} .soldOutIcon { width : 100%; text-align : right; } .thumbnailBox {position: relative;} .explMin .newIcon { display : block; position : absolute; margin-top : -152px; background : url(https://file002.shop-pro.jp/PA01147/524/shop_images/newIcon.png); width : 100px; height : 0px; padding-top : 100px; line-height : 1.5; overflow : hidden; } /* ======================================================================================================================== */ /* responsive /* ======================================================================================================================== */ @media screen and (min-width:640px) { .spNav {display: none;} .contentsArea { padding : 40px; width : 98%; margin : 0 8px; display : inline-block; } .imgArea { width : 500px; float : left; height : auto; } .imgArea ul li { /*border : 1px solid #ccc;*/ padding : 5px; margin-bottom : 10px; text-align : center; } .imgArea ul li img { max-width : 100%; height : auto; } .detailArea { width : 100%; padding : 0px 30px; padding-left : 520px; } nav {width: 100%;} } /* -------------------------------------------------------------------------------------------------------------------- */ /* tablet /* -------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:768px) { /* S tablet */ img { max-width : 100%; height : auto; width /***/ : auto; } /* E tablet */ } /* -------------------------------------------------------------------------------------------------------------------- */ /* smart phone /* -------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:640px) { /* S smart phone */ html, body {width: 100%;} h1 {display: none;} .spLogo {width: 100%; display: block;} nav {display: none;} header {height: auto;} header .fr {float: none;} .snsArea {background: rgba(255,255,255,0.5); width: 90px; margin: 0 auto; display: none;} .icoInstagram {margin-top: 0px;} .icoTwitter {margin-top: 0px;} .moreBtnImg {display: block; margin-top: 20px;} #outContainer {width: 100%;} #container, main, header, nav, footer {width: 90%; margin: 0 auto; text-align: center;} .spNav { clear : both; margin-bottom : 10px; width : 100% } .spNavBtn {background: #fff; text-align: center; padding: 20px; width: 100%; display: block;} main { width: 90%; margin:0 auto; } section.list{ width: 100%; display: block; margin:0 auto; } .list article {width: 100%; height: auto; margin:8px 0px;} .list article img {width: 100%;} .spMenuTtl { background : #FFD826; padding : 20px; font-weight : bold; color : #333; } .spMenu { display : none; padding : 10px; line-height : 2; background : #FFD826; font-weight : bold; color : #333; } .spMenu a {display: block; border-top: 1px solid #ffefa6; padding: 10px;} .mainVisual {width: 100%; height: auto; margin:8px 0px;} .mainVisual .btnMore {display: none;} .moreBtnImg {} .contentsArea{padding: 1.5rem;} .imgArea{width: 100%; margin-bottom:10px;} .imgArea ul li img{ width: 100%; margin-bottom: 4px; } .detailArea { width : 100%; text-align : left; } img { width : 100%; height : auto; width /***/ : auto; } select {width : 50%;} footer {text-align: center;} footer .company { float : none; display : block; margin : 20px auto; } footer p {float: none;} .soldOutIcon img {height: 142px; width: 142px!important;} /* E smart phone */ }