/*
Theme Name: New Jewelry 2018
*/


a:link { text-decoration: none; color:#565353; }
a:visited { text-decoration: none; color:#565353; }
a:hover { text-decoration: none; color:#565353; opacity: 0.6;}
a:active { text-decoration: none; color:#565353; opacity: 1.0;}

a.permalink:link,
a.permalink:visited{ 
    background-color: #0f3675;
    color: #FFF;
    padding: 6px 8px;
    line-height: 100%;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    font-size: 11px;
    margin-top: 12px;
    display: inline-block;
}
a.permalink:hover{
    color: #FFF;
    background-color: #0f3675;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 	margin:0;	padding:0;}table {	border-collapse:collapse;	border-spacing:0;}fieldset,img { 	border:0;}address,caption,cite,code,dfn,th,var {	font-style:normal;	font-weight:normal;}ol,ul {	list-style:none;
}caption,th {	text-align:left;}h1,h2,h3,h4,h5,h6 {	font-weight:normal;}q:before,q:after {	content:'';
}abbr,acronym {  border:0;}

html, body {
    height: 100%;
    width: 100%;
}

.smponly{
    display: none;
}
.pconly{
    display: block;
}
.caution{
    color: #FF3300;
}
.nondisplay{
   display: none; 
}
.ws-title{
    font-size: 16px;
    color: #6c6c6d;
}
.sold{
    text-decoration: line-through;
}
.link-anchor{
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}
.caption{
    line-height: 2;
    font-size: 11px;
    display: block;
    padding-top: 5px;
}

*{
    margin: 0;
    padding: 0;
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0; 
    overflow:hidden; 
    width: 100%;
    max-width: 100%; 
    height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
a img {
}
a:hover img {
    opacity: 0.6;
}
.full {
    height: 100%;
    width: 100%;
}
#main-visual-inner{
    background-position: center center;
        background-size: cover;
}
body{
	font-family:'游ゴシック体','Yu Gothic', YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ','メイリオ', Meiryo, sans-serif;
	width: 100%;
	height: 100%;
    line-height: 150%;
    color: #222222;
    letter-spacing: 0.1em;
}
.wrapper{
    background-color: #FFFFFF;
}

h1,
h2{
}

/* common
------------------------------------------------------------------------- */
.inner{
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
}
    .content-inner{
        margin: 0 24px;
        width: auto;
        height: auto;
    }
p{
    font-size: 14px;
    text-align: left;
    letter-spacing: normal;
    margin-bottom: 28px;
}
p.cs{
    font-size: 18px;
    text-align: center;
    padding: 0px 0 48px;
    letter-spacing: 0.3ex;
    line-height: 2;
    color: #989898;
}
span.ja{
    font-size: 13px;
    color: #909090;
    padding-left: 12px;
}
.contents-header{
    padding: 48px 0;
}
/* common
------------------------------------------------------------------------- */

/* top
------------------------------------------------------------------------- */
.main-visual-0{
    width: 500px;
    height: auto;
    z-index: 9998;
    margin-top: 48px;
}
.main-visual-title{
    position: absolute;
    left: 20%;
    top:50%;
    margin-top: -190px;
}

.main-visual-info{
    position: absolute;
    left: 45%;
    top:50%;
    margin-top: 0px;
}
    .main-visual-0-info{
        font-size: 36px;
        font-family: 'Playfair Display', serif;
        font-weight: lighter;
        letter-spacing: 0.2em;
        z-index: 9998;
        text-align: left;
        color: #FFF;
        margin-top: 0px;
    }
    .main-visual-0-sub-title{
        font-size: 18px;
        font-family: 'Esteban', serif;
        font-weight: lighter;
        letter-spacing: 0.2em;
        z-index: 9998;
        color: #63ff86;
        text-align: right;
    }
    .main-visual-0-sub-title span{
        display: inline-block;
        border-bottom: 2px solid;
    }
        .main-visual-0-info span{
            display: block;
            line-height: 120%;
            margin-bottom: 24px;
        }
        .main-visual-0-info span.day{
            display: inline;
            font-size: 24px;
        }

.main-visual-1{
    width: 45%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
}
.main-visual-2{
    width: 30%;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
} 
.main-visual-3{
    width: 25%;
    height: auto;
    position: absolute;
    left: 150px;
    bottom: -84px;
}
.main-visual-4{
    width: 45%;
    height: auto;
    position: absolute;
    right: 50px;
    bottom: 0;
}
    .main-visual-image{
        line-height:0;
    }
    .main-visual-image img{
        width: 100%;
        height: auto;
        vertical-align:text-bottom;
    }
a.arrow-down{
    display: block;
    background: url(../images/main/arrow-down.png);
    background-size: 67px 90px;
    width: 67px;
    height: 90px;
    position: absolute;
    bottom: 100px;
    left: 40px;
}
a.arrow-link:link,
a.arrow-link:visited{
    background-color: #0f3675;
    display: inline-block;
    color: #FFFFFF;
    font-size: 11px;
    line-height: 100%;
    padding: 6px 8px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin-top: 24px;
}
a.brand-link:link,
a.brand-link:visited{
    background-color: #0f3675;
    display: inline-block;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: lighter;
    line-height: 100%;
    padding: 6px 8px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
a.brand-link:hover{
    background-color: #0f3675;
}

a.arrow-down:hover,
a.arrow-link:hover{
    background-color: #0f3675;
}

/* top
------------------------------------------------------------------------- */

/* information
------------------------------------------------------------------------- */
#information{
    padding: 72px 0 48px;
    overflow: hidden;
    margin-top: 0px;
    background-color: #FFFFFF;
}
h1.content-title{
    color:#0f3675;
    font-size: 26px;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    line-height: 100%;
    margin: 0 0 24px 0px;
}
h1.content-title-ie{
    color:#0f3675;
    font-size: 26px;
    font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-weight: lighter;
    line-height: 100%;
    margin: 0 0 24px 0px;
}
    .contents-header h1.content-title{
        color:#0f3675;
        font-size: 26px;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        line-height: 100%;
        margin: 0 0 12px 0px;
        text-align: center;
    }
        .contents-header h1.content-title span.ja{
            display: block;
            text-align: center;
            padding-left: 0px;
        }
h2.content-sub-title{
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    color: #0f3675;
    line-height: 100%;
    margin: 24px 0 12px;
}
    h2.content-sub-title:first-child{
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        line-height: 100%;
        margin: 0px 0 12px;
    }
    h3.content-sub-title{
        font-size: 13px;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        color:#0f3675;
        line-height: 100%;
        margin: 24px 0 6px;
    }
    h3.content-sub-title-bottom{
        font-size: 13px;
        font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
        font-weight: lighter;
        color:#0f3675;
        line-height: 150%;
        margin: 0px 0 0px;
    }
span.outline-infomation{
    font-size: 11px;
    display: block;
    line-height: 180%;
}
p.outline-infomation{
    font-size: 11px;
    display: block;
    line-height: 180%;
}
span.outline-reception{
    display: block;
    background-color: #FFF;
    padding: 4px 10px;
    margin-top: 8px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

#outline{
    width: 50%;
    height: auto;
    float: left;
}
    #outline .content-inner {
        height: auto;
        margin: 0 24px;
        width: auto;
    }
    .outline-information{
        background-color: #F0F0F0;
        padding: 24px;
        margin-top: 24px;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
#about{
    width: 50%;
    height: auto;
    float: right;
    margin-top: 0px;
}
    #about .content-inner {
        height: auto;
        margin: 0 24px;
        width: auto;
    }
#brand{
    background: url(../images/bg/brand.png);
    background-size: 311px auto;
    background-position: right top;
    background-repeat: no-repeat;
    min-width: 560px;
    width: 560px;
    height: auto;
    min-height: 725px;
    float: right;
    margin-top: -96px;
}

/* information
------------------------------------------------------------------------- */

/* brand
------------------------------------------------------------------------- */
#brand-wrapper {
    background-color: rgba(181,191,206,0.4);
    clear: both;
    overflow: hidden;
    padding: 0 0 48px;
}


