@charset "utf-8";
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{
border:0;font-size:100%;font:inherit;vertical-align:bottom;margin:0;padding:0;
}
@font-face {
font-family: 'FontAwesome';
src: url('https://fonts.salon-concierge.net/fontawesome-webfont.eot?v=4.6.3');
src: url('https://fonts.salon-concierge.net/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
url('https://fonts.salon-concierge.net/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),
url('https://fonts.salon-concierge.net/fontawesome-webfont.woff?v=4.6.3') format('woff'),
url('https://fonts.salon-concierge.net/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),
url('https://fonts.salon-concierge.net/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: "ionicons";
src: url("https://fonts.salon-concierge.net/ionicons.eot");
src: url("https://fonts.salon-concierge.net/ionicons.eot?#iefix") format("embedded-opentype"),
url("https://fonts.salon-concierge.net/ionicons.woff") format("woff"),
url("https://fonts.salon-concierge.net/ionicons.ttf") format("truetype"),
url("https://fonts.salon-concierge.net/ionicons.svg#ionicons") format("svg");
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: "LigatureSymbols";
src: url("https://fonts.salon-concierge.net/LigatureSymbols.eot");
src: url("https://fonts.salon-concierge.net/LigatureSymbols.eot?#iefix") format("embedded-opentype"),
url("https://fonts.salon-concierge.net/LigatureSymbols.woff") format("woff"),
url("https://fonts.salon-concierge.net/LigatureSymbols.ttf") format("truetype"),
url("https://fonts.salon-concierge.net/LigatureSymbols.svg#LigatureSymbols") format("svg");
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: "CinzelRegular";
src: url("https://fonts.salon-concierge.net/cinzelregular.eot");
src: url("https://fonts.salon-concierge.net/cinzelregular.eot?#iefix") format("embedded-opentype"),
url("https://fonts.salon-concierge.net/cinzelregular.woff") format("woff"),
url("https://fonts.salon-concierge.net/cinzelregular.ttf") format("truetype"),
url("https://fonts.salon-concierge.net/cinzelregular.svg#cinzelregular") format("svg");
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1.5;
position:relative;
font-size-adjust:13px;
color:#686868;
background:url(/images/body_bg.png) repeat;
min-width:1040px;
overflow-x:hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after{
content:none;
}
table{
border-collapse:collapse;border-spacing:0;
}
body, button, input, label, select, td, textarea{
/*font-family:'lucida grande',tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;font-size:13px;color:#666;*/
font-family:'Lucida Grande', Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;
font-size:12px;
color:#666;
}
a{
color:#0044cc;cursor:pointer;text-decoration:none;
}
.apperror{
font-size:30px; font-weight:bold;
}
#fb-root{
display:none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
a img:hover{
opacity:0.7;
/*transition:all 0.2s ease-out 0s;*/
filter: alpha(opacity=70); /* ie lt 8 */
-ms-filter: "alpha(opacity=70)"; /* ie 8 */
-moz-opacity:0.7; /* FF lt 1.5, Netscape */
-khtml-opacity: 0.7; /* Safari 1.x */
zoom:1;
behavior:url('/js/pie.js');
}
a:hover{
text-decoration:underline;
}
#fixdbt {
position: fixed;
top: -4px;
left: -1px;
z-index: 999999;
}
#fixdbt img{
width: 70%;
height: auto;
opacity:1!important;
}
/*js waypoints*/
.my-sticky-element.stuck {
position:fixed;
}
.shadow{
box-shadow:0 0px 2px #999999; /* CSS3 */
-moz-box-shadow:0 0px 2px #999999; /* Firefox用*/
-webkit-box-shadow:0 0px 2px #999999; /* Google Chrome, Safari用*/
}
.last{
margin-right:0 !important;
/*border-right:none !important;*/
}
.clickable, ul.clickable li{
cursor: pointer;
}
ul.clickable{
cursor:default;
}
/*hover*/
.mosaic-block {
position:relative;
overflow:hidden;
}
.mosaic-overlay {
display:none;
z-index:1;
position:absolute;
width:100%;
height:100%;
background:#111;
}
.bar .mosaic-overlay {
bottom: -239px;
height: 100%;
position: absolute;
background: url(/images/bg_black.png);
left: 0!important;
}
.circle .mosaic-overlay {
background:url(/images/bg_hover.png) no-repeat center center;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
opacity:0;
position:absolute;
text-indent:-9999px;
left:0;
top:0;
}
.circle{
text-align:center;
position:relative;
overflow:hidden;
}
/*path*/
#contents .path {
margin: 6px 0 9px;
font-size: 12px;
color: #a5a5a5;
}
.path .home{
padding-left:20px;
background:url(/images/ico_sprites.png) no-repeat -21px -231px;
overflow: hidden;
}
.path .arrow{
width:7px;
height:9px;
display:inline-block;
text-indent:-9999px;
margin:4px 10px;
background:url(/images/ico_sprites.png) no-repeat -26px -255px;
}
/*side*/
.side{
width: 280px;
}
.side h4,h4.sub_common_h4{
margin-bottom:5px;
}
.side .contents{
background:#fff;
border:1px solid #dfdfdf;
overflow:hidden;
margin-bottom:20px;
}
.side .contents li{
border-top:1px dotted #dfdfdf;
padding:14px;
overflow:hidden;
}
.side li{
list-style-type: none;
}
/*side common*/
.sub_common_text{
font-size:12px;
margin-bottom:20px;
}
/*reserve*/
#reserve_list{
border:1px solid #dfdfdf;
margin-bottom:20px;
overflow:hidden;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
#reserve_list .title{
font-weight:bold;
font-size:15px;
text-shadow:0 2px 0 #fff;
padding:10px 10px 10px 35px;
background:url(/images/ico_contents.png) no-repeat 10px -140px #f4ede3;
border-bottom:1px solid #e9dac5;
}
#reserve_list a{
display:block;
padding:149px 14px 15px;
background:url(/images/bg_reserve.jpg) no-repeat;
}
/*reserve*/
/*login*/
#login_list{
border:2px solid #f4ede3;
background:#fff;
overflow:hidden;
margin-bottom:20px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
#login_list .login{
border:1px solid #e9dac5;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.login_title{
border-bottom:1px solid #e9dac5;
font-weight:bold;
font-size:15px;
padding:10px 10px 10px 35px;
text-shadow:0 2px 0 #fff;
background:url(/images/ico_contents.png) no-repeat 10px -666px #f4ede3;
}
.login dd{
padding:10px;
overflow:hidden;
}
.pass{
font-size:12px;
margin-left:10px;
}
.login_btn{
border-bottom:1px dotted #e9dac5;
}
.side_registration p{
font-size:12px;
margin-bottom:5px;
}
.side_registration a{
text-align:center;
display:block;
border-radius:4px;
}
/*login*/
/*facebook*/
#facebook_list{
}
#facebook_list:before{
content:"";
width:30px;
height:30px;
display:block;
float:left;
margin:8px 4px 8px 0;
background:url(/images/ico_sprites.png) no-repeat 50% -385px;
}
#facebook_list h4.title{
background:url(/images/bg_side_h4.png) repeat-x;
padding:8px 0 12px;
margin-bottom:10px;
font-size:11px;
}
#facebook_list h4 img{
vertical-align:baseline;
margin:7px 8px 0 0;
}
/*twitter*/
#twitter_list:before{
content:"";
width:30px;
height:30px;
display:block;
float:left;
margin:8px 4px 8px 0;
background:url(/images/ico_sprites.png) no-repeat 50% -415px;
}
#twitter_list h4.title{
background:url(/images/bg_side_h4.png) repeat-x;
padding:8px 0 12px;
margin-bottom:10px;
font-size:11px;
}
#twitter_list h4 img{
vertical-align:baseline;
margin:7px 8px 0 0;
}
/*youtube*/
.youtube{
border:1px solid #dfdfdf;
margin-bottom:20px;
overflow:hidden;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.youtube .title{
font-weight:bold;
font-size:15px;
text-shadow:0 2px 0 #fff;
padding:10px 10px 10px 35px;
background:url(/images/ico_contents.png) no-repeat 10px -701px #f4ede3;
border-bottom:1px solid #e9dac5;
}
/*side end*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#container{
width:100%;
margin-top: -36px;
position: relative;
z-index: 9;
/*float: left;*/
background: #fff url(/images/body_bg.png) repeat;
}
#contents{
width:1040px;
margin:0 auto;
overflow:hidden;
padding: 3px 0 0 0;
}
#rightmain{
width:730px;
float:right;
}
#leftmain{
width:730px;
float:left;
}
#special_contents #leftmain{
background: #fff;
padding: 30px;
width: 670px;
margin: 0 2px 50px;
box-shadow: 0 0px 2px #999999;
-moz-box-shadow: 0 0px 2px #999999;
-webkit-box-shadow: 0 0px 2px #999999;
}
#special_contents #leftmain.no_side{
width: 976px;
}
#leftmenu {
width: 280px;
float: right;
margin-bottom: 50px;
}
#rightmenu{
width:280px;
float:left;
margin-bottom: 50px;
}
#facebook_list iframe, #facebook_list .fb-like-box{
width: 280px!important;
overflow:hidden;
margin-bottom:30px;
background: #fff url(/images/loading.gif) no-repeat 120px 225px;
height: 541px;
}
#facebook_list iframe, #facebook_list .fb-like-box iframe{
background:#fff;
}
._4s7c {
height: 520px!important;
overflow: hidden;
}
._43q7 .img {
height: 40px!important;
width:40px!important;
}
#twitter_list{
margin-bottom:30px;
}
.print_off{
display:none;
}
.mdevice #header_sub{
display:block!important;
opacity: 1!important;
}
img.img{
opacity: 0;
}
img.img::outside {
content: ' ';
background: url(/images/bg_img_roading.gif) no-repeat;
display: block;
height: 50px;
width: 50px;
}
.editor{
overflow: hidden;
}
/*.editor img{
margin: 0!important;
}*/
.editor p {
margin: 0 0 1.6em!important;
line-height: 1.7!important;
-ms-word-break: break-all;
-ms-word-wrap: break-all;
word-break: break-word;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-before: 2;
-webkit-hyphenate-after: 3;
hyphenate-lines: 3;
-webkit-hyphens: auto;
-epub-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
color: #555;
font-size: 15.5px;
font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ï¼ï¼³ Ｐゴシック", "MS PGothic", sans-serif;
}
#mokuji_title{
position: relative;
}
#mokuji_title::before{
content: '目次';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
/*テスト*/
.catalog_photo{
float:left;
margin-right:10px;
text-align:center;
border:1px solid #dfdfdf;
width:83px;
height: 120px;
overflow: hidden;
}
.catalog_photo:hover{
opacity:0.7;
transition:all 0.2s ease-out 0s;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
-moz-opacity:0.7;
-khtml-opacity: 0.7;
zoom:1;
}
.side .style{
float:left;
width:155px;
}
.side .style:hover{
background-position:138px -380px;
}
.side .style span{
color:#a5a5a5;
font-size:11px;
display:block;
}
.side .style a{
font-weight:bold;
font-size:13px;
display:block;
/*padding-right:20px;*/
}
.side .style_title{
padding-bottom:7px;
margin-bottom:7px;
border-bottom:1px solid #ebebeb;
/*background:url(/images/ico_sprites.png) no-repeat 140px -226px;*/
}
.side .style dd{
font-size:12px;
color:#a5a5a5;
}
/*ranking*/
.ranking_list li{
border:none !important;
}
.side .ranking{
padding-top:10px;
}
.side .ranking dt{
margin-bottom:10px;
position:relative;
}
.side .ranking dd{
float:left;
}
.side .ranking dt:before{
content:"";
position:absolute;
top:-10px;
left:0;
display:block;
width:50px;
height:50px;
background:url(/images/ico_ranking.png) no-repeat;
}
.side .icon02 dt:before{
background-position:0 -50px;
}
.side .icon03 dt:before{
background-position:0 -100px;
}
.side .ranking .rank{
font-size:10px;
color:#a5a5a5;
padding-left:60px;
}
.side .ranking .style_name{
border-top:1px solid #dfdfdf;
border-bottom:1px solid #dfdfdf;
padding:6px 0 6px 60px;
font-size:12px;
font-weight:bold;
color:#666;
margin-bottom:2px;
color:#0044cc;
display:block;
}
.ranking_photo{
border:1px solid #dfdfdf;
margin-right:10px;
width: 123px;
}
.ranking_photo a{
display: block;
overflow: hidden;
width: 123px;
height: 180px;
}
.ranking_photo a img{
/*border: 4px solid rgb(255, 255, 255);*/
width: 100%;
/*height: 100%;*/
object-fit: cover;
}
.ranking_text{
width:114px;
font-size:11px;
}
.ranking_style{
font-size:11px;
margin-top:10px;
}
#common_side_catalog_ranking h4.recommend {
background-position: 0 -124px;
color: #fff;
text-shadow: none;
width: 280px;
height: 62px;
text-align: center;
line-height: 50px;
font-weight: bold;
font-size: 14px;
}
#common_side_catalog_ranking h4 {
background: url(/images/bg_h4.png) no-repeat;
}
#special_contents #leftmain h2{
font-size: 18px;
line-height: 1.4;
padding: 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-weight: bold;
margin-bottom: 15px;
}
#special_contents #leftmain h3{
font-size: 18px;
line-height: 1.4;
padding: 0 10px;
margin-bottom: 15px;
border-left: 4px solid #666;
font-weight: bold;
}
#special_contents #leftmain strong{
font-weight: bold;
}
#special_contents #leftmain h4{
font-size: 18px;
line-height: 1.4;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
font-weight: bold;
margin-bottom: 10px;
}
#special_contents #leftmain p{
font-size: 15px;
line-height: 1.6;
margin-bottom: 10px;
}
#special_contents #leftmain table{
width: 100%;
}
#special_contents #leftmain th{
border: 1px solid #ddd;
background: #f8f8f8;
padding: 2%;
vertical-align: middle;
}
#special_contents #leftmain td{
border: 1px solid #ddd;
padding: 2%;
}
#special_contents blockquote{
display: block;
padding: 30px 20px 10px;
background: #f8f8f8;
-webkit-border-radius: 4px;
border-radius: 4px;
position: relative;
}
#special_contents blockquote:before{
content: "“";
font-size: 440%;
line-height: 1em;
font-family: "ＭＳ Ｐゴシック",sans-serif;
color: #999;
position: absolute;
left: 10px;
top: 10px;
}
#special_contents blockquote:after{
content: "”";
font-size: 440%;
line-height: 0;
font-family: "ＭＳ Ｐゴシック",sans-serif;
color: #999;
position: absolute;
right: 10px;
bottom: 10px;
}
#special_contents img{
max-width: 100%;
height: auto;
}
#special_contents .copy_area .salocon a span img{
height: 13px;
}
#mokuji_wrap >p{
margin: 0 0 10px 0;
text-align: center;
font-size: 16px;
}
#mokuji_wrap{
border: none;
background: #f8f8f8;
padding: 20px;
position: relative;
z-index: 6666;
margin-bottom: 20px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#mokuji_wrap ul li {
list-style: square;
margin-left: 25px;
line-height: 20px;
}
#mokuji_wrap ul li a{
font-size: 14px;
color: #222 !important;
}
#mokuji_wrap ul li.h2 {
margin-top: 17px;
}
#mokuji_wrap ul li.h2>a{
border: none;
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 17px;
}
#mokuji_wrap ul li.h3 a{
border: none;
font-weight: normal;
}
#mokuji_wrap ul li ul{
padding-left: 10px;
}
.trim {
overflow: hidden;
position: relative!important;
}
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
width: 100%!important;
object-fit: cover;
margin-left:0!important;
}
.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right{
display: none;
}
/*関連記事*/
.editor p.relatedarticletitle,
.editor p.special-reference-title,
.editor p.product-reference-title,
.editor p.catalog-reference-title{
margin-top: 15px!important;
margin-bottom: 3px!important;
}
.relatedarticle,
.special-reference,
.catalog-reference{
width: calc(100% - 2px);
overflow: hidden;
position: relative;
cursor: pointer;
}
.relatedarticle{
border: 1px solid #B0B0B0;
background-color: #f0f0f0;
}
.special-reference{
border: 1px solid #ebdfc5;
background-color: #fffcf6;
}
.catalog-reference{
border: 1px solid #ed4c5b;
background-color: #fef8f8;
}
.relatedarticle:hover{
background-color: #e0e0e0;
}
.special-reference:hover {
background-color: #f3ece1;
}
.catalog-reference:hover {
background-color: #f4e2e4;
}
.relatedarticle .img,
.special-reference .img,
.catalog-reference .img{
overflow: hidden;
width: 110px;/* トリミングしたい枠の幅 */
height: 110px;/* トリミングしたい枠の高さ */
position: relative;
float: left;
margin: 10px!important;
}
.product-reference .img img{
max-width: inherit!important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0!important;
width: 100%;
height: 100%;
object-fit: cover;
}
.relatedarticle .img img,
.special-reference .img img,
.catalog-reference .img img {
width: 100%;
object-fit: cover;
height: 100%;
transition: none;
top: 0;
left: 0;
position: initial;
}
.relatedarticle .title,
.special-reference .title,
.catalog-reference .title{
text-decoration: underline;
margin-top: 5px!important;
margin-bottom: 5px!important;
}
.relatedarticle .title a,
.special-reference .title a,
.catalog-reference .title a{
border: none;
width: 520px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.relatedarticle .title a:hover,
.special-reference .title a:hover,
.catalog-reference .title a:hover,
.product-reference .title a:hover{
border: none;
color: #666;
}
.relatedarticle .comment,
.special-reference .comment,
.catalog-reference .comment{
font-size: 12px;
width: calc(100% - 140px);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-word;
line-height: 1.5;
}
.product-reference{
/*box-shadow: 0px 0px 3px #b2b2b2;*/
overflow: hidden;
cursor: pointer;
}
.product-reference{
border: 5px solid #ddd;
}
.product-reference:hover{
background: #f6f6f6;
}
.product-left {
float: left;
height: 250px;
}
.product-right {
float: left;
width: 378px;
padding: 10px 15px;
}
.product-reference .detail {
display: inline-block;
float: right;
background: #999;
text-align: center;
width: 175px;
font-size: 14px;
margin-bottom: 0!important;
}
.product-reference .detail a {
color: #FFF;
font-weight: bold;
display: block;
padding: 7px 0;
letter-spacing: 1px;
}
.product-gallery{
position: absolute;
padding: 10px;
border-radius: 2px;
background: #CCC;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
margin-top: 10px;
z-index: 100;
}
.product-gallery:after {
content: "";
position: absolute;
bottom: 100%;
left: 30px;
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom: 10px solid #CCC;
}
.product-gallery li {
float: left;
margin-left: 10px;
cursor: pointer;
width:100px;
height: 100px;
}
.product-gallery li:hover {
opacity: 0.9;
}
.product-gallery li:first-child {
margin-left: 0px;
}
.product-gallery li img {
width:100px;
height: 100px;
object-fit: cover;
}
.product-reference .img{
overflow: hidden;
position: relative;
display: inline-block;
margin-bottom: 10px!important;
}
.product-reference .img{
width: 250px;/* トリミングしたい枠の幅 */
height: 250px;/* トリミングしたい枠の高さ */
margin-bottom: 0!important;
}
.product-reference .img img{
min-height: 100%;
min-width: 100%;
}
.product-reference a{
color: #000;
}
.product-reference .title{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
padding: 0 5px;
font-size: 16px;
margin-bottom: 5px;
border: none;
font-weight: bold;
line-height: 23px;
color: #000;
}
.product-reference .comment{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 12px;
padding: 0 5px 5px;
margin-bottom: 0!important;
}
.instagram-media.instagram-media-rendered{
margin: 10px auto!important;
position: relative;
}
.editor p.blog_time{
border: 1px solid #ddd;
padding: 10px;
font-size: 15px;
}
.product-reference .price{
text-align: right;
padding: 0 5px;
color: #993333;
font-weight: bold;
font-size: 16px;
margin-bottom: 5px!important;
}
.product-reference .price a{
color: #993333;
}
.catalog_reference_box{
position: relative;
padding-top: 23px;
margin-top: 10px;
}
.catalog_reference_box .catalog_title{
margin: 0!important;
overflow: hidden;
position: absolute;
z-index: 1;
left: 0;
top: 0;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
color: #fff;
line-height: 1.7!important;
}
.catalog_reference_box .catalog_title span{
background: #ed4c5b;
padding: 0 10px;
border-radius: 4px 4px 0 0;
}
.style-reference{
background: #fffcf8;
border: #eee;
padding: 20px 10px;
margin: 0 auto 30px;
width: 648px;
}
.style-reference .hairstyle_title{
position: relative;
padding: 0!important;
font-size: 11px!important;
border: none!important;
text-align: center;
font-weight: normal!important;
color: #000;
}
body .style-reference .hairstyle_title span{
font-size: 26px;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 3px;
}
.style-reference .hairstyle_title:before,
.style-reference .hairstyle_title:after{
content: '';
position: absolute;
top: 20px;
display: inline-block;
width: 225px;
height: 15px;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
.style-reference .hairstyle_title:before{
left: 0;
}
.style-reference .hairstyle_title:after{
right: 0;
}
.style-reference .hair_title{
border: none!important;
padding: 0!important;
color: #000;
font-weight: bold;
margin-bottom: 15px;
font-size: 18px;
}
.style-reference .hair_title span{
color: #666;
font-size: 14px;
}
.style-reference .kanren_hair_box img{
object-fit: cover;
}
.style-reference .kanren_hair_box{
overflow: hidden;
}
.style-reference .kanren_hair_box .pic_box{
float: left;
width: 230px;
margin-right: 10px;
margin-bottom: 20px;
}
.style-reference .kanren_hair_box .pic_box p{
width: 230px;
height: 305px;
margin-bottom: 0!important;
}
.style-gallery{
position: absolute;
padding: 5px;
border-radius: 2px;
background: #f3ece1;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
margin-top: 10px;
z-index: 100;
}
.style-gallery:after {
content: "";
position: absolute;
bottom: 100%;
left: 0;
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom: 10px solid #f3ece1;
}
.style-gallery li{
float: left;
margin-left: 5px;
cursor: pointer;
width: 70px;
height: 90px;
}
.style-gallery li img{
width: 70px;
height: 90px;
}
.style-gallery li:hover {
opacity: 0.9;
}
.style-gallery li:first-child {
margin-left: 0px;
}
.style-reference .kanren_hair_box .txt_box{
float: left;
width: 408px;
margin-bottom: 20px;
}
.style-reference .kanren_hair_box .txt_box dl{
margin-bottom: 5px;
}
.style-reference .kanren_hair_box .txt_box dt{
font-size: 12px;
color: #a5a5a5;
line-height: 15px;
}
.style-reference .kanren_hair_box .txt_box dd{
border-bottom: 1px solid #eee;
padding-bottom: 5px;
font-size: 12px;
color: #000;
line-height: 16px;
}
.style-reference .kanren_hair_box .txt_box .point dd{
border-bottom: 0;
padding-bottom: 0;
}
.style-reference .kanren_hair_box .txt_box .taste dt,
.style-reference .kanren_hair_box .txt_box .color dt{
padding-top: 0;
}
.style-reference .kanren_hair_box .txt_box .taste,
.style-reference .kanren_hair_box .txt_box .color,
.style-reference .kanren_hair_box .txt_box .type_box{
float: left;
width: 199px;
}
.style-reference .kanren_hair_box .txt_box .taste{
margin-right: 10px;
}
.style-reference .kanren_hair_box .txt_box .type_box{
margin-right: 10px;
}
.style-reference .kanren_hair_box .recommend{
background: #f3ece1;
padding: 1px;
text-align: center;
margin-bottom: 5px!important;
}
.style-reference .kanren_hair_box .recommend span {
border: 1px solid #fff;
display: block;
padding: 3px 0;
font-size: 11px;
color: #000;
}
.style-reference .kanren_hair_box .face {
width: 199px;
height: 22px;
background: url(/images/bg_type.png) no-repeat 0 0;
background-size: cover;
margin-bottom: 10px;
}
.style-reference .kanren_hair_box .type li {
position: relative;
width: 33px;
height: 17px;
float: left;
}
.style-reference .kanren_hair_box .type .wavy li {
width: 55px;
height: 23px;
}
.style-reference .kanren_hair_box .type li.first {
margin-left: 34px;
}
.style-reference .kanren_hair_box .type li p {
position: absolute;
text-align: center;
display: block;
width: 28px;
margin: 0!important;
line-height: 0!important;
}
.style-reference .kanren_hair_box .type .face li p{
width: 32px;
}
.style-reference .kanren_hair_box .type .face li p img{
width: 17px;
height: 17px!important;
object-fit: contain;
}
.style-reference .kanren_hair_box .type .wavy li p{
width: 52px;
}
/*.style-reference .kanren_hair_box .type li p img{
width: 10px;
}*/
.style-reference .kanren_hair_box .quality {
width: 199px;
height: 22px;
background: url(/images/bg_type.png) no-repeat 0 -23px;
background-size: cover;
position: relative;
margin-bottom: 10px;
}
.style-reference .kanren_hair_box .volume {
width: 199px;
height: 22px;
background: url(/images/bg_type.png) no-repeat 0 -46px;
background-size: cover;
margin-bottom: 10px;
}
.style-reference .kanren_hair_box .wavy {
width: 199px;
height: 25px;
background: url(/images/bg_type.png) no-repeat 0 -68px;
background-size: cover;
}
.style-reference .kanren_hair_box .txt_box .staff{
float: left;
margin: 0;
padding: 15px 0 0 0;
width: 199px;
position: relative;
}
.style-reference .kanren_hair_box .txt_box .staff_box{
padding: 10px;
background: #fff;
border: 1px solid #f3ece1;
overflow: hidden;
margin-bottom: 5px;
}
.style-reference .kanren_hair_box .txt_box .staff .charge{
font-size: 10px!important;
text-align: center;
padding: 2px 10px;
margin: 0!important;
border: 1px solid #f3ece1;
background: #fff;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.style-reference .kanren_hair_box .txt_box .staff .pic{
float: left;
width: 65px;
height: 65px;
border-radius: 50%;
margin: 0 5px 0 0!important;
}
.style-reference .kanren_hair_box .txt_box .staff ul{
float: left;
width: 107px;
margin-bottom: 0;
}
.style-reference .kanren_hair_box .txt_box .staff ul li{
font-size: 10px;
line-height: 15px;
}
.style-reference .kanren_hair_box .txt_box .staff ul li.english{
font-size: 9px;
color: #a5a5a5;
}
.style-reference .kanren_hair_box .txt_box .staff ul li.botton{
text-align: center;
background: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 8px;
}
.style-reference .kanren_hair_box .txt_box .staff ul li.botton a{
display: block;
color: #000;
padding: 2px 0;
font-size: 10px;
}
.style-reference .kanren_hair_box .txt_box .staff .hair{
margin-bottom: 0!important;
text-align: center;
}
.style-reference .kanren_hair_box .txt_box .staff .hair a{
display: block;
font-size: 12px;
padding: 10px 0;
color: #000;
letter-spacing: .5px;
background: #fff;
border: 1px solid #000;
border-radius: 4px;
-moz-box-shadow: 0 2px 5px 0px rgba(102, 102, 102, 0.41);
-webkit-box-shadow: 0 2px 5px 0px rgba(102, 102, 102, 0.41);
-ms-box-shadow: 0 2px 5px 0px rgba(102, 102, 102, 0.41);
box-shadow: 0 2px 5px 0px rgba(102, 102, 102, 0.41);
margin: 5px 0;
}
.style-reference .kanren_hair_box .reserve_botton{
clear: both;
}
.style-reference .kanren_hair_box .botton{
clear: both;
overflow: hidden;
}
.style-reference .kanren_hair_box .reserve_botton .hair{
display: none;
}
.style-reference .kanren_hair_box .reserve_botton p{
float: left;
margin-bottom: 0!important;
margin-top: 20px;
}
.style-reference .kanren_hair_box .reserve_botton p a{
color: #fff;
display: block;
width: 309px;
text-align: center;
background: #FF5755;
border-radius: 4px;
font-size: 14px;
padding: 10px 0;
letter-spacing: .5px;
border-bottom: solid 4px #cf5553;
}
.style-reference .kanren_hair_box .txt_box .staff .hair a:active,
.style-reference .kanren_hair_box .reserve_botton p a:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
.style-reference .kanren_hair_box .reserve_botton p.tel{
margin-right: 30px!important;
}
#mainslider li {
z-index: 0 !important;
}
#mainvisual .bx-controls {
z-index: 0 !important;
}
.reservebtn a {
display: inline-block;
padding: 15px 40px;
text-decoration: none;
color: #FFF;
font-weight: bold;
border-radius: 4px;
position: relative;
}
.reservebtn a:after{
content: "\f3d3";
font-family: "ionicons";
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
height: 26px;
}
.reservebtn a:hover {
text-decoration: underline;
transition: .3s ease-in-out;
opacity: 0.8;
}
#recommendblog .photo div img,
#recommendblog .auther_photo img{
width: 100%;
height: 100%;
object-fit: cover;
}
.slider{
position: relative;
max-width: 588px;
margin: 0 auto;
}
.slider .slider-nav-wrap{
position: relative;
}
.slider-nav-single {
display: none;
}
.slider-nav {
padding: 10px 0;
}
.slider-nav:after {
content: ' ';
display: block;
clear: both;
}
.slick-list.draggable{
padding: 0 116px !important;
}
.slider-nav-node {
float: left;
text-align: center;
display: inline-block;
border: 1px solid #AAA;
border-radius: 20px;
padding: 0 5px;
margin-left: 10px;
cursor: pointer;
}
.slider-nav-node:focus {
outline: 0;
}
.slider-nav-node:hover {
background: #E7E6DF;
}
.slider-nav-node.slick-current {
background: #E7E6DF;
}
.slider-for-single .slider-for-node {
width: 500px !important;
border: 1px solid #AAA;
border-radius: 4px;
padding: 15px 15px 75px 15px;
margin-left: 0px;
}
.slider-for-single .slick-list.draggable{
padding: 0 !important;
}
.slider-for-node {
width: 280px;
border: 1px solid #AAA;
border-radius: 3px;
padding: 15px 15px 75px 15px;
margin: 0 8px;
position: relative;
}
.slider-for-node:hover {
/*background: #E7E6DF;*/
}
.slider-for-node:focus {
outline: 0;
}
.slider-for-node .slick-img {
box-shadow: none;
border-radius: 0;
width: 100%;
height: 200px;
backface-visibility: hidden;
display: inline-block;
}
.slider-for-node .slick-name {
text-align: left;
font-size: 14px;
color: #000;
line-height: 1.4;
margin-bottom: 10px;
font-weight: bold;
}
.slider-for-node .slick-text {
margin-top: 10px;
font-size: 14px;
font-weight: bold;
color: #000;
line-height: 1.5;
}
.slider-for-node .slick-reserve {
padding-top: 10px;
position: absolute;
bottom: 15px;
width: 91%;
}
.slider-for-node .slick-reserve a {
display: block;
padding: 18px 0;
text-decoration: none;
text-align: center;
color: #FFF;
border-radius: 4px;
position: relative;
background: #ea91bb;
line-height: 1;
}
.slider-for-node .slick-reserve a:after{
content: "\f3d3";
font-family: "ionicons";
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
height: 16px;
}
.slider-for-node .slick-reserve a:hover {
text-decoration: underline;
transition: .3s ease-in-out;
opacity: 0.8;
}
.slider-for-node .slick-tel{
font-size: 14px;
color: #000;
line-height: 1.2;
}
.slick-holiday{
color: #717171;
border: 1px solid #ccc;
padding: 0 5px;
margin-bottom: 5px;
margin-top: 10px;
display: inline-block;
font-size: 10px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.slick-jobtime{
color: #717171;
font-size: 10px;
}
.next.slick-arrow{
content: "";
position: absolute;
top: 0;
right: -40px;
height: 120px;
bottom: 0;
margin: auto;
}
.prev.slick-arrow{
content: "";
position: absolute;
top: 0;
left: -40px;
height: 120px;
bottom: 0;
margin: auto;
}
.prev.slick-arrow span,
.next.slick-arrow span{
display: none;
}
.prev.slick-arrow:before{
content: "\f3d3";
font-family: "ionicons";
display: block;
text-align: left;
font-size: 60px;
cursor: pointer;
transform: scale(-1, 1);
}
.next.slick-arrow:before{
content: "\f3d3";
font-family: "ionicons";
display: block;
text-align: right;
font-size: 60px;
cursor: pointer;
}
.slider-for-single .slick-list .slick-track .slick-slide{
float: none;
margin: auto;
}