@charset "utf-8"; /*------------------------------------- SITE : //www.jeansfactory.jp/ CREATE : 2015.12.28 MODIFIED : 2020.12.16 UPDATED BY : OGASAWARA MEMO : 2018.08.06__ver2.0.0 MEMO : 2019.07.10__ver2.1.1 MEMO : 2019.08.20__ver2.1.2 MEMO : 2019.09.04__ver2.1.3 MEMO : 2019.09.18__ver2.2.0 MEMO : 2020.12.16__ver3.0.0 ブレイクポイントの追加。CC対応(スタッフスタートによる動的出力への移行)。 MEMO : 2024.08.01__ver4.0.0 Benentへのリプレイスに伴う機能追加。デザイン調整 -------------------------------------*/ @import url(https://fonts.googleapis.com/css?family=Unica+One); /* ================================== 共通 ================================== */ /* 結果なしメッセージ */ .noResultMessage{display: -webkit-flex;display: flex; -webkit-justify-content: center; justify-content: center;} .noResultMessage .noResultMessage__title{font-size:18px} @media screen and (max-width:834px){ .noResultMessage{margin:0 30px;} } @media screen and (max-width:640px){ .noResultMessage{margin:0 20px;} .noResultMessage .noResultMessage__title{font-size:14px} } /* pagerWrapper_ver02 -------------------------------------*/ .pagerWrapper_ver02{margin: 80px auto 0;max-width: 1024px;position: relative;} .pagerWrapper_ver02::after {content: "";clear: both;display: block;} .pagerWrapper_ver02 .pagenation {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;width: 450px;text-align: center;overflow: hidden;position: relative;transition: .5s ease-in-out;color: #242424;float: right;background: #fff;border: 1px solid #666;border-radius: 6px;} .pagerWrapper_ver02 .pagenation-next, .pagerWrapper_ver02 .pagenation-prev {display: block; min-height: 56px;-webkit-flex-basis: 112px;-ms-flex-preferred-size: 112px;flex-basis: 112px;font-size: 14px;font-weight: 700;} .pagerWrapper_ver02 .pagenation-prev {border-right: 1px solid #666;} .pagerWrapper_ver02 .pagenation-next {border-left: 1px solid #666;} .pagerWrapper_ver02 .pagenation-next>a, .pagerWrapper_ver02 .pagenation-prev>a {display: block;color: inherit;padding: 0; line-height: 56px;text-decoration: none;position: relative;transition: .3s ease-in-out;} .pagerWrapper_ver02 .pagenation-next>a:hover{color:#fff} .pagerWrapper_ver02 .pagenation-prev>a:hover{color:#fff} .pagerWrapper_ver02 .pagenation-select {position: relative;display: block;width: 100%;-webkit-box-flex: 1;-webkit-flex: 1; -ms-flex: 1;flex: 1;cursor: pointer;transition: .3s ease-in-out;} .pagerWrapper_ver02 .pagenation-select-label {position: absolute;font-size: 20px;font-weight: 700;text-align: center;width: 100%;padding: 0;line-height: 56px;font-family: 'Unica One', cursive;} .pagerWrapper_ver02 .pagenation-select-label span{margin: 0 4px;} .pagerWrapper_ver02 .pagenation-select-arrow {position: absolute;top: 50%;right: 28px;margin-top: -5px;} .pagerWrapper_ver02 .pagenation-select-arrow::after {right: 50%;position: absolute;top: 50%;border-top: 1px solid #242424;border-right: 1px solid #242424;content: "";-webkit-transform: translate(50%,-50%) rotate(135deg);transform: translate(50%,-50%) rotate(135deg);width: 10px;height: 10px;transition: .3s ease-in-out;} .pagerWrapper_ver02 .pagenation-select:hover{color:#fff} .pagerWrapper_ver02 .pagenation-select:hover .pagenation-select-arrow::after {border-top: 1px solid #fff;border-right: 1px solid #fff;margin-top:3px} .pagerWrapper_ver02 .pagenation-select-list {-webkit-appearance: none;-moz-appearance: none;appearance: none;display: block;width: 100%; height: 100%;border: none;opacity: 0;position: relative;z-index: 2;cursor: pointer;color: #242424;} .pagenation-hover {vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);position: relative; overflow: hidden;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;} .pagenation-hover:before {content: "";position: absolute;top: 50%;left: 50%;margin: -5px auto auto -5px;z-index: -1;background-image: -webkit-linear-gradient(left, #202020 0%, #202020 100%);background-image: linear-gradient(to right, #202020 0%, #202020 100%);-webkit-transform: scale(0);transform: scale(0);transition: -webkit-transform .5s;transition: transform .5s;width: 10px;height: 10px;border-radius: 5px;} .pagenation-hover:hover:before{-webkit-transform:scale(30);transform:scale(30)} @media screen and (max-width:834px){ .pagerWrapper_ver02{margin: 50px 30px 0;width: -webkit-calc(100% - 60px);width: calc(100% - 60px);} .pagerWrapper_ver02 .pagenation {width: 100%;} .pagerWrapper_ver02 .pagenation-next, .pagerWrapper_ver02 .pagenation-prev {-webkit-flex-basis: 150px;-ms-flex-preferred-size: 150px;flex-basis: 150px;} .pagerWrapper_ver02 .pagenation-select-label {font-size: 18px;} .pagerWrapper_ver02 .pagenation-select-arrow {right: 30px;margin-top: -3px;} .pagerWrapper_ver02 .pagenation-select:hover .pagenation-select-arrow::after {margin-top:2px} .pagenation-hover:hover:before{-webkit-transform:scale(50);transform:scale(50)} } @media screen and (max-width:640px){ .pagerWrapper_ver02{margin: 50px 20px 0;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .pagerWrapper_ver02 .pagenation-next, .pagerWrapper_ver02 .pagenation-prev {min-height: 49px;-webkit-flex-basis: 80px;-ms-flex-preferred-size: 80px;flex-basis: 80px;font-size: 13px;} .pagerWrapper_ver02 .pagenation-next>a, .pagerWrapper_ver02 .pagenation-prev>a {line-height: 49px;} .pagerWrapper_ver02 .pagenation-select-label {font-size: 17px;line-height: 49px;} .pagerWrapper_ver02 .pagenation-select-arrow {right: 20px;} .pagerWrapper_ver02 .pagenation-select-arrow::after {width: 8px;height: 8px;} .pagenation-hover:hover:before{-webkit-transform:scale(30);transform:scale(30)} } /* 並び替え -------------------------------------*/ .jf-bn-list__controller{display: -webkit-flex;display: flex;} .jf-bn-sortItems {position: relative;z-index: 2;display: block;margin: 0 0 0 auto;width: 80px;} .jf-bn-sortItems .jf-bn-sortItems__label {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;position: relative;text-align: center;cursor: pointer;-webkit-justify-content: center;justify-content: center;} .jf-bn-sortItems .jf-bn-sortItems__label:before {content: '';display: inline-block;margin: 0 6px 0 0;width: 18px;height: 18px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20460.1%20460.1%22%20style%3D%22enable-background%3Anew%200%200%20460.1%20460.1%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M25.6%2C139.9h257.5V88.8H25.6C11.4%2C88.8%2C0%2C100.2%2C0%2C114.3S11.4%2C139.9%2C25.6%2C139.9z%22%2F%3E%20%3Cpath%20d%3D%22M25.6%2C242.4h257.5v-51.1H25.6C11.4%2C191.3%2C0%2C202.8%2C0%2C216.9C0%2C231%2C11.4%2C242.4%2C25.6%2C242.4z%22%2F%3E%20%3Cpath%20d%3D%22M25.6%2C293.9L25.6%2C293.9C11.4%2C293.9%2C0%2C305.3%2C0%2C319.4S11.4%2C345%2C25.6%2C345h178.9c-2-6.2-3.1-12.8-3.1-19.5%20c0-11.3%2C3-22.1%2C8.5-31.6L25.6%2C293.9L25.6%2C293.9z%22%2F%3E%20%3Cpath%20d%3D%22M450.6%2C302.6c-12.6-12.6-33.1-12.6-45.7%2C0l-26.5%2C26.5V52.9c0-17.8-14.5-32.3-32.3-32.3s-32.3%2C14.5-32.3%2C32.3v276.2%20l-26.5-26.5c-12.6-12.6-33.1-12.6-45.7%2C0c-12.6%2C12.6-12.6%2C33.1%2C0%2C45.7l81.7%2C81.7c12.6%2C12.6%2C33.1%2C12.6%2C45.7%2C0l81.7-81.7%20C463.2%2C335.7%2C463.2%2C315.2%2C450.6%2C302.6z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat;background-size: 18px;background-position: 50% 50%;} .jf-bn-sortItems .jf-bn-sortItems__list {display: none;position: absolute;top: 20px;right: 0;transition: ease .3s;padding: 10px 0;width: 130px;background: #2f2f2f;border-radius: 5px;} .jf-bn-sortItems:hover .jf-bn-sortItems__list {display:block} .jf-bn-sortItems .jf-bn-sortItems__list__item {} .jf-bn-sortItems .jf-bn-sortItems__list__item__label {display: block;padding: 3px 10px;text-decoration: none;vertical-align: top;color: #fff;transition: ease .3s;} .jf-bn-sortItems .jf-bn-sortItems__list__item__label:hover{background: #000;} .jf-bn-sortItems .is-active .jf-bn-sortItems__list__item__label{position:relative;padding: 3px 10px 3px 35px;} .jf-bn-sortItems .is-active .jf-bn-sortItems__list__item__label::after {position: absolute;content: "";width: 10px;height: 5px;margin-top: -2px;border-left: 3px solid #fff;border-bottom: 3px solid #fff;top: 50%;left: 13px;-webkit-transform: translate(0,-50%) rotate(-45deg);transform: translate(0,-50%) rotate(-45deg);} @media screen and (max-width:834px){ .jf-bn-list__controller{margin: 0 30px;} } @media screen and (max-width:640px){ .jf-bn-list__controller{margin: 0 20px;} } /* スタイリングリスト -------------------------------------*/ .jf-bn-coordinationCatalog{margin-top: 80px;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__title{font-size:21px} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;margin-top: 50px;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item {width: -webkit-calc(100% / 4 - 4.5px);width: calc(100% / 4 - 4.5px); margin-right: 6px; position: relative;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(4n){margin-right:0;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+5){margin-top: 30px;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__footer{margin-top: 32px;text-align: center;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__footer > a{font-size: 14px; color: #202020;line-height: 1.8;-webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111; text-decoration: none;transition: all 0.2s ease-in-out;display: inline-block;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__footer > a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} /* -画像 */ .jf-bn-coordinationListItem__imageContainer{} .jf-bn-coordinationListItem__imageContainer .jf-bn-coordinationListItem__image{overflow: hidden;position: relative;padding-bottom: 133%;} .jf-bn-coordinationListItem__imageContainer .jf-bn-coordinationListItem__image img{width: 100%;display: block;-webkit-transition: 0.3s;transition: 0.3s;height: 100%;position: absolute;} .jf-bn-coordinationListItem__imageContainer .jf-bn-coordinationListItem__image:hover img{-webkit-transform: scale(1.1);transform: scale(1.1);} /* -お気に入り */ .addToWishList--icon { padding: 0;background-color: rgb(0 0 0 / 0.2);font-size: 0;border: none;border-radius: 5px; transition: .5s;height: 40px;line-height: 40px;width: 40px; overflow: hidden;color: #fff;display: block;position: absolute;top: 15px;right: 15px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A7%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A7%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M97.27%2C43.08%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M94.71%2C43.47c1.05-3.22%2C1.65-6.43%2C1.65-9.56c0-14.08-11.48-25.54-25.59-25.54v0c-8.37%2C0-16.07%2C4.05-20.8%2C10.64%20c-4.74-6.6-12.43-10.64-20.8-10.64c-14.11%2C0-25.59%2C11.46-25.59%2C25.54c0%2C25.06%2C38.26%2C54.94%2C41.69%2C57.57%20c1.23%2C1.24%2C2.92%2C1.94%2C4.7%2C1.94s3.47-0.7%2C4.7-1.94c0.96-0.73%2C4.62-3.58%2C9.4-7.85%22%2F%3E%20%3Cg%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2259.81%22%20y1%3D%2261.29%22%20x2%3D%2296.07%22%20y2%3D%2261.29%22%2F%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2277.76%22%20y1%3D%2243.16%22%20x2%3D%2277.76%22%20y2%3D%2279.42%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat;background-size: 20px;background-position: 50% 50%;z-index: 1;} .removeFromWishList--icon { padding: 0;background-color: rgb(0 0 0 / 0.5);font-size: 0;border: none;border-radius: 5px; transition: .5s;height: 40px;line-height: 40px;width: 40px; overflow: hidden;color: #fff;display: block;position: absolute;top: 15px;right: 15px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A7%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A7%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M94.71%2C43.47c1.05-3.22%2C1.65-6.43%2C1.65-9.56c0-14.08-11.48-25.54-25.59-25.54v0c-8.37%2C0-16.07%2C4.05-20.8%2C10.64%20c-4.74-6.6-12.43-10.64-20.8-10.64c-14.11%2C0-25.59%2C11.46-25.59%2C25.54c0%2C25.06%2C38.26%2C54.94%2C41.69%2C57.57%20c1.23%2C1.24%2C2.92%2C1.94%2C4.7%2C1.94s3.47-0.7%2C4.7-1.94c0.96-0.73%2C4.62-3.58%2C9.4-7.85%22%2F%3E%20%3Cg%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2259.81%22%20y1%3D%2261.29%22%20x2%3D%2296.07%22%20y2%3D%2261.29%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat;background-size: 20px;background-position: 50% 50%;z-index: 1;} .addToWishList--icon:hover, .removeFromWishList--icon:hover{background-color: rgb(0 0 0 / 0.5);} /* -メタ情報 */ .jf-bn-coordinationListItem__creationDate{display:none} .jf-bn-coordinationListItem__publicationDate{display: none;} .jf-bn-coordinationListItem__coordinationHeight{display:none} /* -投稿者情報 */ .jf-bn-coordinationListItem__staffInfo{ position: relative; padding: 0 15px;} .jf-bn-coordinationListItem__staffInfo__image{} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage{position: relative;width: 50px;height: 50px;padding: 6px 6px 6px;text-align: center;border-radius: 50%;background: #fff;margin-top: -25px;box-sizing: border-box;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage::before {position: absolute;top: 0;left: 0;width: 50px;height: 50px;content: '';border-radius: 50%;border: 2px solid #001335;box-sizing: border-box;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage:after {position: absolute;top: -1px;left: -1px; width: 52px;height: 26px;content: '';border-radius: 38px 38px 0 0;background: #fff;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage img{position: relative;z-index: 1;width: 38px;height: 38px;max-width: 38px;border-radius: 50%;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage .jf-bn-noImage{background: #EBECF0;width: 38px;height: 38px;border-radius: 50%;z-index: 1;font-size: 0;position: relative;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage .jf-bn-noImage::before{content:"";display:block;position:absolute;width: 26px;height: 26px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23333333%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M49.9%2C0c-27.57%2C0-50%2C22.43-50%2C50s22.43%2C50%2C50%2C50c27.57%2C0%2C50-22.43%2C50-50S77.47%2C0%2C49.9%2C0L49.9%2C0z%20M49.9%2C3.26%20c11.82%2C0%2C22.62%2C4.42%2C30.86%2C11.68L69.61%2C26.11h-2.78c-0.02-0.02-0.02-0.05-0.04-0.07l-5.33-6.69c-1.54-1.93-3.83-3.03-6.29-3.03%20H48.7c-2.7%2C0-5.21%2C1.34-6.71%2C3.59l-4.13%2C6.2h-1.86v-3.26c0-0.9-0.73-1.63-1.63-1.63h-9.79c-0.9%2C0-1.63%2C0.73-1.63%2C1.63v3.26h-0.84%20c-3.14%2C0-5.69%2C2.55-5.69%2C5.69V71c0%2C2.24%2C1.31%2C4.16%2C3.19%2C5.08l-4.77%2C4.78C7.59%2C72.62%2C3.16%2C61.82%2C3.16%2C50%20C3.16%2C24.23%2C24.13%2C3.26%2C49.9%2C3.26L49.9%2C3.26z%20M22.12%2C73.43c-1.34%2C0-2.43-1.09-2.43-2.42V47.32h13.02%20c-0.14%2C0.88-0.23%2C1.77-0.23%2C2.68c0%2C3.73%2C1.19%2C7.19%2C3.2%2C10.02L22.28%2C73.43H22.12z%20M42.01%2C50c0-4.35%2C3.54-7.89%2C7.89-7.89%20c1.09%2C0%2C2.13%2C0.22%2C3.08%2C0.63L42.64%2C53.08C42.24%2C52.13%2C42.01%2C51.09%2C42.01%2C50z%20M57.79%2C50c0%2C4.35-3.54%2C7.89-7.89%2C7.89%20c-2.07%2C0-3.93-0.82-5.34-2.12l11.11-11.11C56.97%2C46.07%2C57.79%2C47.93%2C57.79%2C50z%20M42.24%2C58.09c2%2C1.9%2C4.69%2C3.07%2C7.66%2C3.07%20c6.15%2C0%2C11.15-5%2C11.15-11.15c0-2.97-1.17-5.66-3.07-7.66l2.12-2.12c2.44%2C2.54%2C3.94%2C5.98%2C3.94%2C9.77c0%2C7.8-6.35%2C14.15-14.15%2C14.15%20c-3.79%2C0-7.23-1.51-9.78-3.95L42.24%2C58.09z%20M55.4%2C40.31c-1.63-0.93-3.5-1.46-5.5-1.46c-6.15%2C0-11.15%2C5-11.15%2C11.15%20c0%2C2%2C0.54%2C3.88%2C1.46%2C5.5l-2.18%2C2.18c-1.44-2.21-2.28-4.85-2.28-7.68c0-7.8%2C6.35-14.15%2C14.15-14.15c2.83%2C0%2C5.46%2C0.84%2C7.68%2C2.28%20L55.4%2C40.31z%20M37.82%2C62.51c3.13%2C3.03%2C7.39%2C4.9%2C12.08%2C4.9c9.6%2C0%2C17.41-7.81%2C17.41-17.41c0-0.91-0.09-1.8-0.23-2.68h1.28%20c0.89%2C1.73%2C2.67%2C2.93%2C4.74%2C2.93s3.86-1.2%2C4.74-2.93h3.86V71c0%2C1.34-1.09%2C2.42-2.43%2C2.42H26.9L37.82%2C62.51z%20M71.02%2C44.91%20c0-1.15%2C0.93-2.08%2C2.08-2.08c1.15%2C0%2C2.08%2C0.93%2C2.08%2C2.08c0%2C1.15-0.93%2C2.08-2.08%2C2.08C71.96%2C46.99%2C71.02%2C46.06%2C71.02%2C44.91z%20M81.7%2C44.06h-3.34c-0.41-2.54-2.6-4.49-5.26-4.49s-4.85%2C1.95-5.26%2C4.49h-1.6c-0.84-2.31-2.16-4.4-3.83-6.14l8.55-8.55h8.32%20c1.34%2C0%2C2.43%2C1.09%2C2.43%2C2.42L81.7%2C44.06L81.7%2C44.06z%20M59.93%2C35.79c-2.84-2.01-6.29-3.2-10.02-3.2c-7.51%2C0-13.91%2C4.79-16.34%2C11.47%20H19.7V31.8c0-1.34%2C1.09-2.42%2C2.43-2.42h44.22L59.93%2C35.79z%20M32.75%2C26.11h-6.53v-1.63h6.53V26.11z%20M41.79%2C26.11l2.92-4.39%20c0.89-1.34%2C2.38-2.14%2C3.99-2.14h6.46c1.46%2C0%2C2.83%2C0.66%2C3.74%2C1.8l3.77%2C4.72H41.79z%20M49.9%2C96.74c-12.78%2C0-24.37-5.16-32.81-13.5%20l6.55-6.55h55.64c3.14%2C0%2C5.69-2.55%2C5.69-5.69V31.8c0-3.14-2.55-5.69-5.69-5.69h-5.06l8.92-8.92c8.34%2C8.45%2C13.5%2C20.04%2C13.5%2C32.81%20C96.64%2C75.77%2C75.67%2C96.74%2C49.9%2C96.74L49.9%2C96.74z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-size: cover;background-repeat: no-repeat;z-index: 1;} .jf-bn-coordinationListItem__staffInfo__profile{line-height: 1.6;} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__name{color: #202020;margin-top: 10px; display: inline-block;pointer-events: none;} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__ruby{display:none} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__shop{ color: #202020;pointer-events: none;} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__shop::before{content:"／";} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__label{display:none} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__height{position: absolute;top: 28px;left: 70px;font-size: 0.9em;color: #797979;} @media screen and (max-width:834px){ .jf-bn-coordinationCatalog{padding:0 30px} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__title{font-size:18px} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item {width: -webkit-calc(100% / 3 - 4px);width: calc(100% / 3 - 4px);} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(4n){margin-right:6px;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(3n){margin-right:0;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+4){margin-top: 30px;} } @media screen and (max-width:640px){ .jf-bn-coordinationCatalog{margin-top: 50px;padding:0 20px} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list {margin-top: 30px;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item {width: -webkit-calc(100% / 2 - 3px);width: calc(100% / 2 - 3px);} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(3n){margin-right:6px;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(2n){margin-right:0;} .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+3){margin-top: 20px;} .addToWishList--icon {height: 34px;line-height: 34px;width: 34px;top: 10px;right: 10px;background-size: 18px;} .removeFromWishList--icon {height: 34px;line-height: 34px;width: 34px;top: 10px;right: 10px;background-size: 18px;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage{width: 42px;height: 42px;padding: 5px 5px;margin-top: -22px;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage::before {width: 42px;height: 42px;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage:after {width: 44px;height: 22px;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage img{width: 31px;height: 31px;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage .jf-bn-noImage{width: 31px;height: 31px;margin: auto;} .jf-bn-coordinationListItem__staffInfo__image .jf-bn-staffImage .jf-bn-noImage::before{width: 22px;height: 22px;} .jf-bn-coordinationListItem__staffInfo__profile{font-size:0.9em} .jf-bn-coordinationListItem__staffInfo__profile .jf-bn-coordinationListItem__staffInfo__name{margin-top: 6px} } /* タブ切り替え -------------------------------------*/ .jf-bn-tabContents{margin-top: 72px;} .jf-bn-tabContents__tabs{display: -webkit-flex;display: flex; -webkit-box-align: center; align-items: center; position: relative;} .jf-bn-tabContents__tabs::after{content:"";position: absolute;display:block;height: 1px;width: 100%;background: #dcdcdc;bottom: 0px;z-index: -1;} .jf-bn-tabContents__tabs .jf-bn-tabContents__tab{width: -webkit-calc(100% / 3);width: calc(100% / 3 - 20px);max-width: 200px;padding: 0 10px;cursor: pointer;height: 45px;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: center;align-items: center;-webkit-justify-content: center;justify-content: center;text-align: center;line-height: 1.6;} .jf-bn-tabContents__tabs .jf-bn-tabContents__tab.is-active{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: #ffffff none repeat scroll 0 0;border-color: #dcdcdc #dcdcdc #ffffff;border-image: none;border-radius: 4px 4px 0 0; border-style: solid; border-width: 1px;color: #2d2d2d;} .jf-bn-tabContents__contents{} .jf-bn-tabContents__contents .jf-bn-tabContents__content{padding-top: 68px;} .jf-bn-tabContents__contents .jf-bn-tabContents__content.disnon{display:none} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ .jf-bn-tabContents{margin-top: 48px;} .jf-bn-tabContents__contents .jf-bn-tabContents__content{padding-top: 42px;} } /* メニュー_タイプ1 -------------------------------------*/ .jf-bn-menuBlack{margin-left: 24px;} .jf-bn-menuBlack__list{display: -webkit-box;display: flex;flex-wrap: wrap;text-align: center;font-size: 13px;font-weight: 400;border: 1px solid #202020;border-radius: 4px;overflow: hidden;} .jf-bn-menuBlack__item:not(:last-child) {border-right: 1px solid #202020; box-sizing: border-box;} .jf-bn-menuBlack__item{min-width: 126px;} .jf-bn-menuBlack__item a{display: -webkit-box;display: flex; padding: 9px 12px; color: #202020; -webkit-box-flex: inherit; flex-grow: inherit;-webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;text-decoration: none;height: calc(100% - 18px);transition: all 300ms ease-out 0ms;} .jf-bn-menuBlack__item a:hover{background: #EBECF0;} .jf-bn-menuBlack__item--current{background-color: #202020;} .jf-bn-menuBlack__item--current a {color: #fff;border-radius: 1px;background-color: #202020 !important;} @media screen and (max-width:834px){ .jf-bn-menuBlack{width: 100%;margin: 0 auto; max-width: 560px;} .jf-bn-menuBlack__item{min-width: inherit;width: -webkit-calc(100% / 3);width: calc(100% / 3);} } @media screen and (max-width:640px){ } /* ================================== stylingList ================================== */ #jf-bn-staffStylingList .breadcrumbs .breadcrumbsList {max-width: -webkit-calc(1300px - 100px);max-width: calc(1300px - 100px);padding: 0 50px;} @media screen and (max-width:834px){ #jf-bn-staffStylingList .breadcrumbs .breadcrumbsList {padding: 0} } .staffStylingList-container{margin:60px auto 120px;max-width: -webkit-calc(1300px - 100px);max-width: calc(1300px - 100px);padding: 0 50px;} .staffStylingList-container .pageTitle{font-size:24px;font-weight:400;position:relative;display: -webkit-box;display: flex;flex-wrap: wrap; align-items: center;} .staffStylingList-container .staffStylingList-layout{display: -webkit-flex;display: flex;margin-top: 50px;} .staffStylingList-container .staffStylingList-layout__menu{width: 280px;margin-right: 30px;} .staffStylingList-container .staffStylingList-layout__menuInner{/*position:sticky;*/top:20px} .staffStylingList-container .staffStylingList-layout__content{width: -webkit-calc(100% - 310px);width: calc(100% - 310px);} @media screen and (max-width:1100px){ .staffStylingList-container .staffStylingList-layout{-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;} } @media screen and (max-width:834px){ .staffStylingList-container{padding: 0;} .staffStylingList-container .pageTitle{font-size:20px;padding: 0 30px;} .staffStylingList-container .pageTitle span {display: none;} .staffStylingList-container .staffStylingList-layout__menu{width: 100%;margin-right: 0;} .staffStylingList-container .staffStylingList-layout__menuInner{position: inherit;top: inherit;margin: 0 30px;} .staffStylingList-container .staffStylingList-layout__content{width: 100%;margin-top: 0;margin-right: 0;} } @media screen and (max-width:640px){ .staffStylingList-container{margin: 30px auto 80px;} .staffStylingList-container .pageTitle{padding: 0 20px;} .staffStylingList-container .staffStylingList-layout{margin-top:30px} .staffStylingList-container .staffStylingList-layout__menuInner{margin: 0 20px;} } /* 検索中の条件 */ .staffStylingList-searchConditionContainer{display: flex;display: -ms-flexbox;display: -webkit-flex;flex-flow: row nowrap;-ms-flex-flow: row nowrap;-ms-align-items: center;align-items: center;margin-top: 50px;} .staffStylingList-searchConditionList__label{font-size: 14px;display: none;padding-right: 20px;border-right: 1px solid #242424;margin-right: 20px;line-height: 1.2;-webkit-box-ordinal-group: 1;-ms-flex-order:1;-webkit-order:1;order:1;white-space: nowrap;display: block;} .staffStylingList-searchConditionList{display: flex;display: -ms-flexbox;display: -webkit-flex;flex-flow: row nowrap;-ms-flex-flow: row nowrap;overflow-x: auto;scroll-behavior: smooth;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch;-webkit-box-ordinal-group: 2;-ms-flex-order:2;-webkit-order:2;order:2;} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item{margin-right: 10px;} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a{padding: 0 15px 0 35px;color: #202020;background: #EBECF0;position: relative;border: 1px solid #EBECF0;transition: all 300ms ease-out 0ms;text-decoration: none;border-radius: 36px;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;height: 36px;-webkit-justify-content: center;justify-content: center;font-size: 0.9em;white-space: nowrap;} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a::before{transition: .5s ease-in-out;position: absolute;margin: auto;content: "";height: 1px;width: 14px;background: #202020;display: block;top: 50%;left: 15px;-webkit-transform: translate(0,-50%) rotate(-45deg);-ms-transform: translate(0,-50%) rotate(-45deg);transform: translate(0,-50%) rotate(-45deg);} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a::after{transition: .5s ease-in-out;position: absolute;margin: auto;content: "";height: 1px;width: 14px;background: #202020;display: block;top: 50%;left: 15px;-webkit-transform: translate(0,-50%) rotate(-135deg);-ms-transform: translate(0,-50%) rotate(-135deg);transform: translate(0,-50%) rotate(-135deg);} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a:hover{background: #001335;border: #001335 1px solid;color:#fff} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a:hover::before{background: #fff;-webkit-transform: translate(0,-50%) rotate(-90deg);-ms-transform: translate(0,-50%) rotate(-90deg);transform: translate(0,-50%) rotate(-135deg);} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a:hover::after{background: #fff;-webkit-transform: translate(0,-50%) rotate(-90deg);-ms-transform: translate(0,-50%) rotate(-90deg);transform: translate(0,-50%) rotate(-225deg);} @media screen and (max-width:834px){ .staffStylingList-searchConditionContainer{margin: 50px 30px 0;} } @media screen and (max-width:640px){ .staffStylingList-searchConditionContainer{margin: 30px 20px 0;} .staffStylingList-searchConditionList__label{font-size: 13px;padding-right: 10px;margin-right: 10px;} .staffStylingList-searchConditionList{} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a{padding: 0 15px 0 30px;border-radius: 30px;height: 30px;} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a::before{width: 12px;left: 12px;} .staffStylingList-searchConditionList .staffStylingList-searchConditionList__item a::after{width: 12px;left: 12px;} } /* filter__ */ .filter__menu .searchMenu-openBtn{display:none;pointer-events: none;} .filter__menu .searchMenu-openBtn .search-icon{width: 16px;height: 16px;position: relative;margin-right:6px;display: inline-block;} .filter__menu .searchMenu-openBtn .search-icon::before{content: ""; color: rgb(51, 51, 51); width: 100%; height: 2px;background: rgb(51, 51, 51);box-shadow: currentcolor 0px 7px 0px 0px; display: block;position: absolute; top: 3px;left: 0px;} .filter__menu .searchMenu-openBtn .search-icon::after{content: ""; color: rgb(51, 51, 51); width: 2px;height: 6px; background: rgb(51, 51, 51); box-shadow: currentcolor 8px 7px 0px 0px; display: block; position: absolute;top: 0px; left: 0px; transform: translate3d(3px, 1px, 0px); transition: transform 200ms ease 0s, box-shadow 200ms ease 0s;} .filter__menu .searchMenu-openBtn:hover .search-icon::after{box-shadow: currentcolor -8px 7px 0px 0px;transform: translate3d(11px, 1px, 0px);} .filter__menu #page-search{} .filter__menu div[class^="filter__"]:nth-of-type(n+2){margin-top: 30px;} .filter__menu div[class^="filter__"] .label{font-size: 16px;} .filter__menu .filter-group__content{margin-top:15px} .filter__menu .filter__keyword{width: 100%;position: relative;} .filter__menu .filter__keyword input[name="keyword"]{border:none;background-color: #EBECF0;font-size: 16px;padding: 0 20px 0 55px;height: 50px;line-height: 50px;position:relative;width: -webkit-calc(100% - 75px);width: calc(100% - 75px);color: #202020;border-radius: 5px;} .filter__menu .filter__keyword input[name="keyword"]:-webkit-autofill {-webkit-transition: background-color 9999s;transition: background-color 9999s;} .filter__menu .filter__keyword input[name="keyword"]::placeholder {color: rgba(150, 150, 150, 1);} .filter__menu .filter__keyword input[name="keyword"]:-ms-input-placeholder {color: rgba(150, 150, 150, 1);} .filter__menu .filter__keyword input[name="keyword"]::-ms-input-placeholder {color: rgba(150, 150, 150, 1);} .filter__menu .filter__keyword input[type="submit"]{width: 20px;height: 20px;position: absolute;top:50%;left: 20px;padding: 0;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);border:none;text-indent:-9999px;background: transparent;background-repeat: no-repeat;background-size: cover;background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23333333%3Bstroke-width%3A7.6559%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M94.82%2C95L71.88%2C72.06L94.82%2C95L94.82%2C95z%20M71.88%2C17.33c15.11%2C15.11%2C15.11%2C39.61%2C0%2C54.72%20c-15.11%2C15.11-39.61%2C15.11-54.72%2C0c-15.11-15.11-15.11-39.61%2C0-54.72C32.27%2C2.22%2C56.77%2C2.22%2C71.88%2C17.33L71.88%2C17.33z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');} .filter__menu .filter-list li{font-size: 14px;} .filter__menu .filter-list li a{position:relative;padding: 5px 0;transition: .5s;text-decoration: none;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;color: #202020;} .filter__menu .filter-list li a:hover{background:#dcdde2;} .filter__menu .filter-list li a.is--checked{} .filter__menu .filter-list li .icon-checkmark{display:inline-block;width:20px;min-width: 20px;height: 20px;border-radius:5px;border: 1px solid #666;margin-right: 8px;box-sizing: border-box;} .filter__menu .filter-list li .is--checked .icon-checkmark{background-image: -webkit-linear-gradient(left, #202020 0%, #202020 100%);background-image: linear-gradient(to right, #202020 0%, #202020 100%);border: none;position: relative;} .filter__menu .filter-list li .is--checked .icon-checkmark::after { position: absolute; content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 3px solid #fff;border-bottom: 3px solid #fff;top: 50%;left: 50%; -webkit-transform: translate(-50%,-50%) rotate(-45deg);transform: translate(-50%,-50%) rotate(-45deg);} .filter__menu .select{display: block;position: relative;} .filter__menu .select::after {right: 20px;position: absolute;top: 50%;border-top: 2px solid #333;border-right: 2px solid #333;content: "";-webkit-transform: translate(0,-7px) rotate(135deg);transform: translate(0,-7px) rotate(135deg);width: 7px;height: 7px;transition: .3s ease-in-out;margin-top: 1px;} .filter__menu .select .selectBox {width: 100%;min-width: 120px;box-sizing: border-box;transition: all 0.2s ease-in-out;appearance: none;-webkit-appearance: none;border: none;font-size: 16px;height: 50px;line-height: 50px;padding: 0 20px;outline: 0;border-radius: 5px;background-color: #fff;cursor: pointer;border: 1px solid #666;border-radius: 6px;color: #202020;} .filter__menu .select .selectBox:hover {border: 1px solid #bababa;} .filter__menu .tag-list{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .filter__menu .tag-list li{margin-right: 6px;margin-bottom: 6px;text-align: center;} .filter__menu .tag-list li a{color: #202020;display: block;background: #EBECF0;border: 1px solid #EBECF0;transition: all 300ms ease-out 0ms;text-decoration: none;border-radius: 4px;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;height: 40px;-webkit-justify-content: center;justify-content: center;font-size: 0.9em;padding: 0 15px;} .filter__menu .tag-list a:hover{border: #001335 1px solid;} .filter__menu .tag-list li .is--checked{color:#fff;background: #001335;border: #001335 1px solid;} @media screen and (max-width:834px){ .filter__menu .searchMenu-openBtn{pointer-events: all;display: -webkit-flex;display: flex;width: fit-content;margin-left: auto;-webkit-align-items: center;align-items: center;position: relative;cursor: pointer;-webkit-justify-content: center;justify-content: center;color: #202020;margin-bottom: 30px;} .filter__menu #page-search{display:none;margin-bottom: 50px;} } @media screen and (max-width:640px){ } /* スタイリングリスト */ .jf-bn-coordinationList__list {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap;flex-wrap: wrap;margin: 50px 0;} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item {width: -webkit-calc(100% / 3 - 4px);width: calc(100% / 3 - 4px); margin-right: 6px; position: relative;} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item:nth-of-type(3n){margin-right:0;} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item:nth-of-type(n+4){margin-top: 30px;} @media screen and (max-width:834px){ .jf-bn-coordinationList__list {margin: 50px 30px;} } @media screen and (max-width:640px){ .jf-bn-coordinationList__list {margin:30px 20px;} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item {width: -webkit-calc(100% / 2 - 3px);width: calc(100% / 2 - 3px);} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item:nth-of-type(3n){margin-right:6px;} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item:nth-of-type(2n){margin-right:0;} .jf-bn-coordinationList__list .jf-bn-coordinationList__list__item:nth-of-type(n+3){margin-top: 20px;} } /* ================================== stylingDetail ================================== */ #jf-bn-staffStylingDetail .staffStylingDetail-layout{display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap;flex-flow: row nowrap;max-width: -webkit-calc(1124px - 100px);max-width: calc(1124px - 100px);padding: 0 50px;margin: 36px auto 100px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfoLayout__left{ width: -webkit-calc(100% - 425px);width: calc(100% - 425px); margin-right: 50px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfoLayout__right{ position: relative; width: 375px;min-width: 375px;} @media screen and (max-width:834px){ #jf-bn-staffStylingDetail .staffStylingDetail-layout{-webkit-flex-flow: row wrap;flex-flow: row wrap;padding: 0;margin: 0 auto 80px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfoLayout__left{width: -webkit-calc(100% - 0px);width: calc(100% - 0px);margin-right: 0;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfoLayout__right{width: -webkit-calc(100% - 60px);width: calc(100% - 60px);min-width: auto;margin: 50px 30px 0;}} @media screen and (max-width:640px){ #jf-bn-staffStylingDetail .staffStylingDetail-layout{margin: 0 auto 50px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfoLayout__right{margin: 40px 20px 0;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} } /* 画像パーツ・フリック */ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage{position: relative} /* - メイン */ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image{max-height: 800px; position: relative;padding-bottom: 800px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image img{max-height: 800px;min-height: 800px;object-fit: cover; margin: 0 auto;width: 100%;position: absolute;height: 100%;} /* - slick コントロール */ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel{position: relative;overflow: hidden; min-height: 975px; opacity: 0; transition: opacity .3s ease;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel.slick-slider{opacity: 1;overflow: inherit;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-arrow{z-index: 1;background: #fff;height: 70px;flex-basis: 55px;min-width: 55px;max-width: 55px;border-radius: 5px;display: -webkit-box;transition: all 0.2s ease-in-out;position: absolute;top: calc(50% - 90px);-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);box-shadow: 10px 25px 30px rgba(0,0,0,.08);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-arrow.slick-disabled {opacity: 0;cursor: none;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-prev{left: -15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-next{right: -15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-next::after{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 50%;background: #202020;display:block;top: 50%;left: 50%;-webkit-transform: translate(-50%,3px);-ms-transform: translate(-50%,3px);transform: translate(-50%,3px);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-next::before{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 10px;background: #202020;display:block;top: 50%;right: 12px;-webkit-transform: translate(0,0) rotate(-135deg);-ms-transform: translate(0,0) rotate(-135deg);transform: translate(0,0) rotate(-135deg);opacity: 1;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-prev::after{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 50%;background: #202020;display:block;top: 50%;left: 50%;-webkit-transform: translate(-50%,3px);-ms-transform: translate(-50%,3px);transform: translate(-50%,3px);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-prev::before{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 10px;background: #202020;display:block;top: 50%;left: 12px;-webkit-transform: translate(0,0) rotate(-45deg);-ms-transform: translate(0,0) rotate(-45deg);transform: translate(0,0) rotate(-45deg);opacity: 1;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-arrow:hover{box-shadow: 0 10px 20px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);} /* - サムネイル */ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList{display: -webkit-flex;display: flex;overflow-y: hidden;overflow-x: auto;margin-top: 40px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList::-webkit-scrollbar{height:8px} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList::-webkit-scrollbar-track{ border-radius:5px; background:#ebecf0} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList::-webkit-scrollbar-thumb{ border-radius:5px; background:#283135} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li {margin:0;position:relative;flex-basis: 100px;flex-shrink: 0;padding-bottom: 126px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li::before {opacity:0;transition: .5s ease-in-out;content: "";display: block;position: absolute;top: 50%;left: 50%;z-index: 1;margin: 0;width: 38px;height: 38px;border-radius: 50%;background: rgb(50 50 50 / 30%);-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);border: 3px solid #fff;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li::after {opacity:0;transition: .5s ease-in-out;content: "";display: block;position: absolute;left: 50%;top: 50%;margin-left: 7px;border: 20px solid transparent;border-width: 7px 12px;border-left-color: #FFF;z-index: 2;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li.slick-active::before, #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li.slick-active::after{opacity:1} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList img{display: block;width: 100%;height: 100%;position: absolute;object-fit: cover;font-family: 'object-fit: cover;';} /* - ボタンエリア */ #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer{width: auto;position: absolute;top: 692px;right: 30px; z-index: 1;background: rgba(0, 0, 0, 0.3); overflow: hidden; border-radius: 2px;transition: .5s;color: #fff; border-style: none;padding: 6px 0 12px;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike{} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton {display: inline-flex;align-items: center; justify-content: center;margin: 0 auto; width: 46px;height: 40px;color: #fff;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton::before {content: "";display: inline-flex;width: 25px; height: 25px;background-color: transparent;background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20750%20750%22%20style%3D%22enable-background%3Anew%200%200%20750%20750%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A36%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M134.55%2C683.55H48.7c-6.6%2C0-12-5.4-12-12V378.36c0-6.6%2C5.4-12%2C12-12h85.84c6.6%2C0%2C12%2C5.4%2C12%2C12v293.19%20C146.55%2C678.15%2C141.15%2C683.55%2C134.55%2C683.55z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M217.06%2C624.29c0.23-8.02%2C1.06-16.01%2C1.05-22.94c-0.01-30.05-0.12-60.11-0.07-90.17%20c0.07-40.02-3.26-81.87%2C0.39-121.74c1.48-16.19%2C14.97-29.06%2C25.67-40.9c16.95-18.77%2C36.03-35.4%2C54.41-52.68%20c29.92-28.14%2C58.13-58.13%2C84.42-89.76c9.71-11.69%2C19.19-23.63%2C27.2-36.57c15.58-25.15%2C25.23-53.42%2C33.11-81.84%20c3.04-10.97%2C3.77-26.57%2C12.3-34.09c22.2-19.55%2C55.5-3.35%2C70.74%2C18.24c10.36%2C14.67%2C14.36%2C33%2C15.82%2C50.96%20c3.88%2C47.82-9.1%2C96.87-36.1%2C136.35c-6.9%2C10.09-14.74%2C19.69-19.54%2C30.95c-4.86%2C11.4-8.69%2C30.43%2C5.42%2C33.92%20c18.1%2C4.47%2C43.4-1.26%2C62-1.91c24.75-0.87%2C49.51-1.73%2C74.26-2.6c33.14-1.16%2C75.42%2C1.36%2C90.05%2C37.74%20c6.18%2C15.38%2C4.75%2C33.66-3.73%2C47.87c-4.21%2C7.06-10.1%2C13.25-12.57%2C21.11c-5.92%2C18.82%2C9.01%2C37.54%2C2.79%2C56.22%20c-2.97%2C8.92-10.45%2C15.38-17.18%2C21.9c-14.5%2C14.05%2C2.62%2C47.12-4.29%2C66.11c-6.46%2C17.76-23.11%2C29.03-29.66%2C46.64%20c-7.77%2C20.87-0.55%2C43.71-15.19%2C62.86c-14.29%2C18.69-40.33%2C22.6-63.68%2C23.57c-56.11%2C2.33-112.09-3.95-167.65-11.19%20c-52.32-6.82-104.57-12.72-156.46-23.08c-7.43-1.48-15.12-3.14-21.15-7.77C218.13%2C652.79%2C216.65%2C638.49%2C217.06%2C624.29z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton._on {} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton._on::before {width: 25px;height: 25px;background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20750%20750%22%20style%3D%22enable-background%3Anew%200%200%20750%20750%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2308B9FF%3Bstroke%3A%2308B9FF%3Bstroke-width%3A36%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M134.55%2C683.55H48.7c-6.6%2C0-12-5.4-12-12V378.36c0-6.6%2C5.4-12%2C12-12h85.84c6.6%2C0%2C12%2C5.4%2C12%2C12v293.19%20C146.55%2C678.15%2C141.15%2C683.55%2C134.55%2C683.55z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M217.06%2C624.29c0.23-8.02%2C1.06-16.01%2C1.05-22.94c-0.01-30.05-0.12-60.11-0.07-90.17%20c0.07-40.02-3.26-81.87%2C0.39-121.74c1.48-16.19%2C14.97-29.06%2C25.67-40.9c16.95-18.77%2C36.03-35.4%2C54.41-52.68%20c29.92-28.14%2C58.13-58.13%2C84.42-89.76c9.71-11.69%2C19.19-23.63%2C27.2-36.57c15.58-25.15%2C25.23-53.42%2C33.11-81.84%20c3.04-10.97%2C3.77-26.57%2C12.3-34.09c22.2-19.55%2C55.5-3.35%2C70.74%2C18.24c10.36%2C14.67%2C14.36%2C33%2C15.82%2C50.96%20c3.88%2C47.82-9.1%2C96.87-36.1%2C136.35c-6.9%2C10.09-14.74%2C19.69-19.54%2C30.95c-4.86%2C11.4-8.69%2C30.43%2C5.42%2C33.92%20c18.1%2C4.47%2C43.4-1.26%2C62-1.91c24.75-0.87%2C49.51-1.73%2C74.26-2.6c33.14-1.16%2C75.42%2C1.36%2C90.05%2C37.74%20c6.18%2C15.38%2C4.75%2C33.66-3.73%2C47.87c-4.21%2C7.06-10.1%2C13.25-12.57%2C21.11c-5.92%2C18.82%2C9.01%2C37.54%2C2.79%2C56.22%20c-2.97%2C8.92-10.45%2C15.38-17.18%2C21.9c-14.5%2C14.05%2C2.62%2C47.12-4.29%2C66.11c-6.46%2C17.76-23.11%2C29.03-29.66%2C46.64%20c-7.77%2C20.87-0.55%2C43.71-15.19%2C62.86c-14.29%2C18.69-40.33%2C22.6-63.68%2C23.57c-56.11%2C2.33-112.09-3.95-167.65-11.19%20c-52.32-6.82-104.57-12.72-156.46-23.08c-7.43-1.48-15.12-3.14-21.15-7.77C218.13%2C652.79%2C216.65%2C638.49%2C217.06%2C624.29z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeValue{text-align: center;} /* - syte */ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image__discoveryIcon{width: auto;height: 44px;position: absolute;top: 24px;left: 30px;z-index: 1;cursor: pointer;background: rgba(0, 0, 0, 0.3);overflow: hidden;border-radius: 2px;transition: .5s;padding: 0 12px 0 46px;color: #fff;outline: 0;border-style: none; -webkit-appearance: button;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image__discoveryIcon:hover{background: rgb(0 0 0 / 0.5);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image__discoveryIcon::before{content: "";background: url(/img/common/similar_search.svg) 50% 50% no-repeat;transform: translate(0, -50%);background-size: 25px;height: 25px;width: 25px;position: absolute;top: 50%;left: 12px;} #jf-bn-staffStylingDetail .syte-start-popup{position: absolute;background: #fff;font-size: 11px;line-height: 1.6;letter-spacing: 0.1rem;padding: 8px 9.5px 8px 12.5px;top: 80px;left: 30px;border: solid 1px #00000026;z-index: 1;width: 153px;text-align: justify;-webkit-animation: syteFadeOut 10s ease-out;animation: syteFadeOut 10s ease-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;} #jf-bn-staffStylingDetail .syte-start-popup::after {content:""; position: absolute;transform: rotate(45deg);left: 16px; top: -5px; border-width: 5px; border-style: solid;border-color: rgba(255, 255, 255, 1) transparent transparent rgba(255, 255, 255, 1);box-shadow: rgb(0 0 0 / 10%) -1px -1px 1px;z-index: 2;} @-webkit-keyframes syteFadeOut { 0% {opacity: 1;z-index: 1;} 80% {opacity: 1;z-index: 1;} 100% {opacity: 0;z-index: -100;} } @keyframes syteFadeOut { 0% {opacity: 1;z-index: 1;} 80% {opacity: 1;z-index: 1;} 100% {opacity: 0;z-index: -100;} } @media screen and (max-width:834px){ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-prev{left: 15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-next{right: 15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList{margin: 40px 30px 0;} } @media screen and (max-width:640px){ #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image{padding-bottom:500px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image img{max-height: 500px;min-height: 500px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel{min-height: 609px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-arrow{height: 55px;flex-basis: 40px;min-width: 40px;max-width: 40px;top: calc(50% - 55px);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-next::before{right: 8px;-webkit-transform: translate(0,-2px) rotate(-135deg);-ms-transform: translate(0,-2px) rotate(-135deg);transform: translate(0,-2px) rotate(-135deg);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-next::after{-webkit-transform: translate(-50%,1px);-ms-transform: translate(-50%,1px);transform: translate(-50%,1px);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-prev::before{left: 8px;-webkit-transform: translate(0,-2px) rotate(-45deg);-ms-transform: translate(0,-2px) rotate(-45deg);transform: translate(0,-2px) rotate(-45deg);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__carousel .slick-prev::after{-webkit-transform: translate(-50%,1px);-ms-transform: translate(-50%,1px);transform: translate(-50%,1px);} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList{margin: 10px 20px 0;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li {flex-basis: 70px;padding-bottom: 90px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li::before {width: 30px;height: 30px;border: 2px solid #fff;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__thumbnailList > li::after {margin-left: 7px;border-width: 6px 10px;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer{top: 396px; right: 15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike{} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton {width: 40px;height: 36px;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton::before {width: 22px; height: 22px;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeButton._on::before {width: 22px;height: 22px;} #jf-bn-staffStylingDetail .jf-bn-coordinationButtonContainer__addLike .addLikeValue{font-size: 0.9em} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image__discoveryIcon{height: 38px;top: 16px;left: 18px;padding: 0 12px 0 38px;font-size: 0.9em;} #jf-bn-staffStylingDetail .jf-bn-coordinationCarouselMainImage__image__discoveryIcon::before{background-size: 20px;height: 20px;width: 20px; left: 10px;} #jf-bn-staffStylingDetail .syte-start-popup{font-size: 10px;padding: 6px 7.5px 6px 10.5px;top: 66px;left: 18px;width: 120px;} #jf-bn-staffStylingDetail .syte-start-popup::after {left: 12px; top: -5px; border-width: 5px; border-style: solid;} } /* スタッフ情報 */ #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo{display: -webkit-flex;display: flex;-webkit-flex-flow: row nowrap;flex-flow: row nowrap;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image{margin-right: 15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-staffImage{width:90px} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-staffImage img{border-radius: 50%;width: 100%;display: block;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-noImage{background: #EBECF0;border-radius: 50%;z-index: 1;font-size: 0;position: relative;width: 90px;height: 90px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-noImage::before{content:"";display:block;position:absolute;width: 50px;height: 50px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23333333%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M49.9%2C0c-27.57%2C0-50%2C22.43-50%2C50s22.43%2C50%2C50%2C50c27.57%2C0%2C50-22.43%2C50-50S77.47%2C0%2C49.9%2C0L49.9%2C0z%20M49.9%2C3.26%20c11.82%2C0%2C22.62%2C4.42%2C30.86%2C11.68L69.61%2C26.11h-2.78c-0.02-0.02-0.02-0.05-0.04-0.07l-5.33-6.69c-1.54-1.93-3.83-3.03-6.29-3.03%20H48.7c-2.7%2C0-5.21%2C1.34-6.71%2C3.59l-4.13%2C6.2h-1.86v-3.26c0-0.9-0.73-1.63-1.63-1.63h-9.79c-0.9%2C0-1.63%2C0.73-1.63%2C1.63v3.26h-0.84%20c-3.14%2C0-5.69%2C2.55-5.69%2C5.69V71c0%2C2.24%2C1.31%2C4.16%2C3.19%2C5.08l-4.77%2C4.78C7.59%2C72.62%2C3.16%2C61.82%2C3.16%2C50%20C3.16%2C24.23%2C24.13%2C3.26%2C49.9%2C3.26L49.9%2C3.26z%20M22.12%2C73.43c-1.34%2C0-2.43-1.09-2.43-2.42V47.32h13.02%20c-0.14%2C0.88-0.23%2C1.77-0.23%2C2.68c0%2C3.73%2C1.19%2C7.19%2C3.2%2C10.02L22.28%2C73.43H22.12z%20M42.01%2C50c0-4.35%2C3.54-7.89%2C7.89-7.89%20c1.09%2C0%2C2.13%2C0.22%2C3.08%2C0.63L42.64%2C53.08C42.24%2C52.13%2C42.01%2C51.09%2C42.01%2C50z%20M57.79%2C50c0%2C4.35-3.54%2C7.89-7.89%2C7.89%20c-2.07%2C0-3.93-0.82-5.34-2.12l11.11-11.11C56.97%2C46.07%2C57.79%2C47.93%2C57.79%2C50z%20M42.24%2C58.09c2%2C1.9%2C4.69%2C3.07%2C7.66%2C3.07%20c6.15%2C0%2C11.15-5%2C11.15-11.15c0-2.97-1.17-5.66-3.07-7.66l2.12-2.12c2.44%2C2.54%2C3.94%2C5.98%2C3.94%2C9.77c0%2C7.8-6.35%2C14.15-14.15%2C14.15%20c-3.79%2C0-7.23-1.51-9.78-3.95L42.24%2C58.09z%20M55.4%2C40.31c-1.63-0.93-3.5-1.46-5.5-1.46c-6.15%2C0-11.15%2C5-11.15%2C11.15%20c0%2C2%2C0.54%2C3.88%2C1.46%2C5.5l-2.18%2C2.18c-1.44-2.21-2.28-4.85-2.28-7.68c0-7.8%2C6.35-14.15%2C14.15-14.15c2.83%2C0%2C5.46%2C0.84%2C7.68%2C2.28%20L55.4%2C40.31z%20M37.82%2C62.51c3.13%2C3.03%2C7.39%2C4.9%2C12.08%2C4.9c9.6%2C0%2C17.41-7.81%2C17.41-17.41c0-0.91-0.09-1.8-0.23-2.68h1.28%20c0.89%2C1.73%2C2.67%2C2.93%2C4.74%2C2.93s3.86-1.2%2C4.74-2.93h3.86V71c0%2C1.34-1.09%2C2.42-2.43%2C2.42H26.9L37.82%2C62.51z%20M71.02%2C44.91%20c0-1.15%2C0.93-2.08%2C2.08-2.08c1.15%2C0%2C2.08%2C0.93%2C2.08%2C2.08c0%2C1.15-0.93%2C2.08-2.08%2C2.08C71.96%2C46.99%2C71.02%2C46.06%2C71.02%2C44.91z%20M81.7%2C44.06h-3.34c-0.41-2.54-2.6-4.49-5.26-4.49s-4.85%2C1.95-5.26%2C4.49h-1.6c-0.84-2.31-2.16-4.4-3.83-6.14l8.55-8.55h8.32%20c1.34%2C0%2C2.43%2C1.09%2C2.43%2C2.42L81.7%2C44.06L81.7%2C44.06z%20M59.93%2C35.79c-2.84-2.01-6.29-3.2-10.02-3.2c-7.51%2C0-13.91%2C4.79-16.34%2C11.47%20H19.7V31.8c0-1.34%2C1.09-2.42%2C2.43-2.42h44.22L59.93%2C35.79z%20M32.75%2C26.11h-6.53v-1.63h6.53V26.11z%20M41.79%2C26.11l2.92-4.39%20c0.89-1.34%2C2.38-2.14%2C3.99-2.14h6.46c1.46%2C0%2C2.83%2C0.66%2C3.74%2C1.8l3.77%2C4.72H41.79z%20M49.9%2C96.74c-12.78%2C0-24.37-5.16-32.81-13.5%20l6.55-6.55h55.64c3.14%2C0%2C5.69-2.55%2C5.69-5.69V31.8c0-3.14-2.55-5.69-5.69-5.69h-5.06l8.92-8.92c8.34%2C8.45%2C13.5%2C20.04%2C13.5%2C32.81%20C96.64%2C75.77%2C75.67%2C96.74%2C49.9%2C96.74L49.9%2C96.74z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-size: cover;background-repeat: no-repeat;z-index: 1;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__profile{margin-right: 15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__name{color: #202020;display: inline-block;font-size:16px;-webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111;text-decoration: none;transition: all 0.2s ease-in-out;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__name:hover {-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__shop{text-decoration:none;color: #797979;display: block;margin-top: 10px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__height{} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__height::before{content:"H：";} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow{width: 116px;margin-left: auto;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .likeBtn {display: inline-flex;align-items: center;justify-content: center;margin: 0 auto; width: 116px; height: 36px;border-radius: 3px;background-image: linear-gradient(to right, #2d94d2 0%, #00b6dd 100%); color: #fff;position: relative;font-size: 11px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .likeBtn span {color: #202020;display: none;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .likeBtn::before {content: "";display: inline-flex;margin-right: 7px; width: 15px; height: 16px;background-color: transparent;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2015%2015.8%22%20style%3D%22enable-background%3Anew%200%200%2015%2015.8%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_1817%22%20transform%3D%22translate(0.5%200.5)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_1%22%20class%3D%22st0%22%20x1%3D%228.5%22%20y1%3D%229.6%22%20x2%3D%2214.5%22%20y2%3D%229.6%22%2F%3E%20%3Cline%20id%3D%22%E7%B7%9A_2%22%20class%3D%22st0%22%20x1%3D%2211.5%22%20y1%3D%226.6%22%20x2%3D%2211.5%22%20y2%3D%2212.6%22%2F%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_1%22%20class%3D%22st0%22%20cx%3D%226.5%22%20cy%3D%223.2%22%20r%3D%223.2%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1%22%20class%3D%22st1%22%20d%3D%22M13%2C13.4v1.4H0v-0.9c0.2-3.4%2C3-5.7%2C6.5-5.7h0.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .likeBtn.following {background-image: linear-gradient(to right, #EBECF0 0%, #EBECF0 100%);font-size: 0;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .likeBtn.following::before {width: 20px;height: 20px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22icon-follow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3B%7D%20.st1%7Bfill%3A%23DCDCDC%3Bstroke%3A%23DCDCDC%3Bstroke-miterlimit%3A10%3B%7D%20.st2%7Bfill%3A%23DCDCDC%3Bstroke%3A%23DCDCDC%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3Crect%20id%3D%22base%22%20class%3D%22st0%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_2%22%20class%3D%22st1%22%20cx%3D%2210%22%20cy%3D%225.8%22%20r%3D%223.2%22%2F%3E%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2%22%20class%3D%22st2%22%20d%3D%22M3.5%2C17.4v-0.9c0.2-3.4%2C3-5.7%2C6.5-5.7s6.3%2C2.3%2C6.5%2C5.7v0.9H3.5z%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .likeBtn.following span {display: inline;color: #202020;font-size: 11px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__follow .follower{margin: 6px 0 0;font-size: 0.8em;color: #797979;text-align: center;} #jf-bn-staffStylingDetail .jf-bn-coordinationInstagram{position: relative;display: inline-block; -webkit-box-shadow: inset 0 -1px 0 0 #111; box-shadow: inset 0 -1px 0 0 #111; text-decoration: none; transition: all 0.2s ease-in-out; font-size: 13px; margin-top: 16px;color: #202020;} #jf-bn-staffStylingDetail .jf-bn-coordinationInstagram:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} #jf-bn-staffStylingDetail .jf-bn-coordinationInstagram .jf-bn-staffInstagram{display: -webkit-box;display: flex; -webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;} #jf-bn-staffStylingDetail .jf-bn-coordinationInstagram .jf-bn-staffInstagram__name{width: 16px;height: 16px; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23202020%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M70.76%2C100H29.24C13.12%2C100%2C0%2C86.88%2C0%2C70.76V29.24C0%2C13.12%2C13.12%2C0%2C29.24%2C0h41.53%20C86.88%2C0%2C100%2C13.12%2C100%2C29.24v41.53C100%2C86.88%2C86.88%2C100%2C70.76%2C100z%20M29.24%2C9.32c-10.98%2C0-19.92%2C8.93-19.92%2C19.92v41.53%20c0%2C10.98%2C8.93%2C19.92%2C19.92%2C19.92h41.53c10.98%2C0%2C19.92-8.93%2C19.92-19.92V29.24c0-10.98-8.93-19.92-19.92-19.92H29.24z%22%2F%3E%20%3Cellipse%20transform%3D%22matrix(0.2283%20-0.9736%200.9736%200.2283%2036.4872%2092.6975)%22%20class%3D%22st0%22%20cx%3D%2276.72%22%20cy%3D%2223.33%22%20rx%3D%226.23%22%20ry%3D%226.23%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M50%2C75.85c-14.25%2C0-25.85-11.6-25.85-25.85c0-14.25%2C11.6-25.85%2C25.85-25.85c14.25%2C0%2C25.85%2C11.6%2C25.85%2C25.85%20C75.85%2C64.25%2C64.25%2C75.85%2C50%2C75.85z%20M50%2C33.47c-9.11%2C0-16.53%2C7.41-16.53%2C16.53c0%2C9.11%2C7.41%2C16.53%2C16.53%2C16.53%20c9.11%2C0%2C16.53-7.41%2C16.53-16.53C66.53%2C40.89%2C59.11%2C33.47%2C50%2C33.47z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-size: 16px;display: inline-block;font-size: 0;background-repeat: no-repeat;background-position: 50% 50%;margin-right: 10px;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-staffImage{width:70px} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-noImage{width: 70px;height: 70px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__image .jf-bn-noImage::before{width: 40px;height: 40px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__name{font-size:15px;} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__shop{margin-top: 6px;font-size:0.9em} #jf-bn-staffStylingDetail .jf-bn-coordinationStaffInfo__height{font-size:0.9em} } /* 公開日時・コメント・お気に入り・タグ */ #jf-bn-staffStylingDetail .jf-bn-coordinationPublicationDate{display: -webkit-flex;display: flex; -webkit-flex-flow: row nowrap;flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center;-webkit-align-items: center;align-items: center;margin-top: 42px;} #jf-bn-staffStylingDetail .jf-bn-coordinationPublicationDate::before{content:"";background-repeat: no-repeat;background-size: cover;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20325%20325%22%20style%3D%22enable-background%3Anew%200%200%20325%20325%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23001335%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M114.7%2C284.3L41%2C210.6L219.3%2C32.3l73.7%2C73.7L114.7%2C284.3z%20M34.1%2C223.6l67.6%2C67.6L0.4%2C325L34.1%2C223.6z%20M315.7%2C83.5l-12.8%2C12.8l-73.8-73.8l12.8-12.8c12.9-12.9%2C33.8-12.9%2C46.6%2C0l27.2%2C27.2C328.5%2C49.8%2C328.5%2C70.6%2C315.7%2C83.5z%22%2F%3E%3C%2Fsvg%3E');width: 14px;height: 14px;margin-right: 8px;display: inline-block;} #jf-bn-staffStylingDetail .jf-bn-coordinationComment{margin-top: 16px;line-height: 1.8;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish{margin-top: 46px;position: relative;text-align: center;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish .addToWishButton {display: inline-flex;align-items: center;justify-content: center;margin: 0 auto;width: 100%;max-width: 280px;height: 46px; color: #202020;border-radius: 5px; border: 1px solid #666;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish .addToWishButton span {color: #202020;display: none;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish .addToWishButton::before {content: "";display: inline-flex;margin-right: 7px; width: 16px; height: 16px;background-color: transparent;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23202020%3Bstroke-width%3A7%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3Anone%3Bstroke%3A%23202020%3Bstroke-width%3A7%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M97.27%2C43.08%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M94.71%2C43.47c1.05-3.22%2C1.65-6.43%2C1.65-9.56c0-14.08-11.48-25.54-25.59-25.54v0c-8.37%2C0-16.07%2C4.05-20.8%2C10.64%20c-4.74-6.6-12.43-10.64-20.8-10.64c-14.11%2C0-25.59%2C11.46-25.59%2C25.54c0%2C25.06%2C38.26%2C54.94%2C41.69%2C57.57%20c1.23%2C1.24%2C2.92%2C1.94%2C4.7%2C1.94s3.47-0.7%2C4.7-1.94c0.96-0.73%2C4.62-3.58%2C9.4-7.85%22%2F%3E%20%3Cg%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2259.81%22%20y1%3D%2261.29%22%20x2%3D%2296.07%22%20y2%3D%2261.29%22%2F%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2277.76%22%20y1%3D%2243.16%22%20x2%3D%2277.76%22%20y2%3D%2279.42%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish .addToWishButton._on {background: #EBECF0;font-size: 0; border: none;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish .addToWishButton._on::before {width: 16px;height: 16px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2_00000085953400863823705990000013323258415696971190_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2035%2031%22%20style%3D%22enable-background%3Anew%200%200%2035%2031%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232D94D2%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M33.6%2C9.8c0-2.2-0.7-4.4-2-6.1C31.4%2C3.4%2C31.2%2C3.2%2C31%2C3c-0.2-0.2-0.5-0.5-0.7-0.7c0%2C0-0.1-0.1-0.1-0.1%20C30.1%2C2.1%2C30%2C2.1%2C29.9%2C2l-0.1-0.1c-0.2-0.1-0.4-0.3-0.6-0.4l-0.1-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c0%2C0-0.1%2C0-0.1-0.1S28.4%2C1%2C28.4%2C1%20c-0.2-0.1-0.4-0.2-0.6-0.3c-0.1%2C0-0.2-0.1-0.3-0.1c-0.2-0.1-0.4-0.1-0.6-0.2c-0.1%2C0-0.2-0.1-0.3-0.1c-0.3-0.1-0.6-0.1-0.9-0.2%20c-0.1%2C0-0.2%2C0-0.2%2C0c-0.2%2C0-0.5%2C0-0.7%2C0c0%2C0-0.1%2C0-0.1%2C0c-0.1%2C0-0.1%2C0-0.2%2C0c-0.2%2C0-0.4%2C0-0.7%2C0l-0.1%2C0c-2.1%2C0.2-4%2C1.2-5.4%2C2.8%20l-1%2C1.1l-1-1.1c-1.4-1.6-3.3-2.6-5.4-2.8l-0.1%2C0c-0.2%2C0-0.4%2C0-0.7%2C0c-0.1%2C0-0.1%2C0-0.2%2C0c0%2C0-0.1%2C0-0.1%2C0c-0.2%2C0-0.5%2C0-0.7%2C0%20c-0.1%2C0-0.2%2C0-0.2%2C0c-0.3%2C0-0.6%2C0.1-0.9%2C0.2C8%2C0.4%2C7.9%2C0.4%2C7.8%2C0.4C7.6%2C0.5%2C7.4%2C0.6%2C7.2%2C0.6C7.1%2C0.7%2C7%2C0.7%2C6.9%2C0.7%20C6.7%2C0.8%2C6.5%2C0.9%2C6.3%2C1c0%2C0-0.1%2C0-0.1%2C0.1s-0.1%2C0-0.1%2C0.1C5.9%2C1.2%2C5.7%2C1.3%2C5.5%2C1.4L5.4%2C1.5C5.2%2C1.6%2C5.1%2C1.7%2C4.9%2C1.9%20c0%2C0-0.1%2C0.1-0.1%2C0.1C4.6%2C2.1%2C4.5%2C2.1%2C4.4%2C2.2c0%2C0-0.1%2C0.1-0.1%2C0.1C4.1%2C2.5%2C3.9%2C2.8%2C3.6%2C3C3.5%2C3.2%2C3.3%2C3.4%2C3.1%2C3.7%20c-1.3%2C1.8-2%2C3.9-2%2C6.1c0%2C2.5%2C0.9%2C4.9%2C2.6%2C6.8l8%2C8.7l4.5%2C5c0%2C0%2C0.1%2C0.1%2C0.1%2C0.1c0%2C0%2C0.1%2C0%2C0.1%2C0.1c0%2C0%2C0%2C0%2C0%2C0c0.1%2C0%2C0.1%2C0.1%2C0.2%2C0.1%20l0.1%2C0c0.1%2C0%2C0.1%2C0.1%2C0.2%2C0.1c0%2C0%2C0.1%2C0%2C0.1%2C0c0.1%2C0%2C0.1%2C0%2C0.2%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0s0.1%2C0%2C0.1%2C0c0.1%2C0%2C0.1%2C0%2C0.2%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0%20c0.1%2C0%2C0.1%2C0%2C0.2-0.1l0.1%2C0c0.1%2C0%2C0.1-0.1%2C0.2-0.1c0%2C0%2C0%2C0%2C0%2C0c0%2C0%2C0.1%2C0%2C0.1-0.1c0%2C0%2C0.1-0.1%2C0.1-0.1l4.5-5l8-8.7%20C32.7%2C14.7%2C33.6%2C12.3%2C33.6%2C9.8z%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish .addToWishButton._on span {display: inline;color: #202020;font-size: 13px;} .jf-bn-coordinationTagList{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;margin-top: 30px;} .jf-bn-coordinationTagList::before{content:"タグ";height: 40px;background: url(https://www.jeansfactory.jp/img/staffstyling/icon_tag.png) no-repeat;background-size: 36px;background-position: 0 50%;padding: 0 0 0 40px;line-height: 40px;color: #808080;font-size: 14px;display: block;margin-bottom: 10px;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .jf-bn-coordinationTagList li{margin-right: 6px;margin-bottom: 6px;} .jf-bn-coordinationTagList li a{background: #EBECF0;border: 1px solid #EBECF0;transition: all 300ms ease-out 0ms; text-decoration: none; border-radius: 4px; display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center;height: 40px; -webkit-justify-content: center;justify-content: center; font-size: 0.9em;padding: 0 15px;color: #202020;} .jf-bn-coordinationTagList li a:hover{border: #001335 1px solid;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ #jf-bn-staffStylingDetail .jf-bn-coordinationPublicationDate{margin-top: 32px;} #jf-bn-staffStylingDetail .jf-bn-coordinationAddToWish{margin-top: 30px;} } /* 着用アイテム */ #jf-bn-staffStylingDetail .jf-bn-coordinationProduct{ margin-top: 60px;} #jf-bn-staffStylingDetail .jf-bn-coordinationProduct__title {font-size: 21px;font-weight: 400;} #jf-bn-staffStylingDetail .jf-bn-coordinationProduct__list {margin-top: 30px;} #jf-bn-staffStylingDetail .jf-bn-coordinationProduct__list__item:nth-of-type(n+2){margin-top: 16px} #jf-bn-staffStylingDetail .jf-bn-productListItem {-webkit-transition: .5s ease-in-out;transition: .5s ease-in-out;position: relative;padding: 12px;display: -webkit-flex;display: flex;text-decoration: none;color: #050505;} #jf-bn-staffStylingDetail .jf-bn-productListItem:hover {box-shadow:-5px -5px 15px #e8e9ea, 5px 5px 15px #BABECC;} #jf-bn-staffStylingDetail .jf-bn-productListItem .jf-bn-productListItem__imageContainer{width: 140px; margin: -12px 12px -12px -12px;} #jf-bn-staffStylingDetail .jf-bn-productListItem__image{} #jf-bn-staffStylingDetail .jf-bn-productListItem__image img{display: block;width: 100%} #jf-bn-staffStylingDetail .jf-bn-productListItem .jf-bn-productListItem__infoContainer{width: -webkit-calc(100% - 140px);width: calc(100% - 140px);font-size: 13px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;} #jf-bn-staffStylingDetail .jf-bn-productListItem__infoContainer .jf-bn-productName{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;font-size: 1em; font-weight: 400;} #jf-bn-staffStylingDetail .jf-bn-productName__variation{font-size:0.9em;color: #797979;} #jf-bn-staffStylingDetail .jf-bn-productName__variation::before{content:"（";} #jf-bn-staffStylingDetail .jf-bn-productName__variation::after{content:"）";} #jf-bn-staffStylingDetail .jf-bn-productName__variation .jf-bn-productName__variation__x + .jf-bn-productName__variation__y::before{content:",";} #jf-bn-staffStylingDetail .jf-bn-productListItem__prices{margin-top: 8px; display: -webkit-flex; display: flex;align-items: center;} #jf-bn-staffStylingDetail .jf-bn-price__addon__sale{background: #f90; color: #fff;font-size: 0.8em; height: 20px;line-height: 20px;padding: 0 6px;border-radius: 3px;margin-right: 5px;} #jf-bn-staffStylingDetail .jf-bn-price__currencyMark{margin: 0;padding: 0} #jf-bn-staffStylingDetail .jf-bn-price__value{margin: 0 2px;padding: 0} #jf-bn-staffStylingDetail .jf-bn-price__addon__label{margin: 0;padding: 0} @media screen and (max-width:834px){ #jf-bn-staffStylingDetail .jf-bn-coordinationProduct__title {font-size: 18px;} } @media screen and (max-width:640px){ #jf-bn-staffStylingDetail .jf-bn-coordinationProduct{ margin-top: 46px;} #jf-bn-staffStylingDetail .jf-bn-productListItem .jf-bn-productListItem__imageContainer{width: 120px;} #jf-bn-staffStylingDetail .jf-bn-productListItem .jf-bn-productListItem__infoContainer{width: -webkit-calc(100% - 120px);width: calc(100% - 120px);} } /* その他のスタイリング */ #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog {margin: 100px 0 0;position:relative;z-index: 0;} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog:last-of-type {margin-bottom: 120px} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__title{font-size:21px;font-weight:400;position:relative;display: block;line-height: 1.8;max-width: 1024px;margin: 0 auto;} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__title::after{content:"";width: 80px;height: 1px;display: inline-block;background-color: #200706;position: relative;top: -8px;left: 10px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list {margin: 36px auto 0;max-width: 1024px;} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+21){display:none} @media screen and (max-width:834px){ #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog {margin: 80px 0 0;} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog:last-of-type {margin-bottom: 100px} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__title{font-size:18px;} } @media screen and (max-width:640px){ #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog {margin: 60px 0 0;} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog:last-of-type {margin-bottom: 80px} #jf-bn-staffStylingDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list {margin: 30px auto 0;} } /* ================================== staffList ================================== */ .shopStaffList-container{margin:60px auto 120px;max-width: -webkit-calc(1124px - 100px);max-width: calc(1124px - 100px);padding: 0 50px;} .shopStaffList-container .pageTitle{font-size:24px;font-weight:400;position:relative;display: -webkit-box;display: flex;flex-wrap: wrap; align-items: center;} .shopStaffList-container .shopStaffList-layout{display: -webkit-flex;display: flex;margin-top: 50px;} .shopStaffList-container .shopStaffList-layout__menu{width: 280px;margin-right: 30px;} .shopStaffList-container .shopStaffList-layout__menuInner{/*position:sticky;*/top:20px} .shopStaffList-container .shopStaffList-layout__content{width: -webkit-calc(100% - 310px);width: calc(100% - 310px);} @media screen and (max-width:1100px){ .shopStaffList-container .shopStaffList-layout{-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;} } @media screen and (max-width:834px){ .shopStaffList-container{padding: 0;} .shopStaffList-container .pageTitle{font-size:20px;padding: 0 30px;} .shopStaffList-container .pageTitle span {display: none;} .shopStaffList-container .shopStaffList-layout__menu{width: 100%;margin-right: 0;} .shopStaffList-container .shopStaffList-layout__menuInner{position: inherit;top: inherit;margin: 0 30px;} .shopStaffList-container .shopStaffList-layout__content{width: 100%;margin-top: 0;margin-right: 0;} } @media screen and (max-width:640px){ .shopStaffList-container{margin: 30px auto 80px;} .shopStaffList-container .pageTitle{padding: 0 20px;} .shopStaffList-container .shopStaffList-layout{margin-top:30px} .shopStaffList-container .shopStaffList-layout__menuInner{margin: 0 20px;} } /* スタッフリスト */ .jf-bn-staffList__list {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap;flex-wrap: wrap;margin: 50px 0;} .jf-bn-staffList__list .jf-bn-staffList__list__item {width: -webkit-calc(100% / 3 - 10px);width: calc(100% / 3 - 10px);margin-right: 15px;position: relative;} .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(3n){margin-right:0;} .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(n+4){margin-top: 30px;} /* -画像 */ .jf-bn-staffList__list .jf-bn-staffListItem__image{} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-staffListItem__image__link{width: 130px;margin: 0 auto;display: block;transition: .5s;border-radius: 50%;border: 4px solid #fff;} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-staffListItem__image__link:hover{box-shadow: -5px -5px 10px #e8e9ea, 5px 5px 10px #BABECC;} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-staffListItem__image__link img{border-radius: 50%;width: 100%;display: block;transition: .5s;} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-noImage{background: #EBECF0;border-radius: 50%;z-index: 1;font-size: 0;position: relative;width: 130px;height: 130px;} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-noImage::before{content:"";display:block;position:absolute;width: 50px;height: 50px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23333333%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M49.9%2C0c-27.57%2C0-50%2C22.43-50%2C50s22.43%2C50%2C50%2C50c27.57%2C0%2C50-22.43%2C50-50S77.47%2C0%2C49.9%2C0L49.9%2C0z%20M49.9%2C3.26%20c11.82%2C0%2C22.62%2C4.42%2C30.86%2C11.68L69.61%2C26.11h-2.78c-0.02-0.02-0.02-0.05-0.04-0.07l-5.33-6.69c-1.54-1.93-3.83-3.03-6.29-3.03%20H48.7c-2.7%2C0-5.21%2C1.34-6.71%2C3.59l-4.13%2C6.2h-1.86v-3.26c0-0.9-0.73-1.63-1.63-1.63h-9.79c-0.9%2C0-1.63%2C0.73-1.63%2C1.63v3.26h-0.84%20c-3.14%2C0-5.69%2C2.55-5.69%2C5.69V71c0%2C2.24%2C1.31%2C4.16%2C3.19%2C5.08l-4.77%2C4.78C7.59%2C72.62%2C3.16%2C61.82%2C3.16%2C50%20C3.16%2C24.23%2C24.13%2C3.26%2C49.9%2C3.26L49.9%2C3.26z%20M22.12%2C73.43c-1.34%2C0-2.43-1.09-2.43-2.42V47.32h13.02%20c-0.14%2C0.88-0.23%2C1.77-0.23%2C2.68c0%2C3.73%2C1.19%2C7.19%2C3.2%2C10.02L22.28%2C73.43H22.12z%20M42.01%2C50c0-4.35%2C3.54-7.89%2C7.89-7.89%20c1.09%2C0%2C2.13%2C0.22%2C3.08%2C0.63L42.64%2C53.08C42.24%2C52.13%2C42.01%2C51.09%2C42.01%2C50z%20M57.79%2C50c0%2C4.35-3.54%2C7.89-7.89%2C7.89%20c-2.07%2C0-3.93-0.82-5.34-2.12l11.11-11.11C56.97%2C46.07%2C57.79%2C47.93%2C57.79%2C50z%20M42.24%2C58.09c2%2C1.9%2C4.69%2C3.07%2C7.66%2C3.07%20c6.15%2C0%2C11.15-5%2C11.15-11.15c0-2.97-1.17-5.66-3.07-7.66l2.12-2.12c2.44%2C2.54%2C3.94%2C5.98%2C3.94%2C9.77c0%2C7.8-6.35%2C14.15-14.15%2C14.15%20c-3.79%2C0-7.23-1.51-9.78-3.95L42.24%2C58.09z%20M55.4%2C40.31c-1.63-0.93-3.5-1.46-5.5-1.46c-6.15%2C0-11.15%2C5-11.15%2C11.15%20c0%2C2%2C0.54%2C3.88%2C1.46%2C5.5l-2.18%2C2.18c-1.44-2.21-2.28-4.85-2.28-7.68c0-7.8%2C6.35-14.15%2C14.15-14.15c2.83%2C0%2C5.46%2C0.84%2C7.68%2C2.28%20L55.4%2C40.31z%20M37.82%2C62.51c3.13%2C3.03%2C7.39%2C4.9%2C12.08%2C4.9c9.6%2C0%2C17.41-7.81%2C17.41-17.41c0-0.91-0.09-1.8-0.23-2.68h1.28%20c0.89%2C1.73%2C2.67%2C2.93%2C4.74%2C2.93s3.86-1.2%2C4.74-2.93h3.86V71c0%2C1.34-1.09%2C2.42-2.43%2C2.42H26.9L37.82%2C62.51z%20M71.02%2C44.91%20c0-1.15%2C0.93-2.08%2C2.08-2.08c1.15%2C0%2C2.08%2C0.93%2C2.08%2C2.08c0%2C1.15-0.93%2C2.08-2.08%2C2.08C71.96%2C46.99%2C71.02%2C46.06%2C71.02%2C44.91z%20M81.7%2C44.06h-3.34c-0.41-2.54-2.6-4.49-5.26-4.49s-4.85%2C1.95-5.26%2C4.49h-1.6c-0.84-2.31-2.16-4.4-3.83-6.14l8.55-8.55h8.32%20c1.34%2C0%2C2.43%2C1.09%2C2.43%2C2.42L81.7%2C44.06L81.7%2C44.06z%20M59.93%2C35.79c-2.84-2.01-6.29-3.2-10.02-3.2c-7.51%2C0-13.91%2C4.79-16.34%2C11.47%20H19.7V31.8c0-1.34%2C1.09-2.42%2C2.43-2.42h44.22L59.93%2C35.79z%20M32.75%2C26.11h-6.53v-1.63h6.53V26.11z%20M41.79%2C26.11l2.92-4.39%20c0.89-1.34%2C2.38-2.14%2C3.99-2.14h6.46c1.46%2C0%2C2.83%2C0.66%2C3.74%2C1.8l3.77%2C4.72H41.79z%20M49.9%2C96.74c-12.78%2C0-24.37-5.16-32.81-13.5%20l6.55-6.55h55.64c3.14%2C0%2C5.69-2.55%2C5.69-5.69V31.8c0-3.14-2.55-5.69-5.69-5.69h-5.06l8.92-8.92c8.34%2C8.45%2C13.5%2C20.04%2C13.5%2C32.81%20C96.64%2C75.77%2C75.67%2C96.74%2C49.9%2C96.74L49.9%2C96.74z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-size: cover;background-repeat: no-repeat;z-index: 1;} /* -スタッフ情報 */ .jf-bn-staffList__list .jf-bn-staffListItem__profile{margin-top: 15px;display: flex;display: -ms-flexbox;display: -webkit-flex;flex-flow: row wrap;-ms-flex-flow: row wrap;-webkit-justify-content: center;justify-content: center;} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__name{color: #202020;display: inline-block;font-size:16px;-webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111;text-decoration: none;transition: all 0.2s ease-in-out;-webkit-box-ordinal-group: 1;-ms-flex-order: 1;-webkit-order: 1;order: 1;} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__name:hover {-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__height{display:none} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__profile{-webkit-box-ordinal-group: 3;-ms-flex-order: 3;-webkit-order: 3; order: 3; margin-top: 10px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__shop{-webkit-box-ordinal-group: 2;-ms-flex-order: 2;-webkit-order: 2;order: 2;color: #797979;font-size: 0.9em;margin-top: 5px;text-decoration: none;display: block;width: 100%;text-align: center;pointer-events: none;} @media screen and (max-width:834px){ .jf-bn-staffList__list{margin:50px 30px} } @media screen and (max-width:640px){ .jf-bn-staffList__list {margin:30px 20px} .jf-bn-staffList__list .jf-bn-staffList__list__item {width: -webkit-calc(100% / 2 - 7.5px);width: calc(100% / 2 - 7.5px);} .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(3n){margin-right:15px;} .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(2n){margin-right:0;} .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(n+3){margin-top: 20px;} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-staffListItem__image__link{width: 100px;} .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-noImage{width: 100px;height: 100px;} .jf-bn-staffList__list .jf-bn-staffListItem__profile{margin-top: 10px;} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__name{font-size:15px;} .jf-bn-staffList__list .jf-bn-staffListItem__profile .jf-bn-staffListItem__profile__profile{-webkit-line-clamp: 2;font-size:0.9em;line-height:1.6} } /* ================================== staffDetail ================================== */ .staffDetail-container{margin:60px auto 120px;max-width: -webkit-calc(1124px - 100px);max-width: calc(1124px - 100px);padding: 0 50px;} @media screen and (max-width:834px){ .staffDetail-container{padding: 0;} } @media screen and (max-width:640px){ .staffDetail-container{margin: 30px auto 80px;} } .jf-bn-staffDetail{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap;flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center;align-items: center;} .jf-bn-staffDetail .jf-bn-staffDetail__image{width: 40%;margin-right: 60px;} .jf-bn-staffDetail .jf-bn-staffDetail__image .jf-bn-staffImage{} .jf-bn-staffDetail .jf-bn-staffDetail__image .jf-bn-staffImage img{border-radius: 50%;width: 100%;display: block;} .jf-bn-staffDetail .jf-bn-staffDetail__image .jf-bn-staffImage .jf-bn-noImage{background: #EBECF0;border-radius: 50%;z-index: 0;font-size: 0;position: relative;width: 100%;padding-top: 100%;} .jf-bn-staffDetail .jf-bn-staffDetail__image .jf-bn-staffImage .jf-bn-noImage::before{content:"";display:block;position:absolute;width: 80px;height: 80px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23333333%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M49.9%2C0c-27.57%2C0-50%2C22.43-50%2C50s22.43%2C50%2C50%2C50c27.57%2C0%2C50-22.43%2C50-50S77.47%2C0%2C49.9%2C0L49.9%2C0z%20M49.9%2C3.26%20c11.82%2C0%2C22.62%2C4.42%2C30.86%2C11.68L69.61%2C26.11h-2.78c-0.02-0.02-0.02-0.05-0.04-0.07l-5.33-6.69c-1.54-1.93-3.83-3.03-6.29-3.03%20H48.7c-2.7%2C0-5.21%2C1.34-6.71%2C3.59l-4.13%2C6.2h-1.86v-3.26c0-0.9-0.73-1.63-1.63-1.63h-9.79c-0.9%2C0-1.63%2C0.73-1.63%2C1.63v3.26h-0.84%20c-3.14%2C0-5.69%2C2.55-5.69%2C5.69V71c0%2C2.24%2C1.31%2C4.16%2C3.19%2C5.08l-4.77%2C4.78C7.59%2C72.62%2C3.16%2C61.82%2C3.16%2C50%20C3.16%2C24.23%2C24.13%2C3.26%2C49.9%2C3.26L49.9%2C3.26z%20M22.12%2C73.43c-1.34%2C0-2.43-1.09-2.43-2.42V47.32h13.02%20c-0.14%2C0.88-0.23%2C1.77-0.23%2C2.68c0%2C3.73%2C1.19%2C7.19%2C3.2%2C10.02L22.28%2C73.43H22.12z%20M42.01%2C50c0-4.35%2C3.54-7.89%2C7.89-7.89%20c1.09%2C0%2C2.13%2C0.22%2C3.08%2C0.63L42.64%2C53.08C42.24%2C52.13%2C42.01%2C51.09%2C42.01%2C50z%20M57.79%2C50c0%2C4.35-3.54%2C7.89-7.89%2C7.89%20c-2.07%2C0-3.93-0.82-5.34-2.12l11.11-11.11C56.97%2C46.07%2C57.79%2C47.93%2C57.79%2C50z%20M42.24%2C58.09c2%2C1.9%2C4.69%2C3.07%2C7.66%2C3.07%20c6.15%2C0%2C11.15-5%2C11.15-11.15c0-2.97-1.17-5.66-3.07-7.66l2.12-2.12c2.44%2C2.54%2C3.94%2C5.98%2C3.94%2C9.77c0%2C7.8-6.35%2C14.15-14.15%2C14.15%20c-3.79%2C0-7.23-1.51-9.78-3.95L42.24%2C58.09z%20M55.4%2C40.31c-1.63-0.93-3.5-1.46-5.5-1.46c-6.15%2C0-11.15%2C5-11.15%2C11.15%20c0%2C2%2C0.54%2C3.88%2C1.46%2C5.5l-2.18%2C2.18c-1.44-2.21-2.28-4.85-2.28-7.68c0-7.8%2C6.35-14.15%2C14.15-14.15c2.83%2C0%2C5.46%2C0.84%2C7.68%2C2.28%20L55.4%2C40.31z%20M37.82%2C62.51c3.13%2C3.03%2C7.39%2C4.9%2C12.08%2C4.9c9.6%2C0%2C17.41-7.81%2C17.41-17.41c0-0.91-0.09-1.8-0.23-2.68h1.28%20c0.89%2C1.73%2C2.67%2C2.93%2C4.74%2C2.93s3.86-1.2%2C4.74-2.93h3.86V71c0%2C1.34-1.09%2C2.42-2.43%2C2.42H26.9L37.82%2C62.51z%20M71.02%2C44.91%20c0-1.15%2C0.93-2.08%2C2.08-2.08c1.15%2C0%2C2.08%2C0.93%2C2.08%2C2.08c0%2C1.15-0.93%2C2.08-2.08%2C2.08C71.96%2C46.99%2C71.02%2C46.06%2C71.02%2C44.91z%20M81.7%2C44.06h-3.34c-0.41-2.54-2.6-4.49-5.26-4.49s-4.85%2C1.95-5.26%2C4.49h-1.6c-0.84-2.31-2.16-4.4-3.83-6.14l8.55-8.55h8.32%20c1.34%2C0%2C2.43%2C1.09%2C2.43%2C2.42L81.7%2C44.06L81.7%2C44.06z%20M59.93%2C35.79c-2.84-2.01-6.29-3.2-10.02-3.2c-7.51%2C0-13.91%2C4.79-16.34%2C11.47%20H19.7V31.8c0-1.34%2C1.09-2.42%2C2.43-2.42h44.22L59.93%2C35.79z%20M32.75%2C26.11h-6.53v-1.63h6.53V26.11z%20M41.79%2C26.11l2.92-4.39%20c0.89-1.34%2C2.38-2.14%2C3.99-2.14h6.46c1.46%2C0%2C2.83%2C0.66%2C3.74%2C1.8l3.77%2C4.72H41.79z%20M49.9%2C96.74c-12.78%2C0-24.37-5.16-32.81-13.5%20l6.55-6.55h55.64c3.14%2C0%2C5.69-2.55%2C5.69-5.69V31.8c0-3.14-2.55-5.69-5.69-5.69h-5.06l8.92-8.92c8.34%2C8.45%2C13.5%2C20.04%2C13.5%2C32.81%20C96.64%2C75.77%2C75.67%2C96.74%2C49.9%2C96.74L49.9%2C96.74z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-size: cover;background-repeat: no-repeat;z-index: 1;} .jf-bn-staffDetail .jf-bn-staffDetail__data{ width: -webkit-calc(60% - 60px);width: calc(60% - 60px);} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__name{position: relative;font-size: 34px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__name:before {position: absolute;top: 50%;left: -112px;content: ''; display: block; width: 83px; height: 1px;background-color: #181818;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__shop{display: block; color: #202020;text-decoration: none;font-size: 16px;margin-top: 12px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__height{display: block;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__height::before{content:"H：";} .jf-bn-staffDetail .jf-bn-staffDetail__data .follower{margin: 6px 0 0;font-size: 0.8em;color: #797979;} .jf-bn-staffDetail .jf-bn-staffDetail__data .follower .favorite-count{font-size: 1.2em;font-weight: bold;margin-right: 1px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__instagram{ position: relative;display: inline-block;background-color: #fff; border-radius: 32px;box-shadow: 10px 25px 30px rgba(0,0,0,.08);color: #fff;text-decoration: none;font-size: 13px;line-height: 32px;height: 32px;text-align: center;padding: 0 20px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;background-image: -webkit-linear-gradient(left, #ffc551 0%, #fd2366 33.33%, #ee20b0 66.66%, #9733df 100%);background-image: linear-gradient(to right, #ffc551 0%, #fd2366 33.33%, #ee20b0 66.66%, #9733df 100%);margin-top: 20px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__instagram:hover{box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);transform: translateY(-4px);} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__instagram .jf-bn-staffInstagram{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex; display: flex; -webkit-box-align: center;-ms-flex-align: center; -webkit-align-items: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffInstagram__name{width: 16px;height: 16px; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20100%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M70.76%2C100H29.24C13.12%2C100%2C0%2C86.88%2C0%2C70.76V29.24C0%2C13.12%2C13.12%2C0%2C29.24%2C0h41.53%20C86.88%2C0%2C100%2C13.12%2C100%2C29.24v41.53C100%2C86.88%2C86.88%2C100%2C70.76%2C100z%20M29.24%2C9.32c-10.98%2C0-19.92%2C8.93-19.92%2C19.92v41.53%20c0%2C10.98%2C8.93%2C19.92%2C19.92%2C19.92h41.53c10.98%2C0%2C19.92-8.93%2C19.92-19.92V29.24c0-10.98-8.93-19.92-19.92-19.92H29.24z%22%2F%3E%20%3Cellipse%20transform%3D%22matrix(0.2283%20-0.9736%200.9736%200.2283%2036.4872%2092.6975)%22%20class%3D%22st0%22%20cx%3D%2276.72%22%20cy%3D%2223.33%22%20rx%3D%226.23%22%20ry%3D%226.23%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M50%2C75.85c-14.25%2C0-25.85-11.6-25.85-25.85c0-14.25%2C11.6-25.85%2C25.85-25.85c14.25%2C0%2C25.85%2C11.6%2C25.85%2C25.85%20C75.85%2C64.25%2C64.25%2C75.85%2C50%2C75.85z%20M50%2C33.47c-9.11%2C0-16.53%2C7.41-16.53%2C16.53c0%2C9.11%2C7.41%2C16.53%2C16.53%2C16.53%20c9.11%2C0%2C16.53-7.41%2C16.53-16.53C66.53%2C40.89%2C59.11%2C33.47%2C50%2C33.47z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-size: 16px;display: inline-block;font-size: 0;background-repeat: no-repeat;background-position: 50% 50%;margin-right: 10px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffInstagram__account{} .jf-bn-staffDetail .jf-bn-staffDetail__profile{margin-top: 50px;font-size: 15px;} .jf-bn-staffDetail .jf-bn-staffDetail__follow{width: 100%;text-align: center;margin-top: 46px;position: relative;} .jf-bn-staffDetail .jf-bn-staffDetail__follow .likeBtn {position: relative;display: inline-flex;align-items: center;justify-content: center;margin: 0 auto; width: 100%; max-width: 280px;height: 46px; color: #202020;border-radius: 5px;border: 1px solid #666;} .jf-bn-staffDetail .jf-bn-staffDetail__follow .likeBtn span {color: #202020;display: none;} .jf-bn-staffDetail .jf-bn-staffDetail__follow .likeBtn::before {content: "";display: inline-flex;margin-right: 7px; width: 16px; height: 17px;background-color: transparent;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2015%2015.8%22%20style%3D%22enable-background%3Anew%200%200%2015%2015.8%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23202020%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3Anone%3Bstroke%3A%23202020%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_1817%22%20transform%3D%22translate(0.5%200.5)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_1%22%20class%3D%22st0%22%20x1%3D%228.5%22%20y1%3D%229.6%22%20x2%3D%2214.5%22%20y2%3D%229.6%22%2F%3E%20%3Cline%20id%3D%22%E7%B7%9A_2%22%20class%3D%22st0%22%20x1%3D%2211.5%22%20y1%3D%226.6%22%20x2%3D%2211.5%22%20y2%3D%2212.6%22%2F%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_1%22%20class%3D%22st0%22%20cx%3D%226.5%22%20cy%3D%223.2%22%20r%3D%223.2%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1%22%20class%3D%22st1%22%20d%3D%22M13%2C13.4v1.4H0v-0.9c0.2-3.4%2C3-5.7%2C6.5-5.7h0.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat: no-repeat; background-position: 50% 50%;} .jf-bn-staffDetail .jf-bn-staffDetail__follow .likeBtn.following {background: #EBECF0;font-size: 0;border: 1px solid #EBECF0;} .jf-bn-staffDetail .jf-bn-staffDetail__follow .likeBtn.following::before {width: 21px;height: 21px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22icon-follow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3B%7D%20.st1%7Bfill%3A%23DCDCDC%3Bstroke%3A%23DCDCDC%3Bstroke-miterlimit%3A10%3B%7D%20.st2%7Bfill%3A%23DCDCDC%3Bstroke%3A%23DCDCDC%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3Crect%20id%3D%22base%22%20class%3D%22st0%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_2%22%20class%3D%22st1%22%20cx%3D%2210%22%20cy%3D%225.8%22%20r%3D%223.2%22%2F%3E%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2%22%20class%3D%22st2%22%20d%3D%22M3.5%2C17.4v-0.9c0.2-3.4%2C3-5.7%2C6.5-5.7s6.3%2C2.3%2C6.5%2C5.7v0.9H3.5z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 50% 50%;} .jf-bn-staffDetail .jf-bn-staffDetail__follow .likeBtn.following span {display: inline;color: #202020;font-size: 13px;} #jf-bn-staffDetail .jf-bn-coordinationCatalog {margin: 0;padding: 0;} #jf-bn-staffDetail .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list{margin: 0;} @media screen and (max-width:834px){ .jf-bn-staffDetail{margin:0 30px} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__name{font-size: 28px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__shop{font-size: 14px;} .jf-bn-staffDetail .jf-bn-staffDetail__profile{margin-top: 40px;} #jf-bn-staffDetail .jf-bn-tabContents{margin: 72px 30px 0;} } @media screen and (max-width:640px){ .jf-bn-staffDetail{margin:0 20px} .jf-bn-staffDetail .jf-bn-staffDetail__image{width: 100%;margin-right: 0;} .jf-bn-staffDetail .jf-bn-staffDetail__image .jf-bn-staffImage{width:50%; margin:0 auto;max-width:200px} .jf-bn-staffDetail .jf-bn-staffDetail__data{width: 100%;margin-top:30px;text-align: center;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__name{font-size: 24px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__name:before {width: 1px;height: 36px;top: -49px;left: 50%;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__shop{font-size: 12px;} .jf-bn-staffDetail .jf-bn-staffDetail__data .jf-bn-staffDetail__instagram{margin-top: 10px;} .jf-bn-staffDetail .jf-bn-staffDetail__profile{margin-top: 30px;font-size: 14px;} .jf-bn-staffDetail .jf-bn-staffDetail__follow{margin-top: 30px;} #jf-bn-staffDetail .jf-bn-tabContents{margin: 48px 20px 0;} } /* ブログリスト */ .jf-bn-staffDetail__blogList{} .jf-bn-staffDetail__blogList__item{overflow: hidden;display: -webkit-flex;display: flex;} .jf-bn-staffDetail__blogList__item:nth-of-type(n+2){margin-top: 30px;} .jf-bn-staffDetail__blogList__item .blogList__img{overflow: hidden;position: relative;min-width: 240px;max-width: 240px;margin-right: 30px;} .jf-bn-staffDetail__blogList__item .blogList__img img{width: 100%;height: 100%;display: block;-ms-transition: 0.3s;transition: 0.3s;} .jf-bn-staffDetail__blogList__item .blogList__img img:hover{-webkit-transform: scale(1.1);transform: scale(1.1);} .jf-bn-staffDetail__blogList__item .bloglist__info{} .jf-bn-staffDetail__blogList__item .info__header{display: -webkit-flex;display: flex;color: #999;} .jf-bn-staffDetail__blogList__item .info__header .date{} .jf-bn-staffDetail__blogList__item .info__header .shop{margin-left: 12px;} .jf-bn-staffDetail__blogList__item .info__title{font-size: 21px;margin: 16px 0 0;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;} .jf-bn-staffDetail__blogList__item .info__txt{font-size: 14px;margin: 20px 0 0;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;} .jf-bn-staffDetail__blogList__item .info__more{margin: 16px 0 0;color: #202020;display: inline-block; -webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111;text-decoration: none;transition: all 0.2s ease-in-out;} .jf-bn-staffDetail__blogList__item .info__more:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} .jf-bn-staffDetail__blogList__footer { margin-top: 32px;text-align: center;} .jf-bn-staffDetail__blogList__footer > a{font-size: 14px; color: #202020;line-height: 1.8;-webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111; text-decoration: none;transition: all 0.2s ease-in-out;display: inline-block;} .jf-bn-staffDetail__blogList__footer > a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ .jf-bn-staffDetail__blogList__item:nth-of-type(n+2){margin-top: 20px;} .jf-bn-staffDetail__blogList__item .blogList__img{min-width: 130px;max-width: 130px;margin-right: 12px;} .jf-bn-staffDetail__blogList__item .info__header{font-size: 0.9em} .jf-bn-staffDetail__blogList__item .info__header .shop{display: none} .jf-bn-staffDetail__blogList__item .info__title{font-size: 13px;margin: 12px 0 0;-webkit-line-clamp: 2;} .jf-bn-staffDetail__blogList__item .info__txt{font-size: 11px;margin: 14px 0 0;-webkit-line-clamp: 1;} .jf-bn-staffDetail__blogList__item .info__more{margin: 12px 0 0;} } /* ================================== stylingTop ================================== */ .staffStylingTop-container{margin:26px auto 120px;max-width: -webkit-calc(1124px - 100px);max-width: calc(1124px - 100px);padding: 0 50px;} @media screen and (max-width:834px){ .staffStylingTop-container{padding: 0;} } @media screen and (max-width:640px){ .staffStylingTop-container{margin: 20px auto 80px;} } .staffStylingTop-section{margin-top: 96px;} .staffStylingTop-section .section__title{text-align: center;font-size: 21px;font-weight: 400;} .staffStylingTop-section .section__title-tag{font-size: 16px;font-weight: 400; margin-top: 48px;} .staffStylingTop-section .staffStylingTop-section__footer{margin-top: 48px;text-align: center;} .staffStylingTop-section .staffStylingTop-section__footer > a{font-size: 14px; color: #202020;line-height: 1.8;-webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111; text-decoration: none;transition: all 0.2s ease-in-out;display: inline-block;} .staffStylingTop-section .staffStylingTop-section__footer > a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} /* スタイリングリスト調整 */ .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item {width: -webkit-calc(100% / 5 - 4.8px);width: calc(100% / 5 - 4.8px);} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(4n){margin-right:6px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+5){margin-top: 0;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(5n){margin-right:0;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+6){margin-top: 30px;} .staffStylingTop-container .staffStylingTop__coordinationItems{margin-top: 26px;} /* スタッフリスト調整 */ .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffListItem__image .jf-bn-staffListItem__image__link{position: relative} .staffStylingTop-container .jf-bn-staffList__list {flex-wrap: nowrap; overflow-y: hidden;overflow-x: scroll;padding-top: 20px;} .staffStylingTop-container .jf-bn-staffList__list::-webkit-scrollbar {height: 8px} .staffStylingTop-container .jf-bn-staffList__list::-webkit-scrollbar-track {border-radius: 5px;background: #fff} .staffStylingTop-container .jf-bn-staffList__list::-webkit-scrollbar-thumb {border-radius: 5px;background: #283135} .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffList__list__item{ width: auto; margin-right: 36px;} .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(3n){margin-right:36px;} .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(n+4){margin-top: 0;} /* ランキングアイコン */ .staffStylingTop-container .icon-ranking {position: absolute;width: 36px;height: 36px;z-index: 100;top: -20px;left: 10px; background-repeat: no-repeat;background-position: 50% 50%; font: 0/0 a;} .staffStylingTop-container .rank01 {background-image: url(/img/rankicon/icon_rank1.svg);} .staffStylingTop-container .rank02 {background-image: url(/img/rankicon/icon_rank2.svg);} .staffStylingTop-container .rank03 {background-image: url(/img/rankicon/icon_rank3.svg);} .staffStylingTop-container .rank04 {background-image: url(/img/rankicon/icon_rank4.svg);} .staffStylingTop-container .rank05 {background-image: url(/img/rankicon/icon_rank5.svg);} .staffStylingTop-container .rank06 {background-image: url(/img/rankicon/icon_rank6.svg);} .staffStylingTop-container .rank07 {background-image: url(/img/rankicon/icon_rank7.svg);} .staffStylingTop-container .rank08 {background-image: url(/img/rankicon/icon_rank8.svg);} .staffStylingTop-container .rank09 {background-image: url(/img/rankicon/icon_rank9.svg);} .staffStylingTop-container .rank10 {background-image: url(/img/rankicon/icon_rank10.svg); width: 52px;} /* タグ */ .staffStylingTop-container .staffStylingTop__tagList{display: -webkit-flex;display: flex; -webkit-flex-wrap: wrap;flex-wrap: wrap;margin-top: 50px} .staffStylingTop-container .staffStylingTop__tagList .staffStylingTop__tagList__item{ margin-right: 6px; margin-bottom: 6px;text-align: center;} .staffStylingTop-container .staffStylingTop__tagList .staffStylingTop__tagList__item a { color: #202020; display: block; background: #EBECF0; border: 1px solid #EBECF0; transition: all 300ms ease-out 0ms; text-decoration: none;border-radius: 4px; display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center; height: 40px; -webkit-justify-content: center; justify-content: center;font-size: 0.9em; padding: 0 15px;} .staffStylingTop-container .staffStylingTop__tagList .staffStylingTop__tagList__item a:hover {border: #001335 1px solid;} /* タブ切り替え */ .staffStylingTop__tab .tab__list{display: flex;justify-content: center;align-items: center;} .staffStylingTop__tab .tab__list__item{} .staffStylingTop__tab .tab__list__item--current{} .staffStylingTop__tab .tab__text{text-decoration: none; position: relative; color: #1b1b1b; line-height: 50px; height: 50px; display: block; padding: 0 15px; text-align: center; white-space: nowrap;min-width: calc(100px - 30px);font-size: 15px;} .staffStylingTop__tab .tab__text::after {transition: transform .3s cubic-bezier(.4,0,0,1);content: ""; position: absolute;bottom: 0;left: 0; width: 100%; height: 3px;background-image: -webkit-linear-gradient(to right, #202020 0%, #202020 100%);background-image: linear-gradient(to right, #202020 0%, #202020 100%);transform-origin: center;transform: scaleX(0);} .staffStylingTop__tab .tab__text:hover::after { transform: scaleX(1);} .staffStylingTop__tab .tab__list__item--current .tab__text::after { transform: scaleX(1);} .staffStylingTop__tab .tab__list__item--current .tab__text::before {content: ""; position: absolute; bottom: -14px; left: 50%; border: 8px solid transparent; border-top: 6px solid #202020; -webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);} @media screen and (max-width:834px){ .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list{flex-wrap: nowrap; overflow-y: hidden;overflow-x: scroll;padding-top: 20px; margin-top: 26px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list::-webkit-scrollbar {height: 8px} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list::-webkit-scrollbar-track {border-radius: 5px;background: #fff} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list::-webkit-scrollbar-thumb {border-radius: 5px;background: #283135} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item{min-width: 180px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(3n), .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(5n){margin-right:6px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+4), .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+6){margin-top: 0;} .staffStylingTop-container .staffStylingTop__coordinationItems{margin-top: 0 !important;} .staffStylingTop-container .jf-bn-staffList__list { margin: 30px 30px; } .staffStylingTop-container .staffStylingTop__tagList{padding: 0 30px} } @media screen and (max-width:640px){ .staffStylingTop-section{margin-top: 68px;} .staffStylingTop-section .section__title{font-size: 18px;} .staffStylingTop-section .section__title-tag{font-size: 14px;margin-top: 36px;} .staffStylingTop-section .staffStylingTop-section__footer{margin-top: 24px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list{ margin-top: 10px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(2n){margin-right:6px;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item:nth-of-type(n+3){margin-top: 0;} .staffStylingTop-container .jf-bn-coordinationCatalog .jf-bn-coordinationCatalog__list__item{min-width: 120px;} .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffList__list__item{margin-right: 20px;} .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(n+3) { margin-top: 0;} .staffStylingTop-container .jf-bn-staffList__list .jf-bn-staffList__list__item:nth-of-type(3n){margin-right:20px;} .staffStylingTop-container .icon-ranking {width: 26px;height: 26px;top: -14px;left: 8px;} .staffStylingTop-container .rank10 {width: 38px;} .staffStylingTop-container .jf-bn-staffList__list { margin: 10px 20px} .staffStylingTop-container .jf-bn-coordinationListItem__staffInfo__profile{display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;} .staffStylingTop-container .staffStylingTop__tagList{padding: 0 20px;margin-top: 32px;} .staffStylingTop__tab .tab__text{line-height: 42px; height: 42px; padding: 0 12px;min-width: calc(90px - 24px);font-size: 13px;} } /* Slider カルーセルタイプ -------------------------------- */ .pickUpTag-section{position:relative;margin-left: calc((100% - 100vw) / 2); margin-right: calc((100% - 100vw) / 2);} .pickUpTag__carousel{position: relative;overflow: hidden; min-height: 500px; opacity: 0; transition: opacity .3s ease;} .pickUpTag__carousel.slick-slider{opacity: 1;overflow: inherit;} .pickUpTag__carousel .pickUpTag__carousel__item{max-width: 380px;margin: 50px 16px;transform: scale(.85);transition: transform .5s;} .pickUpTag__carousel .pickUpTag__carousel__item.slick-center{transform: scale(1);} .pickUpTag__carousel .pickUpTag__carousel__item > a{display:block;height: 100%;width: 100%;-ms-transition: 0.3s;transition: 0.3s;position: relative;color: #fff;} .pickUpTag__carousel .pickUpTag__carousel__item a::after{content: "";width: 100%;height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; top: 0;left: 0;z-index: 1;transition: 0.3s;} .pickUpTag__carousel .pickUpTag__carousel__item.slick-center a::after{background-color: rgba(0, 0, 0, 0.2);} .pickUpTag__carousel .pickUpTag__carousel__item a:hover::after{background-color: rgba(0, 0, 0, 0.15);} .pickUpTag__carousel .pickUpTag__carousel__item figure {height: 100%;width: 100%;} .pickUpTag__carousel .pickUpTag__carousel__item figure img{width: 100%;height: 500px;border-radius: 0;-ms-transition: 0.3s;transition: 0.3s;} .pickUpTag__carousel .pickUpTag__carousel__item .pickUpTag__txt{position: absolute;top: 50%;left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);z-index: 2;} .pickUpTag__carousel .pickUpTag__carousel__item .pickUpTag__txt .label{text-align: center;} .pickUpTag__carousel .pickUpTag__carousel__item .pickUpTag__txt .tag{font-size: 1.6em; margin: 4px 0 0 0;font-weight: bold;} .pickUpTag-section .slider__pager{display: -webkit-box !important;display: -webkit-flex !important;display: flex !important;position: absolute;bottom: -20px;left: 0;width: -webkit-calc(100% - 140px);width: calc(100% - 140px);-webkit-flex-wrap: wrap;flex-wrap: wrap;padding: 5px 70px;-webkit-justify-content: center;justify-content: center;} .pickUpTag-section .slider__pager li{margin: 3px 6px;} .pickUpTag-section .slider__pager li button{font: 0/0 a;height: 12px;width: 12px;padding: 0;margin: 0;background: rgba(0,0,0,.5);border-radius: 12px;border: none;-webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;position: relative;z-index: 1;display: block;} .pickUpTag-section .slider__pager li.slick-active button{background: #EBD10B;} .pickUpTag-section .slider__pager li.slick-active button::before {content: "";position: absolute;display: block;width: 100%;height: 100%;border-radius: 50%;-webkit-animation: pager-active 3s infinite;animation: pager-active 3s infinite;pointer-events: none;background: #EBD10B;z-index: 0;top: 0;} @keyframes pager-active{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(1);transform:scale(1)}20%{opacity:1;filter:alpha(opacity=100)}80%,100%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(1.8);transform:scale(1.8)}} .pickUpTag-section .slider__prev{z-index: 1;font: 0/0 a;left: 30px;background: #fff;height: 70px;flex-basis: 55px;min-width: 55px;max-width: 55px;border-radius: 5px;display: -webkit-box;transition: all 0.2s ease-in-out;position: absolute;top: 50%;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);box-shadow: 10px 25px 30px rgb(0 0 0 / 8%);} .pickUpTag-section .slider__prev::after{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 50%;background: #001335;display:block;top: 50%;left: 50%;-webkit-transform: translate(-50%,3px);-ms-transform: translate(-50%,3px);transform: translate(-50%,3px);} .pickUpTag-section .slider__prev::before{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 10px;background: #001335;display: block;top: 50%;left: 12px;-webkit-transform: translate(0,0) rotate( -45deg);-ms-transform: translate(0,0) rotate(-45deg);transform: translate(0,0) rotate(-45deg);opacity: 1;} .pickUpTag-section .slider__next{z-index: 1;font: 0/0 a;right: 30px;background: #fff;height: 70px;flex-basis: 55px;min-width: 55px;max-width: 55px;border-radius: 5px;display: -webkit-box;transition: all 0.2s ease-in-out;position: absolute;top: 50%;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);box-shadow: 10px 25px 30px rgb(0 0 0 / 8%);} .pickUpTag-section .slider__next::after{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 50%;background: #001335;display:block;top: 50%;left: 50%;-webkit-transform: translate(-50%,3px);-ms-transform: translate(-50%,3px);transform: translate(-50%,3px);} .pickUpTag-section .slider__next::before{transition: .3s;position: absolute;margin: auto;content: "";height: 1px;width: 10px;background: #001335;display: block;top: 50%;right: 12px;-webkit-transform: translate(0,0) rotate( -135deg);transform: translate(0,0) rotate(-135deg);} .pickUpTag-section .slider__prev:hover, .pickUpTag-section .slider__next:hover {box-shadow: 0 10px 20px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);} @media screen and (max-width:640px){ .pickUpTag__carousel{min-height: 270px;} .pickUpTag__carousel .pickUpTag__carousel__item{max-width: 200px;margin: 32px 8px 36px;transform: scale(1);} .pickUpTag__carousel .pickUpTag__carousel__item figure img{height: 267px;} .pickUpTag__carousel .pickUpTag__carousel__item .pickUpTag__txt .tag{font-size: 1.2em;} .pickUpTag-section .slider__pager li{margin: 3px 5px;} .pickUpTag-section .slider__pager li button{height: 10px;width: 10px;border-radius: 10px;} } /* アプリバナー */ .app-banner__container {background:#f2f2f2;color: #202020;position: relative;} .app-banner__container__inner {display: -webkit-flex;display: flex; align-items: center; position: relative; padding: 48px 0;max-width: 720px;margin: 0 auto;} .app-banner__container .appImg {width: 340px;} .app-banner__container .appImg img { width: 100%;display: block;} .app-banner__container .appTxt {width: calc(100% - 382px);margin-right: 42px;} .app-banner__container .appTxt .txt {font-size: 1.6em;} .app-banner__container .appTxt .linkBtn { margin-top: 36px; display: -webkit-flex; display: flex;-webkit-align-items: center;align-items: center;} .app-banner__container .appTxt .linkBtn .btn { display: block;text-decoration: none; padding: 0; max-width: 200px; width: calc(50% - 5px); position: relative; transition: 0.3s;z-index: 0; margin-right: 10px;} .app-banner__container .appTxt .linkBtn .btn:nth-of-type(n+2) {margin-right: 0;} .app-banner__container .appTxt .linkBtn .btn:hover { transform: translateY(-4px);} .app-banner__container .appTxt .txt_small {margin-top: 16px; font-size: 0.8em;} @media screen and (max-width: 834px) { } @media screen and (max-width: 640px) { .app-banner__container__inner { -webkit-flex-wrap: wrap; flex-wrap: wrap;padding: 42px 26px;} .app-banner__container .appImg {width: auto;max-width: 280px;margin:20px auto 0;} .app-banner__container .appTxt {width: 100%; margin-right: 0;} .app-banner__container .appTxt .txt {font-size: 1.3em;} .app-banner__container .appTxt .linkBtn {max-width: 260px; margin: 32px auto 0;} }