/* pickup
------------------------------------------------------------------------- */
#pickup-wrapper{
    overflow: hidden;
    clear: both;
    background-color: #fff2e5;
}
p.wh{
    color:#FFFFFF !important;
}
.pickup-inner{
    width: 100%;
    overflow: hidden;
}
.pickup-border{
    width: 100%;
    height: 120px;
    background: url(../images/bg/pickup-up.png);
    background-size: 100% 100%;
}
    .pickup-border h1.content-title {
        color: #0f3675;
        font-family: "Open Sans",sans-serif;
        font-size: 26px;
        font-weight: lighter;
        line-height: 100%;
        margin: 0 0 0px 0px;
        padding-top: 56px;
        text-align: left;
    }

.pickup-content{
    overflow: hidden;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #FFF;
}
.pickup-content:last-child{
    overflow: hidden;
    margin-bottom: 0px;
    padding-bottom: 48px;
    border-bottom: 1px solid #FFF;
}
    .content-text{
        width: 50%;
        height: auto;
        float: left;
    }
        .content-text-inner,
        .content-iframe-inner{
            margin: 0 24px;
        }
        .pickup-content h1{
            margin-top: 0px;
        }
        .content-text h2{
            font-family: "Open Sans",sans-serif;
            font-size:24px;
            font-weight: lighter;
            line-height: 100%;
            margin: 24px 0 12px 0px;
        }
    .content-images{
        float: right;
        width: 50%;
    }
    .concierge-prof{
        float: right;
        width: 50%;
    }
    .content-images-inner {
        margin: 0 24px;
    }
    .concierge-prof-wrapper{
        background: #FFF;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        overflow: hidden;
        padding: 24px;
        margin-bottom: 24px;
    }
        .concierge-prof-wrapper p{
            font-size: 11px;
            line-height: 150%;
        }
        .concierge-prof-img {
            display: block;
            background: url(../images/mm.jpg);
            background-size: 100% auto;
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 14px;
        }
        .concierg-info h2{
            font-size: 14px;
            font-weight: bolder;
            line-height: 150%;
            margin: 0 0 12px;
        }
        .content-images-list{
            float: right;
            width: 50%;
        }
            .content-images-list ul,
            .instagram-pickup-inner{
                overflow: hidden;
                margin-left: 18px;
                margin-right: 18px;
            }
            .content-images-list ul li,
            .instagram-placeholder{
                float: left;
                height: auto;
                width: 25%;
                line-height:0;
            }
                .content-images1-2 ul li{
                    width: 50%;
                }
                .content-images1-1 ul li{
                    width: 100%;
                }
            .instagram-placeholder a {
                display: inline-block;
                margin: 6px;
            }
            .instagram-placeholder a img {
                height: auto;
                vertical-align: text-bottom;
                width: 100%;
            }
            .content-images-list-inner{
                line-height:0;
                margin: 6px;
            }
                .content-images-list ul li img{
                    width: 100%;
                    height: auto;
                    vertical-align:text-bottom;
                }


        .content-images-full .content-images-inner{
            margin: 0 24px;
        }
            .content-images-full img{
                width: 100%;
                height: auto;
            }
    .brand,
    .booking{
        background-color: #FFF;
        padding: 24px;
        margin-top: 24px;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
        .brand-index{
            margin: 0 6px 6px;
        }
        .brand-index{
            margin: 0 6px 6px;
        }
        .brand .outline-brand{
            color: #b2b2b2;
        }
    .reservation-list{
        background-color: #FFF;
        padding: 24px;
        margin-top: 12px;
        margin-bottom: 12px;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        display: block;
    }

    .content-text .brand h2,
    .content-text .booking h2{
        font-family: "Open Sans",sans-serif;
        font-size: 18px;
        font-weight: lighter;
        line-height: 100%;
        margin: 0px 0 12px;
    }
        .booking h3{
            font-size: 13px;
            margin: 24px 0 0;
            padding: 24px 0 12px;
            border-top: 1px solid #b2b2b2;
        }
        .booking p{
            font-size: 11px;
            line-height: 150%;
            text-align: left;
        }
        .booking p.booking-text{
            font-size: 11px;
            line-height: 180%;
            text-align: left;
        }
        .content-text .booking h2.timetable{
            padding-top: 12px;
            margin-top: 12px;
            border-top: 1px solid #f0f0f0;
        }
        .booking p.timetable{
            font-size: 11px;
            margin-bottom: 12px;
            letter-spacing: normal;
        }
            .booking p.timetable:last-child{
                font-size: 11px;
                margin-bottom: 0px;
                letter-spacing: normal;
            }
            .booking p.timetable span.date{
                display: block;
            }
            .date-sat{
                color: #2355b7;
            }
            .date-sun{
                color: #f9685d;
            }
    .concierg-info p{
        font-size: 11px;
        line-height: 150%;
        margin-bottom: 24px;
    }

/* workshop-category
------------------------------------------------------------------------- */
.workshop-category-border {
    background-color: #e7ecec;
    height: auto;
    margin-top: 72px;
    padding-bottom: 0;
    padding-top: 48px;
    width: 100%;
}
    .workshop-category-border h1.content-title {
        color: #0f3675;
        font-family: "Open Sans",sans-serif;
        font-size: 26px;
        font-weight: lighter;
        line-height: 100%;
        margin: 0 0 0px;
        text-align: center;
    }
    .workshop-category-inner {
        background-color: #e7ecec;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        width: 100%;
        padding-top: 98px;
    }
h1.content-title-workshop {
    color: #0f3675;
    font-family: "Open Sans",sans-serif;
    font-size: 18px;
    font-weight: lighter;
    line-height: 150%;
    margin: 0 0 18px 0px;
}
h2.content-title-workshop {
    color: #0f3675;
    font-family: "Open Sans",sans-serif;
    font-size: 18px;
    font-weight: lighter;
    line-height: 150%;
    margin: 0 0 18px 0px;
}

span.ws-info {
    display: block;
    font-size: 11px;
    line-height: 180%;
    line-height: normal;
}
span.ws-label {
    font-weight: bolder;
}

a.brand-link-ws:link,
a.brand-link-ws:visited {
    background-color: #0f3675;
    display: inline-block;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bolder;
    line-height: 100%;
    padding: 6px 8px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin-top: 10px;
}
a.brand-link-ws:hover{
    background-color: #0f3675;
}

a.brand-link-ws-reservation:link,
a.brand-link-ws-reservation:visited {
    background-color: #f0f0f0;
    display: inline-block;
    color: #7e7c7c;
    font-size: 11px;
    font-weight: bolder;
    line-height: 100%;
    padding: 6px 8px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin-top: 10px;
}
a.brand-link-ws-reservation:hover{
    background-color: #e0e0e0;
    opacity: 1.0;
}

body.category-ws .pickup-content {
    border-bottom: 1px solid #fff;
    margin-bottom: 48px;
    overflow: hidden;
    padding-bottom: 48px;
}

    body.category-ws .pickup-content:last-child {
        border-bottom: 0px solid #fff;
        margin-bottom: 48px;
        overflow: hidden;
        padding-bottom: 0px;
    }



/* brand-category
------------------------------------------------------------------------- */
#brand-category{
    overflow: hidden;
    clear: both;
}
    .single-page{
        margin-top: 0px;      
        padding-top: 120px;
        background-color: #e1e5eb;
    }
