@charset "utf-8"; /* CSS Document */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,greek); @import url(https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i); * {box-sizing:border-box;} a, a:after {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; outline:none;} a {cursor:pointer;} div,ol,ul,li,p,span,a {position:relative;} ol,ul,li {list-style:none;list-style-type:none;padding:0;} body,header,footer,menu,p {padding:0;margin:0;} h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding:0;line-height:1em;} div,a,img,p,li {display:block;} /*a:hover img {opacity:0.75;}*/ body {background-color:#fff;color:#111;font-size:16px;width:100%; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} #wrapper {overflow:hidden;} /*ヘッダー*/ header {width:100%;background-color:#fff;border-top:7px solid #D7AF36;} header > div {/*max-*/width:980px;margin:0 auto;/*width:100%;*/text-align:left;padding:0 0 10px;} header > div > div {float:left;width:/*72%*/705px;} header p.lead {font-size:0.75em;line-height:1.3em;margin-top:0.5em;text-align:center;} header h1 {text-align:left;font-size:2.5em;} header h1 img {width:100%;max-width:800px;display:block;} /*#chawfloorlink {float:right;width:27%;} #chawfloorlink li {margin-bottom:0.5em;} #chawfloorlink li a {background-color:#f00;color:#fff;font-weight:600;padding:0.75em 0.5em;border-radius:5px;width:100%;text-decoration:none;font-size:0.9em;} #chawfloorlink li:nth-child(2) a {background-color:#0af;}*/ /*#chawfloorlink li:nth-child(3) a {background-color:#ffc;}*/ /*#chawfloorlink li a:hover {background-color:#fc0;box-shadow:0 0 3px 1px red;color:red;}*/ #chawfloorlink {float:right;width:/*27%*/264px;height:200px;background:url(../img/building2.png) no-repeat left bottom;background-size:contain;} #chawfloorlink li {margin-bottom:5px;} #chawfloorlink li img {width:100%;} #chawfloorlink li:first-child {background:none;padding:0 0 20px;} #chawfloorlink li a {text-align:left;width:100%;padding:0.55em 0 0.55em 0.5em;text-decoration:none;color:#000;font-weight:600;text-shadow:1px 1px 0.1em #fff,-1px 1px 0.1em #fff,-1px -1px 0.1em #fff,1px -1px 0.1em #fff;} #chawfloorlink li a:hover {background:rgba(255,0,0,0.5);border-radius:4px;} #chawfloorlink li:nth-child(2) a:hover {background:rgba(0,200,255,0.5);border-radius:4px;} #contentWrapper {background:linear-gradient(to bottom, #F6F0D6, #fff);border-top:1px solid #EADFB1;} /*contents*/ #content {color:#111;margin:0 auto;padding:20px 0 20px;width:950px;color:#111;} #content h3 {text-align:center;font-size:2em;line-height:2em;font-weight:600;} #content > img, #content > a img {width:100%;} #content > hr {border-width: 0 0 8px; border-style: solid; border-image: url('data:image/svg+xml,') 0 0 100% repeat; width: 80%;margin:30px auto;} /*wind=============================================================================================================================*/ /*ヘッダーメニュー*/ #navmenu {width:100%;background:linear-gradient(to bottom, #474747, #737373);} #navmenu ul {/*max-*/width:980px;/*width:100%;*/margin:0 auto;} #navmenu ul li {float:left;width:16.6%;} #navmenu ul li a {color:#fff;font-weight:600;text-align:center;font-size:0.75em;padding:0.1em 0.5em 0.5em;text-decoration:none;text-shadow: 2px 2px 2px #333;} #navmenu ul li a:hover {background:rgba(0,0,0,0.4);} #navmenu ul li a:before {display:inline;position:relative;top:0.45em;} #navmenu ul li.allstock a:before {content:url(../img/i_all_stock.png);} #navmenu ul li.newarrival a:before {content:url(../img/i_new.png);} #navmenu ul li.buying a:before {content:url(../img/i_kaitori.png);} #navmenu ul li.access a:before {content:url(../img/i_access.png);} #navmenu ul li.windtop a:before {content:url(../img/i_windtop.png);} #navmenu ul li.import a:before {content:url(../img/i_import.png);} /*2カラム分け*/ #leftcolumn {width:72%;float:left;} #rightcolumn {width:27%;float:right;background:#fff;} /*メイン（左）カラム内容*/ #slideArea {width:100%;background-color:#171717;/*height:450px;*/margin-bottom:10px;border:5px solid #D7AF36;} #slideArea ul {margin:0 auto;} #bxpager {text-align:center;padding-top:1.5em;} #bxpager a {display:inline-block;width:90px;cursor:pointer;}/*サムネイル6個時でwidth100px*/ #bxpager a img {width:100%;} #bxpager a:hover img {background:#fff;opacity:0.75;} #bxpager a.active:before {content:"";display:block;position:absolute;background-color:rgba(200,180,0,0.6);width:100%;height:0.8em;top:-0.9em;} #bxpager a.active:after {content:"";display:block;position:absolute;border:transparent solid 0.5em;border-bottom:rgba(200,180,0,0.6) solid 0.5em;top:-1.9em;left:50%;margin-left:-0.5em;} #leftcolumn > a {width:100%;margin:10px 0;} #leftcolumn > a:hover {box-shadow:0 0 8px 2px #c90;opacity:0.8;} #leftcolumn a img {width:100%;} #leftcolumn a.banner img {height:120px;background-color:#ccc;} #leftcolumn .ogp_bnr{ /**/ display: flex; flex-wrap: wrap; justify-content: space-between; width: 684px; } #leftcolumn .ogp_bnr img { display:inline; width:338px; } #leftcolumn .ogp_bnr > a {width:338px;margin:0 0;} #leftcolumn .ogp_bnr > a:hover { opacity:0.8; } .twitter-timeline {width:49% !important;float:left;} #shopinfo {border:1px solid #ccc;float:right;width:49%;font-size:0.875em;line-height:1.3em;padding:0.75em;} #shopinfo h4 {font-family: Lora , serif;font-style:italic;font-weight:400;font-size:1.25em;line-height:1.5em;} #shopinfo img {width:80%;} #shopinfo a {display:inline;} #shopinfo a:hover {color:#f90;} /*メニュー（右）カラム内容*/ #rightcolumn a:hover img {opacity:0.75;} #rightcolumn ul {padding:0;margin:2px 0 7px;width:100%;} #rightcolumn ul li {float:left;width:46%;margin:2%;} #rightcolumn ul li:first-child {width:96%;} #rightcolumn ul li a {width:100%;} #rightcolumn ul li a img {width:100%;} #rightcolumn ul h5 {background-color:#D7AF36;color:#fff;font-weight:600;padding:0.75em;} #rightcolumn ul.brand li {margin:1% 2%;} #rightcolumn ul.brand li a {border:1px solid #333 inset;border-radius:2px;text-decoration:none;text-align:center;font-size:0.85em;} #rightcolumn ul.brand li a span {font-size:0.75em;display:block;line-height:1.0em;} #rightcolumn ul.brand li a:hover {text-decoration:underline;} #rightcolumn ul.brand li a img {border-radius:2px;} #rightcolumn ul.brand li:last-child {text-align:center;font-size:0.875em;line-height:40px;font-weight:600;} #rightcolumn ul.brand li:last-child a {text-decoration:none;border:none;} #rightcolumn ul.brand li:last-child a:hover {text-decoration: underline;color:#F90;} #rightcolumn ul.acc li {margin:1% 0 1% 2%;width:30.666%;} #rightcolumn ul.acc li > a {background:#171717;color:#D7AF36;font-size:0.75em;font-weight:600;text-align:center;text-decoration:none;padding:0.5em 0;} #rightcolumn ul.acc li > a:hover {background:#666;} #rightcolumn ul.acc li:first-child {width:96%;margin:1% 2%;} #rightcolumn ul.acc li h5 a {text-decoration:none;color:#fff;} #rightcolumn ul.acc li h5:hover {background-color:#fc3;transition:ease all 0.3s} #rightcolumn a img {width:100%;} #rightcolumn > a {width:96%;margin:10px auto;} /*おすすめアクセサリー*/ #leftcolumn > h4 {background-color:#999;padding:0.5em;font-weight:600;color:gold;font-size:1.25em;margin:1em 0 0.5em;} #accessories {margin:0;} #accessories li {width:25%;padding:0 2%;float:left;margin-bottom:1em;} #accessories li.other {width:100%;font-weight:600;text-align:right;} #accessories li a {text-decoration:none;font-size:1em;line-height:1.4em;color:#111;} #accessories li a div {height:10em;overflow:hidden;background-position:center center;background-size:contain;background-repeat:no-repeat;} #accessories li a div {transition: all ease-out 0.3s;} #accessories li a p {height:4.5em;} #accessories li a span {display:block;color:red;font-weight:600;text-align:right;} #accessories li a span:after {content:"(税込)";font-size:0.65em;} #accessories li a:hover {/*box-shadow:0 0 5px 1px red;*/color:#f90;} #accessories li a:hover div {background-size:cover;transition: all ease-out 0.3s;} #pushitems {margin:0;} #pushitems li {width:25%;padding:0 2%;float:left;margin-bottom:1em;} #pushitems li.other {width:100%;font-weight:600;text-align:right;} #pushitems li a {text-decoration:none;font-size:1em;line-height:1.4em;color:#111;} #pushitems li a div {height:10em;overflow:hidden;background-position:center center;background-size:contain;background-repeat:no-repeat;} #pushitems li a div {transition: all ease-out 0.3s;} #pushitems li a p {height:4.5em;} #pushitems li a span {display:block;color:red;font-weight:600;text-align:right;} #pushitems li a span:after {content:"(税込)";font-size:0.65em;} #pushitems li a:hover {/*box-shadow:0 0 5px 1px red;*/color:#f90;} #pushitems li a:hover div {background-size:cover;transition: all ease-out 0.3s;} /*フッター*/ footer {background-color:rgb(0,0,0);color:#fff;width:100%;} p.copyright {font-family: 'Open Sans', sans-serif;font-weight:400;font-size:0.75em;text-align:center;line-height:2em;} /*ページトップへ*/ .pagetop {display: none;position: fixed;bottom: 30px;right: 35px;z-index:+20;} .pagetop a {display: block;width: 50px;height: 50px;background-color: rgba(0,150,100,0.7);text-align: center;color: #fff;font-size: 24px;text-decoration: none;line-height: 50px;border-radius:25px;outline:none;} /*汎用*/ .mincho {font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;} .serif {font-family: "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";} .gothic {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} .boxshadow {box-shadow: 2px 2px 4px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.5); -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);} .txthshadow {text-shadow:1px 1px 0.1em #000,-1px 1px 0.1em #000,-1px -1px 0.1em #000,1px -1px 0.1em #000;} .clearfix:after {content:"";display:block;position:relative;clear:both;} .spshow {display:none;visibility:hidden;} @media screen and (max-width: 66.6em) { } /*980px*/ @media screen and (max-width: 61em) { #headerleft {padding:13px 0 18.75em;} } /*894px*/ @media screen and (max-width: 55.9em) { } /*830px*/ @media screen and (max-width: 51.9em) { } /*736px*/ @media screen and (max-width: 46.1em) { header {font-size:0.8em;} } /*666*/ @media screen and (max-width: 41.7em) { } /*606px*/ @media screen and (max-width: 37.9em) { header {font-size:0.7em;} #headerleft {width:98%;float:none;margin:0 auto;padding:13px 0 16em;background-position:right top;font-size:1.5em;} #headerright {width:98%;float:none;margin:0 auto;padding:13px 0 0;} #headerright div.bnrs {width:49%;float:left;} #content > hr {margin:15px auto;} .sphide {display:none;visibility:hidden;} .spshow {display:inline-block;visibility: visible;} } /*529px*/ @media screen and (max-width: 34.5em) { header {font-size:0.6em;} #headerright div.bnrs {width:98%;float:none;} .mbhide {display:none;visibility:hidden;} } /*430px*/ @media screen and (max-width: 26.9em) { header {font-size:0.5em;} } /*375*/ @media screen and (max-width: 23.5em) { header {font-size:0.4em;} } /*360*/ @media screen and (max-width: 22.6em) { } /*320*/ @media screen and (max-width: 20.1em) { }