@charset "utf-8";
/* reset CSS */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td hr {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
font-family:"Hiragino Kaku Gothic W3", "Hiragino Kaku Gothic Pro","Helvetica Neue",Helvetica,Arial,"メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif!important;
padding-top: 150px;
@media (max-width: 767px) {
padding-top: 100px;
}
}
html {
overflow-y:scroll;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
}
th {
font-weight:normal;
text-align:left;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
vertical-align: bottom;
}
a img {
border: none;
}
a {
outline:none;
text-decoration:none;
color:#000;
}
a:hover {
color:#ec8eac;
}
a,
a:link,
a:visited,
a:active,
a:hover { /* FireFox リンク選択時の点線を消す */
overflow: hidden;
outline: none;
}
/* effect : mouse on image */
a:hover img {
opacity:0.9;
filter: alpha(opacity=90);
-ms-filter: "alpha( opacity=90 )";
}
/* CLEARFIX */
.cf:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.cf {min-height: 1px;}
* html .cf {height: 1px;}
/*main code below*/
@black:#111;
@blue:#3498db;
@glay:#aaa;
@green:#1abc9c;
::selection {
background:@green;
}
::-moz-selection {
background:@green;
}
.transition(@speed: 0.3s){
-webkit-transition: all @speed;
-moz-transition: all @speed;
transition: all @speed;
}
h1,h2{
margin: 0 0 21px 0!important;
}
.rokkitt,.changeFont{
font-family: 'Playfair Display SC'!important;
letter-spacing: 0.1em;
}
h1{
letter-spacing: 0!important;
}
h2,.singleTitle{
font-weight: bold!important;
font-size: 1.6em!important;
margin: 55px 0 21px 0!important;
}
.singleSub{
font-size: 36px!important;
letter-spacing: 0!important;
font-weight: normal!important;
margin-top: 0!important;
}
.mincho{
font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro', 'GS明朝E','MS P明朝', serif!important;
}
.bold{
font-weight: bold;
}
h1.first,h2.first{
margin-top: 25px!important;
}
h2.title.center{
text-align: center;
margin-top: 0!important;
margin-bottom: 34px!important;
font-size: 2em!important;
color:#fff;
}
.bx-wrapper{
.bx-prev {
display: block;
text-indent: -9999px;
background-image: url(../images/prev.png);
width: 35px;
height: 35px;
position: absolute;
top: 50%;
left: 25px;
margin-top: -17px;
}
.bx-next {
display: block;
text-indent: -9999px;
background-image: url(../images/next.png);
width: 35px;
height: 35px;
position: absolute;
top: 50%;
right: 25px;
margin-top: -17px;
}
.bx-pager-item {
display: none;
}
}
.map_wrapper {
margin: 20px auto;
padding: 4px;
border: 1px solid #CCC;
}
.googlemap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#header{
padding: 6px 0;
border: none;
border-radius: 0;
background-color: @black;
margin: 0;
.navbar-nav{
a{
color: #fff;
font-size: 12px!important;
.transition;
}
a:hover{
color: @glay;
}
}
.navbar-toggle{
border-color: @black!important;
}
}
#visual{
/* margin-top: 30px; */
.slideArea{
position: relative;
.slide{
video{
width: 100%;
}
img{
width: 100%;
}
}
.captionArea{
position: absolute;
left: 0;
top: 0;
}
}
}
#content{
margin: 0px 0;
padding:0px 0;
}
#exh{
h2{
color:#fff;
margin-bottom: 20px;
width: 300px;
margin: 0 ;
@media (max-width: 767px) {
width: 210px;
margin: 34px 0 !important;
}
img{
width: 100%;
}
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 767px) {
display: block;
}
.pic{
width: 30%;
margin: 0;
@media (max-width: 767px) {
width: 100%;
}
img{
width: 100% !important;
height: auto !important;
}
}
.infobox{
width: 60%;
@media (max-width: 767px) {
width: 100%;
}
h3{
font-size: 18px;
}
h3,p{
color:#fff;
}
p.more{
text-decoration: underline;
margin-top: 20px;
text-align: right;
}
}
}
}
.main{
.pic{
img{
border: solid 1px #ccc;
width: 100%;
height: auto;
/*
min-height: 170px;
min-width: 170px;
*/
}
}
}
div.divider{
border-top: solid 1px #ddd;
margin: 50px 0;
}
body.home{
padding-top: 100px;
@media (max-width: 767px) {
padding-top: 60px;
}
div.divider{
margin-top: 0;
}
}
.article{
word-break: break-all;
.wp_social_bookmarking_light .fb_iframe_widget_lift{
width: 450px!important;
}
iframe {
width: 100%!important;
height: 450px;
}
img{
border: solid 1px #ccc;
max-width: 100%;
height: auto;
}
}
/*custum contact form validations*/
.wpcf7-response-output{
padding: 13px!important;
margin: 21px 0 !important;
}
.wpcf7-validation-errors{
color: #8a6d3b!important;
background-color: #fcf8e3!important;
border: 1px solid #faebcc!important;
}
.wpcf7-mail-sent-ok{
color: #3c763d!important;
background-color: #dff0d8!important;
border: 1px solid #d6e9c6!important;
}
.wpcf7-not-valid-tip{
color: #a94442!important;
background-color: #f2dede!important;
border: 1px solid #ebccd1!important;
padding: 8px!important;
margin: 21px 0 !important;
}
.title.white{
color:#fff;
}
.main.contact{
.row{
padding-bottom: 21px;
.text{
line-height: 38px;
}
.form{
}
.submit{
text-align: center;
input{
width: 233px;
height: 55px;
color: white;
border: none;
background-color: @green;
font-size: 1.3em;
.transition;
}
input:hover{
background-color: @glay;
}
}
}
input{
padding: 8px;
height: 38px;
}
textarea{
resize: none;
}
input,textarea{
border: solid 1px #ddd;
width: 100%;
}
.telNumber{
font-size: 1.6em;
}
}
.main.artist,.main.curator{
.name{
text-align: center;
font-weight: bold;
font-size: 1.3em;
padding: 8px 0;
}
.data{
margin-bottom: 21px;
}
}
.row{
.data{
margin-bottom: 34px;
.pic{
margin-bottom: 8px;
position: relative;
&:before {
content: "";
display: block;
padding-top: 100%; /* 1:2 */
}
a{
position: absolute;
width: 100%;
top:0;
left:0;
}
}
.date{
margin-bottom: 3px;
font-weight: bold;
}
.title{
font-weight: bold;
line-height: 20px;
height: 60px;
overflow: hidden;
word-break : break-all;
color:#000;
}
}
&.search{
h2{
padding:0 15px;
}
}
}
#footer{
margin-top: 40px;
@footerSpace: 21px;
background-color: @black;
color: #fff;
padding: @footerSpace 0;
.container{
}
.top{
}
.bottom{
@footerBottomColor: #666;
border-top: solid 1px @footerBottomColor;
margin-top: @footerSpace;
padding: @footerSpace 0;
}
.copyright{
color: #666;
}
.social{
div{
float: right;
}
}
}
/* more than 768px */
@media (min-width: 768px) {
html,.container{
min-width: 970px;
}
#content .main{
min-height: 520px!important;
}
@pcLogoHeight:40px;
#header{
.logo{
height: @pcLogoHeight;
}
.navbar-nav{
a{
line-height: 40px;
}
}
}
#footer{
.logo{
height: @pcLogoHeight;
}
.copyright{
line-height: @pcLogoHeight;
text-align: right;
}
}
}
/* less than 767px */
@media (max-width: 767px) {
.navbar-default .navbar-collapse{
border-color: #282828!important;
}
.navbar-default .navbar-collapse{
border: none;
}
body{
padding-top: 61px;
}
body.home{
.main{
.col-xs-6{
height: 270px;
}
}
h2{
font-size: 1.8em!important;
}
div.divider{
margin: 20px 0;
}
}
#header{
.logo{
height: 27px
}
}
.bx-wrapper{
.bx-prev {
display: none;
}
.bx-next {
display: none;
}
}
.copyright{
text-align: center;
span{
display: none;
}
}
}
body.test{
width: 640px;
margin: 0 auto;
background-color: black;
header{
padding: 10px;
background-color: #fff;
.top{
.main_logo{
float: left;
}
.sub_logo{
float: left;
margin-top: 34px;
}
.menu{
float: right;
padding-top: 9px;
.button{
float: left;
margin-left: 20px;
}
.login{
}
.register{
}
.cart{
}
}
}
.bottom{
padding: 15px 0;
.button{
float: left;
}
.program_search{
margin-right: 4px;
}
.detail_search{
}
}
}
.content{
@textBlue: #0073bf;
background-color: #fff;
.option{
margin-bottom: 5px;
.icon{
width: 40px;
height: 40px;
float: left;
margin-right: 5px;
background-repeat: no-repeat;
}
.icon.restock{
background-image: url('../images/top/tag_restock.png');
}
.icon.new{
background-image: url('../images/top/tag_new.png');
}
.icon.external{
background-image: url('../images/top/tag_external.png');
}
.icon.privilege{
background-image: url('../images/top/tag_tokuten.png');
}
.icon.booking{
background-image: url('../images/top/tag_yoyaku.png');
}
}
.box{
.title_logo{
padding-top: 20px;
background-color: #fff;
}
.more{
padding: 20px 0;
}
.item_list{
padding-top: 10px;
padding-bottom: 10px;
}
.column{
padding: 0 20px;
}
.row.item{
margin-bottom: 10px;
.item_data{
width: 273px;
padding: 10px;
background-color: #fff;
float: left;
border: solid 1px #ccc;
border-radius: 10px;
.option{
min-height: 40px;
}
.name{
font-weight: bold;
}
.picture{
height: 276px;
text-align: center;
padding: 10px 0;
}
.price{
text-align: right;
color: @textBlue;
}
}
.item_data:first-child{
margin-right: 10px;
}
}
}
.box.nanana_goods{
background-color: #ffe493;
}
.box.new_arrival{
background-color: #ffd4d4;
}
.inner{
padding: 0 20px;
}
.more{
text-align: center;
}
nav{
ul{
li{
padding: 32px 0 32px 75px;
background-color: #fff;
background-repeat: no-repeat;
font-size: 24px;
border-top: solid 1px #ccc;
}
}
}
.search{
padding: 10px 0px;
background-color: #d9d9d9;
position: relative;
.text{
input{
width: 520px;
background-repeat: no-repeat;
background-image: url('../images/top/icon_search.png');
background-position: left center;
background-position-x: 2%;
border: solid 1px #adadad;
border-radius: 40px;
padding: 10px 10px 10px 70px;
height: 35px;
line-height: 35px;
font-size: 18px;
}
}
.submit{
position: absolute;
right: 25px;
top: 16px;
/*
input{
background-color: #fff;
background-repeat: no-repeat;
background-image: url('../images/top/btn_search.png');
text-indent: -9999px;
border: 0;
width: 96px;
height: 56px;
*/
input{
background-color: #9f9f9f;
border: solid 1px #909090;
border-radius: 40px;
color: #fff;
font-size: 18px;
padding: 8px 20px;
}
}
}
.news{
border-radius: 0px 10px;
border: solid 1px #f887a3;
overflow: hidden;
margin: 15px;
.head{
padding: 5px;
background-color: #fa91a9;
.logo{
float: left;
}
.close{
float: right;
}
}
.headline{
li{
padding: 8px 15px;
border-top: dotted 1px #ccc;
a{
color: @textBlue;
}
.date{
margin-right: 20px;
}
}
li.first{
border-top: none;
}
}
}
.program{
@blue: #0069bc;
.title_logo{
}
nav{
padding-top: 20px;
padding-bottom: 20px;
background-color: @blue;
ul{
border: solid 1px @blue;
border-radius: 10px;
overflow: hidden;
li{
border-bottom: solid 1px @blue;
background-image: url('../images/top/bg_prgrm_nav.png');
}
}
}
}
.ad{
padding-top: 20px;
text-align: center;
.to_top{
padding: 20px 0;
text-align: right;
a{
color: @textBlue;
}
}
}
.ranking{
.rank{
background-repeat: no-repeat;
background-position: left top;
background-position-x: 3%;
padding-top: 50px;
padding-left: 30px;
border-bottom: dotted 1px #ccc;
margin-bottom: 20px;
padding-bottom: 20px;
.item_picture{
float: left;
width: 184px;
img{
max-width: 100%;
}
}
.item_data{
@itemDataBaseWidth: 386px;
@itemDataMargin: 20px;
float: right;
width: @itemDataBaseWidth - @itemDataMargin;
padding-left: @itemDataMargin;
.name{
font-weight: bold;
font-size: 1.6em;
}
.price{
text-align: right;
color: @textBlue;
font-size: 1.3em;
}
}
}
.rank.first{
margin-top: 20px;
background-image: url('../images/top/tag_rank_1.png');
}
.rank.second{
background-image: url('../images/top/tag_rank_2.png');
}
.rank.third{
background-image: url('../images/top/tag_rank_3.png');
border-bottom: none;
}
}
.guide{
.title{
padding-top: 5px;
padding-bottom: 5px;
border-top: solid 1px #ff8500;
background-color: #fed555;
font-weight: bold;
}
nav{
ul{
li{
padding: 12px 0 12px 40px;
background-image: url('../images/top/icon_triangle.png');
background-position: left center;
background-position-x: 23px;
}
li.first{
border-top: none;
}
}
}
}
}
footer{
background-color: #003359;
.copyright{
color: #fffefc;
text-align: center;
font-size: 15px;
padding: 5px 0;
}
}
}
/*add 20200422 sugie*/
.pc{
display: block;
@media (max-width: 768px) {
display: none;
}
}
.sp{
display: none;
@media (max-width: 768px) {
display: block;
}
}
.search_form{
background: #fff;
border-radius: 15px;
border:1px solid #fff;
overflow: hidden;
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
background: #000;
input[type="text"] {
padding: 2px 10px;
box-sizing: border-box;
border: none;
border-radius: 0;
outline: none;
background: none;
letter-spacing: .1em;
font-size: 12px;
vertical-align: middle;
background: #000;
color:#fff;
}
button[type="submit"]{
height: 100%;
padding: 5px 10px;
border:none;
color:#fff;
letter-spacing: .1em;
font-size: 12px;
vertical-align: middle;
background: #3E3E3F;
&:hover{
opacity: 0.8;
}
}
}
@media (min-width: 768px) {
.navbar-right{
text-align: right;
.navbar-nav{
float: none;
}
}
#header{
.navbar-brand{
padding: 25px 15px;
}
.navbar-nav>li>a{
padding-top: 10px;
line-height: 24px;
}
}
}
@media (max-width: 768px) {
#header{
.navbar-brand{
padding:11px 15px;
}
}
.spsearch_form{
float: right;
margin-top: 13px;
width: 51%;
margin-right: 5px;
}
.search_form{
margin-bottom: 0;
margin-right: 0;
font-size: 0;
input[type="text"] {
width: 68%;
letter-spacing: 0;
font-size: 16px;
transform: scale(0.65);
letter-spacing: .07em;
padding: 0;
}
button[type="submit"] {
width: 32%;
font-size: 10px;
padding:4px 0px;
line-height: 16px;
}
}
}
.page-id-3052{
.fair{
.row{
display: flex;
flex-wrap: wrap;
}
.col-xs-6{
float:none;
}
}
}