h1.content-title {
    color: #0f3675;
    font-family: "Open Sans",sans-serif;
    font-size: 26px;
    font-weight: lighter;
    line-height: 100%;
    margin: 0 0 18px 6px;
}
h1.content-title-other {
    color: #0f3675;
    font-family: "Open Sans",sans-serif;
    font-size: 26px;
    font-weight: lighter;
    line-height: 100%;
    margin: 0 0 0px 0px;
}
body.brand-single .wrapper{
}

.brand-nav{
    width: 100%;
    overflow: hidden;
    height: 20px;
    margin-top: 12px;
}
    .brand-nav ul{
        font-size: 13px;
        float: left;
        left: 50%;
        position: relative;
    }
        .brand-nav ul li{
            float: left;
            left: -50%;
            margin: 0px 12px;
            position: relative;
        }

.brand-category-inner{
    background-color: #e1e5eb;
    width: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}
.brand-category-border{
    width: 100%;
    height: auto;
    padding-top: 48px;
    padding-bottom: 0px;
    margin-top: 72px;
    background-color: #e1e5eb;
}
    .brand-category-border h1.content-title {
        color: #0f3675;
        font-family: "Open Sans",sans-serif;
        font-size: 26px;
        font-weight: lighter;
        line-height: 100%;
        margin: 0 0 0px;
        text-align: center;
    }

