@charset "utf-8"; /* =========================================================================================== 共通設定 =========================================================================================== */ /*== システムページの見出し =======================*/ .h3Lay { font-weight: bold; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid @colorMain; } /*== 記事間の余白 =======================*/ .itemMB { margin-bottom: 40px; &:last-child { margin-bottom: 0; } } /*== 画像中央寄せ =======================*/ .imgCenter { position: relative; display: block; img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } } /*== 省略 =======================*/ .textOmit { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hoverTitle { h3 { display: none; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0 5px; color: #FFF; opacity: 0; background: rgba(0, 0, 0,0.7); -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } &:hover { h3 { opacity: 1; } } } .thumImg ul { .clearfix; li { float: left; a { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover !important; display: block; height: 100%; overflow: hidden; width: 100%; img { display: none; } } } } .editorHeadingStyle{ h1{ font-size: 130%; font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid @colorMain; border-top: 1px solid @colorMain; } h2{ font-size: 120%; font-weight: bold; border-bottom: 1px solid @colorMain; margin-bottom: 10px; } h3{ margin-bottom: 5px; font-weight: bold; border-bottom: 2px dotted @colorMain; } h4{ margin-bottom: 5px; font-size: 100%; font-weight: bold; border-bottom: 1px solid @colorBorder; } h5{ margin-bottom: 5px; font-size: 100%; font-weight: bold; color: @colorMain } h6{ margin-bottom: 5px; font-weight: bold; color: @colorSub; } } /* =========================================================================================== お知らせ・ブログ =========================================================================================== */ /*== アーカイブ =======================*/ .blogLay01 { .blogContent { .itemMB; h3.ttl { .h3Lay; .date { font-size: 90%; display: block; font-weight: normal; } } } } .blogLay02 { dl { padding: 10px 0; border-bottom: 1px dotted @colorBorder; width: 100%; display: flex; align-items: center; dd{ order:1; } dt{ order:2; } dt a { .arrowLay; } dd { min-width: 120px; } } } .blogLay03, .blogLay04 { display: flex; flex-wrap: wrap; .blogContent { width: 32%; margin-right: 2%; margin-bottom: 15px; text-align: center; .imageArea a { height: 220px; border: solid 1px @colorBorder; .imgCenter; } &:nth-of-type(3n) { margin-right: 0; } } } .blogLay04 { .imageArea { margin-bottom: 5px; } .ttl { font-weight: bold; .textOmit; } .date { font-size: 90%; line-height: 1; } } .blogLay05 { .blogContent { .clearfix; .itemMB; .imageArea { float: left; width: 180px; height: 180px; border: 1px solid @colorBorder; .imgCenter; } .textArea { float: right; width: calc(~"100% - 200px"); h3 { .h3Lay; .textOmit; .date { font-size: 90%; display: block; font-weight: normal; } } } } } /*== シングル =======================*/ .postSingleLay { h3.ttl { .h3Lay; .date { font-size: 90%; display: block; font-weight: normal; } } .postCatArea { margin-top: 30px; background: @colorLightBG; padding: 3px 5px; text-align: right; } } /*== ブログ記事内スタイル =======================*/ .blogArea .commentArea{ .editorHeadingStyle; } .blogArea .commentArea em { color: inherit; font-style: italic; } .blogArea .commentArea blockquote { background-color: @colorLightBG; padding: 15px 40px; margin: 15px 0; position: relative; display: block; overflow: hidden; } .blogArea .commentArea blockquote:before { content: "“"; font-size: 600%; line-height: 1em; position: absolute; left: 5px; top: 5px; } .blogArea .commentArea blockquote:after { content: "”"; font-size: 600%; line-height: 0; position: absolute; right: 5px; bottom: 0; } .alignleft { float: left; margin: 0 15px 15px 0; } .aligncenter { float: none; display: block; margin: 0 auto 15px; clear: both; } .alignright { float: right; margin: 0 0 15px 15px; } /* =========================================================================================== ギャラリー =========================================================================================== */ /*== アーカイブ =======================*/ // カテゴリ一覧 部分 .galleryTerms { margin-top: 20px; margin-bottom: 20px; ul { display: flex; flex-wrap: wrap; li { width: calc(~"25% - 2px"); margin: 1px; background: @colorMain; text-align: center; a { height: 100%; padding: 5px; color: #FFF; display: flex; /* 2 */ justify-content: center; /* 3 */ align-items: center; /* 4 */ } } } } .galleryLay01 { h3 { .h3Lay; } .entry { margin-bottom: 40px; } .galleryContent { .clearfix; .itemMB; position: relative; .galleryImgArea { float: left; width: 220px; height: 220px; border: 1px solid @colorBorder; .imgCenter; } .galleryInfo { float: right; width: calc(~"100% - 240px"); .galleryMore { position: absolute; right: 0; bottom: 0; display: inline-block; background: @colorSub; color: #FFF; padding: 5px 20px; } } } } .galleryLay02 { overflow: hidden; .galleryContent { text-align: center; float: left; width: 340px; margin: 0 20px 20px 0; a { width: 340px; height: 340px; border: solid 1px @colorBorder; .imgCenter; .hoverTitle; } &:nth-of-type(2n) { margin-right: 0; } } } .galleryLay03 { overflow: hidden; .galleryContent { text-align: center; float: left; width: 220px; margin: 0 20px 20px 0; a { margin-bottom: 5px; width: 220px; height: 220px; border: solid 1px @colorBorder; .imgCenter; } &:nth-of-type(3n) { margin-right: 0; } } h3 { font-weight: bold; .textOmit; } } .galleryLay04 { overflow: hidden; .galleryContent { text-align: center; float: left; width: 220px; margin: 0 20px 20px 0; a { width: 220px; height: 220px; border: solid 1px @colorBorder; .imgCenter; .hoverTitle; } &:nth-of-type(3n) { margin-right: 0; } } } //シングルレイアウト .gallerySingleLay01 { h3 { .h3Lay; } .galleryContent { .clearfix; .galleryImgArea { float: left; width: 300px; .mainImg { height: 300px; .imgCenter; .imgCom { background: rgba(80, 80, 80, 0.75); position: absolute; bottom: 0; left: 0; right: 0; color: #FFF; padding: 5px; z-index: 1000; &:empty { display: none; } } } .thumImg { ul { li { width: 93px; height: 93px; margin: 10px 10px 0 0; &:nth-child(3n) { margin: 10px 0 0; } } } } } .galleryInfo { float: right; width: calc(~"100% - 320px"); .galleryCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } } } .gallerySingleLay02 { h3 { .h3Lay; } .galleryImgArea { margin-bottom: 20px; .mainImg { height: 400px; .imgCenter; .imgCom { background: rgba(80, 80, 80, 0.75); position: absolute; bottom: 0; left: 0; right: 0; color: #FFF; padding: 5px; z-index: 1000; &:empty { display: none; } } } .thumImg { ul { li { width: 15%; height: 93px; margin: 10px 2% 0 0; &:nth-child(6n) { margin: 10px 0 0; } } } } } .galleryCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } .gallerySingleLay03 { //スライダー h3 { .h3Lay; } .galleryImgArea { ul { li { height: 400px; img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 100%; } } } .bx-wrapper { margin-bottom: 40px; a, a:active, a:link, a:visited { -webkit-transition: none; transition: none; } .bx-pager.bx-default-pager a { background: @colorMain !important; } .bx-pager.bx-default-pager a.active { background: darken(@colorMain, 20%) !important; } } } .galleryCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } .gallerySingleLay04 { //ビフォー・アフター h3 { .h3Lay; } .galleryImgArea { .baContent { margin: 0 0 30px; padding: 0 0 30px; .clearfix; &:last-of-type { margin: 0; } .afterArea, .beforeArea { width: 46%; .clearfix; .imgBlock { width: 100%; height: 300px; border: 1px solid @colorBorder; .imgCenter; &:only-child { width: 100%; } } .textBlock { background: rgba(80, 80, 80, 0.75); color: #FFF; padding: 5px; font-size: 90%; } } .beforeArea { float: left; &:only-child { margin: 0; padding: 0; } } .afterArea { float: right; position: relative; &:after, &:before { position: absolute; content: ""; display: block; width: 0; height: 0; border-style: solid; top: 50%; margin-top: -20px; border-width: 20px 0 20px 15px; } &:before { left: -37px; border-color: transparent transparent transparent #fff; z-index: 2; } &:after { left: -35px; border-color: transparent transparent transparent @colorMain; z-index: 1; } } } } .galleryCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } /* =========================================================================================== ヘアカタ =========================================================================================== */ /*== アーカイブ =======================*/ .hairLay01 { h3 { .h3Lay; } .hairContent { .clearfix; .itemMB; position: relative; .ImgArea { float: left; width: 220px; height: 220px; border: 1px solid @colorBorder; .imgCenter; } .hairInfo { float: right; width: calc(~"100% - 240px"); .hairMore { position: absolute; right: 0; bottom: 0; display: inline-block; background: @colorSub; color: #FFF; padding: 5px 20px; } .attributeCat { margin-bottom: 5px; &::before { font-family: Flaticon; content: "\e058"; color: @colorMain; } } } } } .hairLay02 { overflow: hidden; .hairContent { text-align: center; float: left; width: 340px; margin: 0 20px 20px 0; a.link { margin-bottom: 5px; width: 340px; height: 340px; border: solid 1px @colorBorder; .imgCenter; } &:nth-of-type(2n) { margin-right: 0; } } h3 { font-weight: bold; .textOmit; } .attributeCat { margin-bottom: 5px; .textOmit; &::before { font-family: Flaticon; content: "\e058"; color: @colorMain; } } } .hairLay03 { overflow: hidden; .hairContent { text-align: center; float: left; width: 220px; margin: 0 20px 20px 0; a.link { margin-bottom: 5px; width: 220px; height: 220px; border: solid 1px @colorBorder; .imgCenter; } &:nth-of-type(3n) { margin-right: 0; } } h3 { font-weight: bold; .textOmit; } .attributeCat { margin-bottom: 5px; .textOmit; &::before { font-family: Flaticon; content: "\e058"; color: @colorMain; } } } /*== シングル =======================*/ .hairSingleLay { h3 { .h3Lay; } .haircom { margin-bottom: 20px; } .hairContent { .clearfix; margin-bottom: 40px; .ImgArea { float: left; width: 300px; .mainImg { height: 300px; .imgCenter; .imgCom { background: rgba(80, 80, 80, 0.75); position: absolute; bottom: 0; left: 0; right: 0; color: #FFF; padding: 5px; z-index: 1000; } } .thumImg { ul { li { width: 93px; height: 93px; margin: 10px 10px 0 0; &:nth-child(3n) { margin: 10px 0 0; } } } } } .hairInfo { float: right; width: calc(~"100% - 320px"); .galleryCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; dd { .tagColumn3, .tagColumn4 { display: table; font-size: 100%; overflow: hidden; width: 100%; li { background: #EEE; border-right: 1px solid #fff; color: #fff; display: table-cell; font-size: 90%; letter-spacing: 1px; line-height: 150%; padding: 3px 0 2px; text-align: center; vertical-align: middle; &.onMark { background: @colorSub; } } } .tagColumn3 li { width: 33.3%; } .tagColumn4 { &:first-of-type { margin: 0 0 1px; } li { width: 25%; img { display: block; margin: 0 auto 3px; width: 30px; } &:empty { background: none; } } } } } } } h4 { background: @colorMain; padding: 5px 10px; color: #FFF; margin-bottom: 10px; } .equalityArea { overflow: hidden; .equalityBlock { text-align: center; float: left; width: 220px; margin: 0 20px 20px 0; a { margin-bottom: 5px; width: 220px; height: 220px; border: solid 1px @colorBorder; .imgCenter; } &:nth-of-type(3n) { margin-right: 0; } } .ttl { font-weight: bold; .textOmit; } } } /* =========================================================================================== スタッフ =========================================================================================== */ /*== アーカイブ =======================*/ .staffLay01 { margin-bottom: 40px; h3 { .h3Lay; } .staffContent { .clearfix; .itemMB; position: relative; .staffImgArea { float: left; width: 220px; height: 220px; border: 1px solid @colorBorder; .imgCenter; } .staffInfo { float: right; width: calc(~"100% - 240px"); .staffMore { position: absolute; right: 0; bottom: 0; display: inline-block; background: @colorSub; color: #FFF; padding: 5px 20px; } } } } .staffLay02 { overflow: hidden; margin-bottom: 20px; .staffContent { text-align: center; float: left; width: 340px; margin: 0 20px 20px 0; a { width: 340px; height: 340px; border: solid 1px @colorBorder; .imgCenter; margin-bottom: 5px; } &:nth-of-type(2n) { margin-right: 0; } h3 { font-weight: bold; } .yomi { font-size: 90%; line-height: 1.2; } } hr { display: block; clear: both; border: none; } } .staffLay03 { overflow: hidden; margin-bottom: 20px; .staffContent { text-align: center; float: left; width: 220px; margin: 0 20px 20px 0; a { width: 220px; height: 220px; border: solid 1px @colorBorder; .imgCenter; margin-bottom: 5px; } &:nth-of-type(3n) { margin-right: 0; } h3 { font-weight: bold; } .yomi { font-size: 90%; line-height: 1.2; } } hr { display: block; clear: both; border: none; } } /*== シングル =======================*/ .staffLaySingle { h3 { .h3Lay; } .staffCom { margin-bottom: 20px; } .staffContent { .clearfix; .staffImgArea { float: left; width: 300px; .mainImg { height: 300px; .imgCenter; } } .staffInfo { float: right; width: calc(~"100% - 320px"); .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } } } /* =========================================================================================== 店舗 =========================================================================================== */ /*== アーカイブ =======================*/ .shopLay01 { margin-bottom: 40px; h3 { .h3Lay; } .entry{ .itemMB; } .shopContent { .clearfix; .itemMB; position: relative; .shopImgArea { float: left; width: 220px; height: 220px; border: 1px solid @colorBorder; .imgCenter; } .shopInfo { float: right; width: calc(~"100% - 240px"); .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } .shopMore { margin-top: 20px; text-align: right; a { display: inline-block; background: @colorSub; color: #FFF; padding: 5px 20px; } } } } } .shopLay02 { display: flex; flex-wrap: wrap; .entry { width: 48%; margin-right: 4%; margin-bottom: 4%; &:nth-of-type(2n) { margin-right: 0; } h3 { .h3Lay; } .shopContent { position: relative; .shopImgArea { border: 1px solid @colorBorder; height: 220px; .imgCenter; } .shopInfo { .comDl { .comDlLay; border-bottom: 1px solid @colorBorder; } .shopMore { margin-top: 20px; text-align: center; a { display: inline-block; background: @colorSub; color: #FFF; padding: 5px 20px; } } } } } } /*== シングル =======================*/ .shopLaySingle01 { h3 { .h3Lay; } .shopCom { margin-bottom: 20px; } .shopContent { .clearfix; .shopImgArea { float: left; width: 300px; .mainImg { height: 300px; .imgCenter; .imgCom { background: rgba(80, 80, 80, 0.75); position: absolute; bottom: 0; left: 0; right: 0; color: #FFF; padding: 5px; z-index: 1000; } } .thumImg { ul { li { width: 93px; height: 93px; margin: 10px 10px 0 0; &:nth-child(3n) { margin: 10px 0 0; } } } } } .shopInfo { float: right; width: calc(~"100% - 320px"); .shopCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } } .gmap { margin-top: 20px; .mapLink { text-align: right; font-size: 90%; } } } .shopLaySingle02 { h3 { .h3Lay; } .shopCom { margin-bottom: 20px; } .shopContent { .clearfix; .shopInfo { margin-bottom: 10px; .shopCom { margin-bottom: 20px; } .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } .shopImgArea { ul { display: flex; flex-wrap: wrap; li { width: 49%; margin-right: 2%; margin-bottom: 14px; border: 1px solid @colorBorder; a { .imgCenter; height: 300px; } &:nth-child(2n) { margin-right: 0; } } } } } .gmap { .mapLink { text-align: right; font-size: 90%; } } } .shopLaySingle03 { h3 { .h3Lay; } .shopCom { margin-bottom: 20px; } .shopContent { margin-bottom: 10px; .clearfix; .gmap { float: left; width: 300px; .mapLink { text-align: right; font-size: 90%; } } .shopInfo { float: right; width: calc(~"100% - 320px"); .comDl { &:nth-of-type(1) { border-top: 1px solid @colorBorder; } .comDlLay; border-bottom: 1px solid @colorBorder; } } } .shopImgArea { ul { display: flex; flex-wrap: wrap; li { width: 49%; margin-right: 2%; margin-bottom: 14px; border: 1px solid @colorBorder; a { .imgCenter; height: 300px; } &:nth-child(2n) { margin-right: 0; } } } } } /* =========================================================================================== Review 設定 =========================================================================================== */ #review_post { margin: 60px 0 40px; h2 { .h2LaySets; margin: 0 0 20px; } p.updated { display: none; margin: 0 0 20px; } dl { .comDlLay; dd { input.title { padding: 10px; width: 50%; } textarea.text { width: 100%; padding: 10px; } } } .submit { margin: 30px auto 0; text-align: center; .submitbtn { width: 150px; padding: 7px; cursor: pointer; color: #fff; text-align: center; display: block; margin: 0 auto; font-size: 100%; background: @colorSub; border: none !important; &:focus, &:hover { background: lighten(@colorSub, 5%); } &:active { background: darken(@colorSub, 5%); } } } } .reviewArea .blogContent { margin-bottom: 40px; } /* =========================================================================================== サイトマップ =========================================================================================== */ .sitemapArea { ul { li{ padding: 10px 0; border-bottom: 1px dotted @colorBorder; a{ .arrowLay; } } } }