.brand-category-content{
    overflow: hidden;
    margin: 0 18px 0px;
    padding-top: 98px;
}
.brand-category-content:last-child{
    margin-bottom: 24px;
}
    .brand-category-content ul{
        overflow: hidden;
    }
        .brand-category-content ul li{
            width: 16.6666%;
            height: auto;
            float: left;
        }
            .brand-category-content ul li img{
                width: 100%;
                height: auto;
            }
    .brand-category-list-inner{
        margin: 6px;
    }
    .brand-category-thumbnail{
        position: relative;
        line-height:0;
    }
        .brand-category-thumbnail img{
            vertical-align:text-bottom;
        }
    .brand-category-caption{
        background-color: #FFF;
        opacity: 0.8;
        width: 100%;
        height: 40px;
        padding: 0 0px;
    }
    .brand-category-caption h2{
        font-size: 11px;
        line-height: 120%;
        text-align: center;
        position: relative;
        padding: 0 6px;
        color: #0f3675;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    }

    .brand-category-content-single{
        overflow: hidden;
        margin-bottom: 48px;
    }
        .brand-category-permalink-text{
            width: 50%;
            float: left;
        }
            .brand-category-permalink-text .permalink-text-inner{
                margin: 0 24px;
            }
        .brand-category-permalink-thumbnail{
            width: 50%;
            float: right;
        }
        .brand-category-permalink-thumbnail-inner{
            margin: 0 24px;
            line-height:0;
        }
        .brand-category-permalink-thumbnail img{
            width: 100%;
            height: auto;
            vertical-align:text-bottom;
            margin-top: 12px;
        }
        .brand-category-permalink-thumbnail img:first-child{
            margin-top: 0px;
        }
        .brand-category-permalink-thumbnail img.uwajima{
            margin-top: 18px;
        }
    .permalink-text-inner ul{
        list-style-type: circle;
        list-style-position: outside;
    }
    .permalink-text-inner ul li{
        margin-left: 24px;
        font-size: 14px;
    }
    .insert-contents{
        margin: 12px 0 24px;
    }



/* access
------------------------------------------------------------------------- */
#access{
    overflow: hidden;
    clear: both;
    padding-bottom: 48px;
    background-color: #FFFFFF;
}
.access-inner{
    background-color: #FFF;
    width: 100%;
    overflow: hidden;
}
.access-border{
    width: 100%;
    height: auto;
}

.access-adraccess{
    margin-top: 24px;
    font-size: 14px;
    display: block;
}
.access-adraccess li{
    list-style-type: circle;
    list-style-position: outside;
    margin-left: 24px;
}
.content-map{
    float: right;
    width: 50%;
}
    .content-map iframe{
    }
/* navigation
------------------------------------------------------------------------- */
.nj-footer{
    height: auto;
    position: relative;
    text-align: center;
    clear: both;
    background-color: #e0e1e1;
    color: #222222;
    height: 35px;
    font-family: 'Open Sans', sans-serif;
}
    body.brand-single .nj-footer {
        height: 35px;
    }
.nj-footer .copyright{
    font-size: 11px;
    line-height: 100%;
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
}
.totop{
    text-align: center;
    width: 100%;
    display: none;
    background-color: #F0F0F0;
    border-top: 1px solid #e0e0e0;
    padding: 12px 0;
    font-style: italic;
    font-size: 11px;
    line-height: 100%;
    font-family: 'Open Sans', sans-serif;
}
.totop a{
    width: 100%;
    display: block;
}

    .totop:hover{
        background-color: #e0e0e0;
        opacity: 1.0;
    }

    #brand-single-nav{
        width: 100%;
        display: block;
        line-height: 100%;
        font-size: 11px;
        font-family: 'Open Sans', sans-serif;
        overflow: hidden;
        background-color: #e1e5eb;
    }
    #brand-single-nav ul{
        float: left;
        left: 50%;
        position: relative;
    }
        #brand-single-nav ul li{
            float: left;
            left: -50%;
            margin: 0px 6px 24px;
            position: relative;
        }

        a.category-index:link,
        a.category-index:visited,
        span.category-index a{
            color: #0f3675;
            display: inline-block;
            background-color: #FFF;
            text-align: center;
            padding: 6px 8px;
            border-radius:5px;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
        }
        a.category-index:hover{
            opacity: 1.0;
            background-color: #f7f7f7;
        }

.navigation-visible{
    position: absolute;
    width: 100%;
    bottom:0;
    height: auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    font-size: 20px;
    z-index: 999;
    background-color: #FFF;
    border-bottom: 1px solid #e0e0e0;
}
    body.category .navigation-visible{
        position: fixed;
        width: 100%;
        top:0;
        bottom: auto;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        font-size: 20px;
        z-index: 999;
        background-color: #FFF;
        border-bottom: 1px solid #e0e0e0;
    }
    .navigation-smp{
        display: none;
    }
    .fixed {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
        background-color: #ffffff\9; /* IE8 */
        height: 72px;
        border-bottom: 1px solid #e0e0e0;
    }

    .navigation-visible-category{
        position: fixed;
        top: 0;
        width: 100%;
        height: auto;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        font-size: 20px;
        z-index: 999;
        background-color: #FFF;
        border-bottom: 1px solid #e0e0e0;
    }
.nav-logo{
    width: 180px;
    height: auto;
    position: absolute;
    left:36px;
    top:24px;
}
    .nav-logo img{
        width: 100%;
        height: auto;
    }

    .header-info-subtitle{
        font-size: 13px;
        font-family: 'Esteban', serif;
        font-weight: lighter;
        letter-spacing: 0.1em;
        color: #63ff86;
        display: block;
        line-height: 150%;
        position: absolute;
        left: 36px;
        bottom: 12px;
    }

    #navigation ul,
    .navigation-visible ul,
    .navigation-visible-category ul{
        float: left;
        left: 50%;
        position: relative;
    }
        #navigation ul li,
        .navigation-visible ul li,
        .navigation-visible-category ul li{
            float: left;
            left: -50%;
            margin: 24px 12px;
            position: relative;
        }
    #nj-header ul li a:link,
    #nj-header ul li a:visited{
        color: #565353;
    }
    #nj-header ul li a.active:link,
    #nj-header ul li a.active:visited,
    #nj-header ul li a.active:hover,
    #nj-header ul li a:hover{
        color: #0f3675;
        opacity: 1.0;
    }
a.instagram{
    background: url(./images/icon-instagram.png);
    background-size: 20px 20px;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 100px;
    bottom: 24px;
    opacity: 1.0;
}
a.facebook{
    background: url(./images/icon-facebook.png);
    background-size: 20px 20px;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 68px;
    bottom: 24px;
    opacity: 1.0;
}
a.twitter{
    background: url(./images/icon-twitter.png);
    background-size: 20px 20px;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 36px;
    bottom: 24px;
    opacity: 1.0;
}
    a.instagram span,
    a.facebook span,
    a.twitter span{
        display: none;
    }
    a.instagram:hover,
    a.facebook:hover,
    a.twitter:hover{
        opacity: 0.6;
    }
    .header-info-date{
        font-size: 12px;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        letter-spacing: 0.2em;
        display: block;
        text-align: right;
        line-height: 150%;
    }
    .header-info{
        position: absolute;
        right: 36px;
        top: 12px;
    }
.link-ancher{
    padding-top: 72px;
    height: 0;
    margin-top: -72px;
}
/* navigation
------------------------------------------------------------------------- */

/*===============================================
breakpoint:1020
===============================================*/
@media screen and (max-width: 1020px){
    .navigation-visible{
        position: fixed;
        width: 100%;
        top:0;
        bottom: auto;
        height: 48px;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        font-size: 20px;
        z-index: 999;
        background-color: #FFF;
        border-bottom: 1px solid #e0e0e0;
    }
        .brand-category-border,
        .workshop-category-border{
            margin-top: 48px;
        }
        .workshop-category-inner {
            padding-top: 48px;
        }
    body.category .navigation-visible{
        position: fixed;
        width: 100%;
        top:0;
        bottom: auto;
        height: 48px;
        font-family: 'Open Sans', sans-serif;
        font-weight: lighter;
        font-size: 20px;
        z-index: 999;
        background-color: #FFF;
        border-bottom: 1px solid #e0e0e0;
    }
    .navigation-visible ul{
        display: none;
    }
    .nav-logo {
        height: auto;
        position: relative;
        width: 160px;
        margin: 12px auto;
        top: auto;
        left: auto;
        right: auto;
    }
    .header-info-subtitle {
        bottom: 16px;
        left: 213px;
        position: absolute;
        border-bottom: 2px solid;
    }
    .menu-trigger {
        position: fixed;
        display: block;
        width: 25px;
        height: 18px;
        left: 12px;
        top:15px;
        z-index: 999;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #0f3675;
    }
    body.home .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #0f3675;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 8px;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) rotate(-40deg);
        transform: translateY(8px) rotate(-40deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-8px) rotate(40deg);
        transform: translateY(-8px) rotate(40deg);
    }
        .navigation-smp{
            position: fixed;
            top: 48px;
            text-align: center;
            font-family: "Open Sans",sans-serif;
            font-size: 20px;
            font-weight: lighter;
            width: 100%;
            z-index: 9999;
            opacity: 0.8;
            display: none;
        }
            .navigation-smp ul li a.smp-menu{
                background-color: #FFF;
                width: 100%;
                text-align: center;
                border-bottom: 1px solid #e0e0e0;
                padding: 12px 0;
                display: block;
            }
                .navigation-smp ul li:first-child a.smp-menu{
                    border-top: 1px solid #e0e0e0;
                }
            .navigation-smp ul li.smp-menu-sns{
                background-color: #FFF;
                width: 100%;
                text-align: center;
                border-bottom: 1px solid #e0e0e0;
                display: block;
                height: 49px;
                position:relative;
            }
        a.pconly{
            display: none;
        }
        .smp-menu-sns ul {
            float: left;
            left: 50%;
            position: relative;
        }
            .smp-menu-sns ul li {
                float: left;
                left: -50%;
                margin: 15px 6px 0;
                position: relative;
                width: 20px;
                height: 20px;
            }
                .smp-menu-sns ul li a.facebook,
                .smp-menu-sns ul li a.instagram,
                .smp-menu-sns ul li a.twitter {
                    bottom: auto;
                    position: relative;
                    right: auto;
                }
    .main-visual-info {
        margin-top: 0px;
        position: absolute;
        right: 48px;
        top: auto;
        bottom: 48px;
    }
    .totop {
        background-color: #f0f0f0;
        border-top: 1px solid #e0e0e0;
        display: none;
        font-family: "Open Sans",sans-serif;
        font-size: 11px;
        font-style: italic;
        line-height: 100%;
        padding: 12px 0;
        text-align: center;
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 9999;
        opacity: 0.8;
    }
    .brand-category-content {
        padding-top: 24px;
        margin-top: 24px;
    }
    .brand-category-list-inner a img:hover{
        opacity: 1.0;
    }

    #information{
        padding: 0px 0 48px;
        overflow: hidden;
        margin-top: 0px;
    }
}

/*===============================================
breakpoint:800
===============================================*/
@media screen and (max-width: 800px){
    #outline,
    #about {
        float: none;
        width: 100%;
    }
    #main-visual-inner {
        background-position: center right 15%;
        background-size: cover;
    }
    #about {
        margin-top: 48px;
    }
    #brand-wrapper .content-text {
        float: none;
        height: auto;
        margin: 0 auto 24px;
        width: 100%;
    }
        #brand-wrapper .content-text a.arrow-link{
            display: block;
            margin: 24px 0 0;
            width: 76px;
        }
    .content-text {
        float: none;
        width: 100%;
        margin-bottom: 24px;
    }
        #concierge .content-text {
            float: none;
            width: 100%;
            margin-bottom: 0px;
        }
        .concierge-prof {
            float: none;
            width: 100%;
            margin-top: 24px;
        }
    .content-images {
        float: none;
        width: 100%;
    }
    .content-map {
        float: none;
        width: 100%;
    }
    .brand-category-content ul li {
        float: left;
        height: auto;
        width: 33.3333%;
    }
    .brand-category-permalink-text {
        float: none;
        width: 100%;
    }
    .brand-category-permalink-thumbnail {
        float: none;
        width: 100%;
        margin-top: 36px;
    }
    .brand-nav{
        width: 100%;
        overflow: visible;
        height: auto;
        margin-top: 12px;
    }
        .brand-nav ul{
            font-size: 11px;
            float: none;
            left: auto;
            position: relative;
        }
            .brand-nav ul li{
                float: none;
                left: auto;
                text-align: center;
                margin: 6px 0px 0;
                position: relative;
            }
            .brand-nav ul li:first-child{
                float: none;
                left: auto;
                text-align: center;
                margin: 12px 0px 0;
                position: relative;
            }
    .single-page {
        margin-top: 48px;
        padding-top: 48px;
    }
    .permalink-text-inner h1.content-title {
        font-size: 26px;
        margin: 0 0 36px 0px;
        text-align: center;
    }
    a.brand-link-ws:link,
    a.brand-link-ws:visited,
    a.brand-link-ws:hover {
        width: 100%;
        padding: 6px 0px;
        text-align: center;
    }
}
/*===============================================
breakpoint:600
===============================================*/
@media screen and (max-width: 736px){
    .content-images-list ul li,
    .instagram-placeholder{
        float: left;
        height: auto;
        width: 50%;
    }
    .content-images1-1 ul li {
        width: 100%;
        max-width: 350px;
        margin:0 auto;
        display: block;
    }

    p.cs{
        font-size: 15px;
        text-align: center;
        padding: 0px 0 48px;
        letter-spacing: 0.3ex;
        line-height: 2;
        color: #989898;
    }

    .header-info-subtitle {
        top: 8px;
        left: 20px;
        font-size: 11px;
        border-bottom: 0px;
    }
    .main-visual-info {
        bottom: 12px;
        margin-top: 0;
        position: absolute;
        left: auto;
        right: 48px;
        top: auto;
        font-size: 18px;
        font-family: 'Playfair Display', serif;
    }
    .main-visual-0-info {
        color: #fff;
        font-size: 20px;
        font-weight: lighter;
        letter-spacing: 0.2em;
        margin-top: 0px;
        text-align: left;
        z-index: 9998;
    }
        .main-visual-0-sub-title{
            display: none;
        }
        .main-visual-title {
            left: 24px;
            margin-top: -48px;
            position: absolute;
            top: 30%;
        }
            .main-visual-0 {
                height: auto;
                margin-top: 48px;
                width: 60%;
                z-index: 9998;
            }
    h1.content-title {
        font-size: 20px;
        margin: 0 0 0px 0px;
        text-align: center;
    }
    h2.content-sub-title,
    .content-text .brand h2,
    .content-text .booking h2 {
        text-align: center;
    }
    a.arrow-link:link,
    a.arrow-link:visited,
    a.arrow-link:hover,
    a.brand-link:link,
    a.brand-link:visited,
    a.brand-link:hover,
    #brand-wrapper .content-text a.arrow-link,
    a.permalink:link,
    a.permalink:visited,
    a.permalink:hover {
        display: block;
        width: 100%;
        padding: 6px 0px;
        text-align: center;
    }

    p{
        text-align: left;
    }
    span.ja {
        color: #909090;
        font-size: 13px;
        padding-left: 0px;
        display: block;
        text-align: center;
        width: 100%;
        margin: 12px 0 18px;
    }
    .brand-category-content ul li {
        float: left;
        height: auto;
        width: 50%;
    }
}

/*===============================================
breakpoint:375
===============================================*/
@media screen and (max-width: 375px){
    .content-images-list ul li,
    .instagram-placeholder{
        float: left;
        height: auto;
        width: 50%;
    }

    .content-images1-1 ul li {
        width: 100%;
        max-width: 350px;
        margin:0 auto;
        display: block;
    }
    .header-info-subtitle {
        top: 8px;
        left: 20px;
        font-size: 11px;
        border-bottom: 0px;
    }
    .main-visual-info {
        bottom: 12px;
        margin-top: 0;
        position: absolute;
        left: 30%;
        top: auto;
        font-size: 18px;
        font-family: 'Playfair Display', serif;
    }
    .main-visual-0-info {
        color: #fff;
        font-size: 20px;
        font-weight: lighter;
        letter-spacing: 0.2em;
        margin-top: 0px;
        text-align: left;
        z-index: 9998;
    }
        .main-visual-0-sub-title{
            display: none;
        }
        .main-visual-title {
            left: 24px;
            margin-top: -48px;
            position: absolute;
            top: 50%;
        }
            .main-visual-0 {
                height: auto;
                margin-top: 48px;
                width: 90%;
                z-index: 9998;
            }
    h1.content-title {
        font-size: 20px;
        margin: 0 0 0px 0px;
        text-align: center;
    }
    h2.content-sub-title,
    .content-text .brand h2,
    .content-text .booking h2 {
        text-align: center;
    }
    a.arrow-link:link,
    a.arrow-link:visited,
    a.arrow-link:hover,
    a.brand-link:link,
    a.brand-link:visited,
    a.brand-link:hover,
    #brand-wrapper .content-text a.arrow-link,
    a.permalink:link,
    a.permalink:visited,
    a.permalink:hover {
        display: block;
        width: 100%;
        padding: 6px 0px;
        text-align: center;
    }

    p{
        text-align: left;
    }
    span.ja {
        color: #909090;
        font-size: 13px;
        padding-left: 0px;
        display: block;
        text-align: center;
        width: 100%;
        margin: 12px 0 18px;
    }
    .brand-category-content ul li {
        float: left;
        height: auto;
        width: 50%;
    }

}