@charset "utf-8"; /*------------------------------------- SITE : //www.jeansfactory.jp/ CREATE : 2017.01.11 MODIFIED : 2020.11.24 UPDATED BY : OGASAWARA MEMO : 2017.06.08__ver1.1.0 MEMO : 2018.10.01__ver1.2.0 MEMO : 2019.08.20__ver1.2.1 MEMO : 2019.12.04__ver1.2.2 MEMO : 2020.11.24__ver2.0.0 ブレイクポイントの追加。デザイン変更。CC対応。 MEMO : 2021.10.29__ver2.1.0 新レイアウト追加。 MEMO : 2022.03.12__ver2.2.0 新レイアウト追加。 MEMO : 2022.07.21__ver2.2.1 デザイン調整。 MEMO : 2022.11.07__ver2.2.2 デザイン調整。 -------------------------------------*/ @import url(https://fonts.googleapis.com/css?family=Cairo:700); @import url(https://fonts.googleapis.com/css?family=Unica+One); @import url(https://use.typekit.net/nnk5tra.css);/* jf-font */ .vewPc {display:;} .vewSp {display:none !important} @media screen and (max-width:640px){ .vewPc {display:none !important} .vewSp {display:block !important} } html{overflow: auto;} .breadcrumbs .breadcrumbsList {max-width: 1300px;} /* ================================== feature ver2.0.0 ================================== */ .featureList-container{margin:60px auto 120px;max-width: 1300px;} .featureList-container .pageTitle{font-size:24px;font-weight:400;position:relative;display: inline-block;} .featureList-container .featureList-layout{display: -webkit-flex;display: flex;margin-top: 50px;} .featureList-container .featureList-layout__menu{width: 280px;margin-right: 30px;} .featureList-container .featureList-layout__menuInner{position:sticky;top:20px} .featureList-container .featureList-layout__content{width: -webkit-calc(100% - 620px);width: calc(100% - 620px);margin-right: 30px;} .featureList-container .featureList-layout__subContent{width: 280px;} @media screen and (max-width:1100px){ .featureList-container .featureList-layout{-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;} .featureList-container .featureList-layout__content{width: -webkit-calc(100% - 340px);width: calc(100% - 340px);margin-right:30px;} .featureList-container .featureList-layout__subContent{margin-left:310px;width:auto;margin-right: 30px;} } @media screen and (max-width:834px){ .featureList-container .pageTitle{font-size:20px;padding: 0 30px;} .featureList-container .featureList-layout__menu{width: 100%;margin-right: 0;} .featureList-container .featureList-layout__menuInner{position: inherit;top: inherit;margin: 0 30px;} .featureList-container .featureList-layout__content{width: 100%;margin-top: 0;margin-right: 0;} .featureList-container .featureList-layout__subContent{margin: 0;} } @media screen and (max-width:640px){ .featureList-container{margin: 30px auto 80px;} .featureList-container .pageTitle{padding: 0 20px;} .featureList-container .featureList-layout{margin-top:30px} .featureList-container .featureList-layout__menuInner{margin: 0 20px;} } /* filter__ */ .featureList-layout__menu .searchMenu-openBtn{display:none;pointer-events: none;} .featureList-layout__menu .searchMenu-openBtn .search-icon{width: 16px;height: 16px;position: relative;margin-right:6px;display: inline-block;} .featureList-layout__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;} .featureList-layout__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;} .featureList-layout__menu .searchMenu-openBtn:hover .search-icon::after{box-shadow: currentcolor -8px 7px 0px 0px;transform: translate3d(11px, 1px, 0px);} .featureList-layout__menu #feature-search{} .featureList-layout__menu div[class^="filter__"]:nth-of-type(n+2){margin-top: 30px;} .featureList-layout__menu div[class^="filter__"] .label{font-size: 16px;} .featureList-layout__menu .filter-group__content{margin-top:15px} .featureList-layout__menu .filter__keyword{width: 100%;position: relative;} .featureList-layout__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;} .featureList-layout__menu .filter__keyword input[name="keyword"]:-webkit-autofill {-webkit-transition: background-color 9999s;transition: background-color 9999s;} .featureList-layout__menu .filter__keyword input[name="keyword"]::placeholder {color: rgba(150, 150, 150, 1);} .featureList-layout__menu .filter__keyword input[name="keyword"]:-ms-input-placeholder {color: rgba(150, 150, 150, 1);} .featureList-layout__menu .filter__keyword input[name="keyword"]::-ms-input-placeholder {color: rgba(150, 150, 150, 1);} .featureList-layout__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');} .featureList-layout__menu .filter-list li{font-size: 14px;} .featureList-layout__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;} .featureList-layout__menu .filter-list li a:hover{background:#dcdde2;} .featureList-layout__menu .filter-list li a.is--checked{} .featureList-layout__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;} .featureList-layout__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;} .featureList-layout__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);} .featureList-layout__menu .select{display: block;position: relative;} .featureList-layout__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;} .featureList-layout__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;} .featureList-layout__menu .select .selectBox:hover {border: 1px solid #bababa;} .featureList-layout__menu .tag-list{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .featureList-layout__menu .tag-list li{margin-right: 6px;margin-bottom: 6px;text-align: center;} .featureList-layout__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;} .featureList-layout__menu .tag-list a:hover{border: #001335 1px solid;} .featureList-layout__menu .tag-list li .is--checked{color:#fff;background: #001335;border: #001335 1px solid;} @media screen and (max-width:834px){ .featureList-layout__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;} .featureList-layout__menu #feature-search{display:none;margin-bottom: 30px;} } @media screen and (max-width:640px){ } /* features-list -------------------------------------*/ .features-list{margin: 0;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .features-list li{} .features-list li:nth-of-type(n+2){margin-top: 30px;} .features-list li .features-list__link{position: relative;transition: .5s;color: #202020;text-decoration: none;background-color: #fff;height: 100%;overflow: hidden;display: -webkit-flex;display: flex;} .features-list li .features-list__link .img{overflow: hidden;position: relative;min-width: 240px;max-width: 240px;} .features-list li .features-list__link .img img{width: 100%;height: 100%;display: block;-ms-transition: 0.3s;transition: 0.3s;} .features-list li .features-list__link .img .categoryName{position:absolute;top: 0;left: 0;background-image: -webkit-linear-gradient(to top right, #2d94d2 0%, #00b6dd 100%);background-image: linear-gradient(to top right, #2d94d2 0%, #00b6dd 100%);color: #fff;border-radius: 0 0 30px 0px;padding: 0 20px 0 15px;z-index: 1;height: 26px;line-height: 26px;font-size: 0.9em;display: none;} /* .features-list li .features-list__link .img::after{content:"";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%2064%20100%22%20style%3D%22enable-background%3Anew%200%200%2064%20100%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M64%2C0c0%2C0-22.22%2C7.94-30.16%2C50.79S0.51%2C100%2C0.51%2C100H64V0z%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat;background-size: cover;position: absolute;top: 0;bottom: 0;right: 0;z-index: 1;width: 140px;} */ .features-list li .features-list__link .info{padding: 15px 0 15px 15px;position:relative;overflow: hidden;height: -webkit-calc(220px - 30px);height: calc(220px - 30px);} .features-list li .features-list__link .infoTitle{font-size: 16px;font-weight: 400;line-height: 1.8;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;} .features-list li .features-list__link .infoMeta{margin-top: 10px;font-size: 14px;color: #999;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;white-space: nowrap;overflow: hidden;font-family: 'Unica One', cursive;} .features-list li .features-list__link .infoMeta .meta__sex{padding-right: 10px;border-right: 1px solid #e5e5e5; margin-right: 10px;} .features-list li .features-list__link .infoMeta .meta__time{} .features-list li .features-list__link .infoTags{margin-top: 10px;overflow: hidden;display:none} .features-list li .features-list__link .infoTags .icon-tag{color: #2c95d2;width: 15px;height: 15px;margin-right: 10px;display: inline-block;vertical-align: middle;} .features-list li .features-list__link .infoTags span{display: inline-block;vertical-align: middle;margin-right: 10px;} .features-list li .features-list__link:hover{box-shadow: 0 20px 20px -20px #BABECC, 0 -20px 20px -20px #e8e9ea;} .features-list li .features-list__link:hover .img img{-webkit-transform: scale(1.1);transform: scale(1.1);} @media screen and (max-width:1100px){ } @media screen and (max-width:834px){ .features-list{margin:0 30px} .features-list li .features-list__link .infoTitle{font-size: 15px;line-height: 1.6;} } @media screen and (max-width:640px){ .features-list{margin:0 20px} .features-list li:nth-of-type(n+2){margin-top: 20px;} .features-list li .features-list__link .img{min-width: 150px;max-width: 150px;} .features-list li .features-list__link .img .categoryName{border-radius: 0 0 26px 0px;padding: 0 15px 0 10px;height: 22px;line-height: 22px;font-size: 0.8em;} .features-list li .features-list__link .info{padding: 12px 0 12px 12px;height: -webkit-calc(140px - 20px);height: calc(140px - 20px);} .features-list li .features-list__link .infoTitle{font-size: 13px} .features-list li .features-list__link .infoMeta{margin-top: 8px;font-size: 12px;width: -webkit-calc(100vw - 202px);width: calc(100vw - 202px);} .features-list li .features-list__link .infoMeta .meta__sex{padding-right: 8px;margin-right: 8px;} .features-list li .features-list__link .infoTags{margin-top: 8px;} .features-list li .features-list__link .infoTags .icon-tag{width: 12px;height: 12px;margin-right: 8px;} .features-list li .features-list__link .infoTags span{margin-right: 8px;font-size:0.9em} } @media screen and (max-width:320px){ .features-list li .features-list__link .img{min-width: 150px;max-width: 150px;} } /* pagerWrapper_ver02 -------------------------------------*/ .pagerWrapper_ver02{margin: 80px auto 100px;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;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;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)} } /* subContent-group -------------------------------------*/ .subContent-group{} .subContent-group:nth-of-type(n+2){margin-top: 30px;} .subContent-group__label{font-size:16px} .subContent-group__list{margin: 0;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;margin-top: 26px;} .subContent-group__list li{} .subContent-group__list li:nth-of-type(n+2){margin-top: 15px;} .subContent-group__list li .features-list__link{position: relative;transition: .5s;color: #202020;text-decoration: none;display: -webkit-flex;display: flex;} .subContent-group__list li .features-list__link .img{overflow: hidden;position: relative;min-width: 100px;max-width: 100px;border-radius: 5px;} .subContent-group__list li .features-list__link .img img{width: 100%;height: 100px;display: block;-ms-transition: 0.3s;transition: 0.3s;} .subContent-group__list li .features-list__link .info{position:relative;margin-left: 12px;} .subContent-group__list li .features-list__link .infoTitle{font-size: 13px;font-weight: 400;line-height: 1.6;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;} .subContent-group__list li .features-list__link .infoMeta{margin-top: 6px;font-size: 13px;color: #999;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;white-space: nowrap;overflow: hidden;font-family: 'Unica One', cursive;} .subContent-group__list li .features-list__link:hover .img img{-webkit-transform: scale(1.1);transform: scale(1.1);} /* ranking */ .subContent-group__list li .features-list__link .icon-rank{position: absolute;width: 26px;height: 26px;z-index: 1;top: -9px;left: 6px;background-repeat: no-repeat;background-position: 50% 50%;font: 0/0 a;} .subContent-group__list li:nth-of-type(1) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank1.svg);} .subContent-group__list li:nth-of-type(2) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank2.svg);} .subContent-group__list li:nth-of-type(3) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank3.svg);} .subContent-group__list li:nth-of-type(4) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank4.svg);} .subContent-group__list li:nth-of-type(5) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank5.svg);} .subContent-group__list li:nth-of-type(6) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank6.svg);} .subContent-group__list li:nth-of-type(7) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank7.svg);} .subContent-group__list li:nth-of-type(8) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank8.svg);} .subContent-group__list li:nth-of-type(9) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank9.svg);} .subContent-group__list li:nth-of-type(10) .features-list__link .icon-rank{background-image: url(/img/rankicon/icon_rank10.svg);width: 52px;} @media screen and (max-width:834px){ .subContent-group{margin: 0 30px;} .subContent-group__list li .features-list__link .img{min-width: 150px;max-width: 150px;} .subContent-group__list li .features-list__link .img img{height: 150px;} .subContent-group__list li .features-list__link .infoTitle{font-size: 14px;} #subContent__ranking{margin: 30px 0 0 30px;} #subContent__ranking .subContent-group__list{-webkit-flex-wrap: nowrap;flex-wrap: nowrap;overflow-x: scroll;scroll-behavior: smooth;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch;width: -webkit-calc(100vw - 40px);width: calc(100vw - 40px);padding: 10px 0 0 10px;} #subContent__ranking .subContent-group__list li{min-width: -webkit-calc((100vw - 20px)/4);min-width: calc((100vw - 20px)/4);} #subContent__ranking .subContent-group__list li:nth-of-type(n+2){margin-top:0;margin-left:10px} #subContent__ranking .subContent-group__list li .features-list__link{-webkit-flex-wrap: wrap;flex-wrap: wrap;} #subContent__ranking .subContent-group__list li .features-list__link .img{min-width: 100%;max-width: 100%;} #subContent__ranking .subContent-group__list li .features-list__link .img img{height: 180px;} #subContent__ranking .subContent-group__list li .features-list__link .info{margin:10px 0 0;} } @media screen and (max-width:640px){ .subContent-group{margin: 0 20px;} .subContent-group__list li .features-list__link .img{min-width: 100px;max-width: 100px;} .subContent-group__list li .features-list__link .img img{height: 100px;} .subContent-group__list li .features-list__link .infoTitle{font-size: 13px;} #subContent__ranking{margin: 30px 0 0 20px;} #subContent__ranking .subContent-group__list{width: -webkit-calc(100vw - 30px);width: calc(100vw - 30px);} #subContent__ranking .subContent-group__list li{min-width: -webkit-calc((100vw - 5px)/3);min-width: calc((100vw - 5px)/3);} #subContent__ranking .subContent-group__list li .features-list__link .img img{height: 120px;} #subContent__ranking .subContent-group__list li .features-list__link .info{margin:10px 0 0;} } /* ================================== featureDetail 共通 ================================== */ /*featureTitle-ptn1 ※freeAreaで使用 -------------------------------------*/ .featureTitle-ptn1 {text-align: center;margin: 136px auto 50px;} .featureTitle-ptn1 span{position: relative;display: inline-block;padding: 20px 30px;font-size: 26px;font-weight: 400;} .featureTitle-ptn1 span::before {position: absolute;border-top: 1px solid #000;border-right: 1px solid #000;content: "";width: 30px;height: 30px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(270deg);left: 0;top: 0;} .featureTitle-ptn1 span::after {position: absolute;border-top: 1px solid #000;border-right: 1px solid #000;content: "";width: 30px;height: 30px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);right: 0;bottom: 0;} @media screen and (max-width:834px){ .featureTitle-ptn1 {padding: 0 30px;margin: 96px auto 40px;} .featureTitle-ptn1 span{font-size: 20px;} } @media screen and (max-width:640px){ .featureTitle-ptn1 {margin: 72px auto 30px;} .featureTitle-ptn1 span{padding: 15px 25px;font-size: 18px;} .featureTitle-ptn1 span::before {width: 20px;height: 20px;} .featureTitle-ptn1 span::after {width: 20px;height: 20px;} } /*featureTitle-ptn2 ※freeAreaで使用 -------------------------------------*/ .featureTitle-ptn2 {text-align: center;margin: 136px auto 50px;} .featureTitle-ptn2 span{position: relative;display: inline-block;padding: 0 2.5em;font-size: 28px;font-weight: 400;} .featureTitle-ptn2 span::before {position: absolute;content: "";width:1.5em;height: 1px;background-color:#000;left: 100%;top:50%;-webkit-transform: translate(-1.5em,-50%);-moz-transform: translate(-1.5em,-50%);-ms-transform: translate(-1.5em,-50%);-o-transform: translate(-1.5em,-50%);transform: translate(-1.5em,-50%);} .featureTitle-ptn2 span::after {position: absolute;content: "";width:1.5em;height: 1px;background-color:#000;right: 100%;top:50%;-webkit-transform: translate(1.5em,-50%);-moz-transform: translate(1.5em,-50%);-ms-transform: translate(1.5em,-50%);-o-transform: translate(1.5em,-50%);transform: translate(1.5em,-50%);} @media screen and (max-width:834px){ .featureTitle-ptn2 {padding: 0 30px;margin: 96px auto 40px;} .featureTitle-ptn2 span{font-size: 20px;} } @media screen and (max-width:640px){ .featureTitle-ptn2 {margin: 72px auto 30px;} .featureTitle-ptn2 span{font-size: 18px;} } /*featureTitle-ptn3 ※freeAreaで使用 -------------------------------------*/ .featureTitle-ptn3 {text-align: center;margin: 136px auto 70px;position: relative;} .featureTitle-ptn3::before, .featureTitle-ptn3::after {position: absolute;top: 100%;left:50%;transform:translateX(-50%);content: '';border: 18px solid transparent;} .featureTitle-ptn3::before {border-top: 15px solid #000;} .featureTitle-ptn3::after {margin-top: -1px;border-top: 15px solid #fff;} .featureTitle-ptn3 span{position: relative;display: inline-block;padding-bottom: 30px;font-size: 26px;font-weight: 400;line-height: 1.8;} .featureTitle-ptn3 span::after{position: absolute;content: '';width: 70%;max-width: 180px;height: 1px;background: #000;bottom: 0;left: 50%;-webkit-transform: translate(-50%,0);-ms-transform: translate(-50%,0);transform: translate(-50%,0);z-index: -1;} @media screen and (max-width:834px){ .featureTitle-ptn3 {padding: 0 30px;margin: 96px auto 70px;} .featureTitle-ptn3 span{font-size: 20px;padding-bottom: 20px;} } @media screen and (max-width:640px){ .featureTitle-ptn3 {margin: 72px auto 40px;} .featureTitle-ptn3::before, .featureTitle-ptn3::after {border: 15px solid transparent;} .featureTitle-ptn3::before {border-top: 10px solid #000;} .featureTitle-ptn3::after {border-top: 10px solid #fff;} .featureTitle-ptn3 span{font-size: 18px;} } /*見出し h2 -------------------------------------*/ *[class^="featureBody"] .feature-content .infoTitle{font-size: 24px;font-weight: 400;margin: 52px 0 28px;} *[class^="featureBody"] .feature-content .hh1{position: relative;display: table;} *[class^="featureBody"] .feature-content .hh1::after {width: 100%;background: -moz-linear-gradient(left, #00d1a7, #008182);background: -webkit-linear-gradient(left, #b4b4b4, #d9d9d9);background: linear-gradient(to left, #b4b4b4, #d9d9d9);position: absolute;bottom: 8px;left: 0;height: 14px;content: "";z-index: -1;display: block;} *[class^="featureBody"] .feature-content .hh2{position: relative;border-bottom: solid 1px #cbcbcb;padding-bottom:10px;} *[class^="featureBody"] .feature-content .hh2::after {display: block;position: absolute;bottom: -1px;width: 30%;border-bottom: solid 1px #000;content: " ";} *[class^="featureBody"] .feature-content .hh3{position: relative;padding-left: calc(2.4rem + 12px);} *[class^="featureBody"] .feature-content .hh3::before {content: "";width: 2.4rem;height: 1px;background: #000;display: block;position: absolute;top: 50%;left: 0;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} *[class^="featureBody"] .feature-content .hh4{} *[class^="featureBody"] .feature-content .hh4:first-letter {font-size: 1.5em;color: #9f9f9f;} @media screen and (max-width:834px){ *[class^="featureBody"] .feature-content .infoTitle{font-size: 20px} } @media screen and (max-width:640px){ *[class^="featureBody"] .feature-content .infoTitle{font-size: 18px} *[class^="featureBody"] .feature-content .hh1::after{height:10px} } /*linkBtn-ptn2 -------------------------------------*/ a.linkBtn-ptn2{display: inline-block;position:relative;color: #000;padding: 5px 0 5px 20px;font-weight: bold;font-size: 16px;transition: .3s ease-in-out;} a.linkBtn-ptn2:hover{ opacity:0.7; text-decoration:none;transform: translateX(4px);} a.linkBtn-ptn2::before {left:0;position: absolute;border-top: 2px solid #000;border-right: 2px solid #000;content: "";width: 6px;height: 6px;top: 15px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);} a.linkBtn-ptn2::after {content: "CLICK";color: #fff;font-size: 10px;width: 55px;text-align: center;height: 20px;line-height: 20px;display: inline-block;margin-left: 0px;background-image: -webkit-linear-gradient(left, #000 0%, #000 100%);background-image: linear-gradient(to right, #000 0%, #000 100%);border-radius: 20px;-webkit-transform: scale(0.7);-moz-transform: scale(0.7);-ms-transform: scale(0.7);-o-transform: scale(0.7);transform: scale(0.7);} @media screen and (max-width:834px){ a.linkBtn-ptn2{font-size: 14px;} } @media screen and (max-width:640px){ } /* feature-itemList-ptn1 -------------------------------------*/ .feature-content .feature-itemList-ptn1{margin-top: 30px;} .feature-content .feature-itemList-ptn1 li{padding:0;} .feature-content .feature-itemList-ptn1 li:nth-of-type(n+2){margin-top: 8px;} .feature-content .feature-itemList-ptn1 li a{color:#222;padding-right:30px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon-cart%22%20width%3D%22100%22%20height%3D%2277%22%20viewBox%3D%220%200%20100%2077%22%3E%3Ctitle%3Ecart%3C%2Ftitle%3E%3Cpath%20class%3D%22icon-cart-fill%22%20d%3D%22M90%2059H30L12%209%200%206l2-6%2015%204%2018%2049h50l9-37%206%201-10%2042z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22icon-cart-fill%22%20d%3D%22M33%2026h52v5.97H33zm5%2013h42v5.97H38z%22%3E%3C%2Fpath%3E%3Cellipse%20class%3D%22icon-cart-fill%22%20cx%3D%2243%22%20cy%3D%2269%22%20rx%3D%228%22%20ry%3D%228%22%3E%3C%2Fellipse%3E%3Cellipse%20class%3D%22icon-cart-fill%22%20cx%3D%2276%22%20cy%3D%2269%22%20rx%3D%228%22%20ry%3D%228%22%3E%3C%2Fellipse%3E%3C%2Fsvg%3E');background-position:right bottom;background-repeat:no-repeat;text-decoration:underline;font-weight:bold;background-size: contain;font-size: 16px;} .feature-content .feature-itemList-ptn1 li a:hover{opacity:0.7} @media screen and (max-width:834px){ .feature-content .feature-itemList-ptn1 li a{font-size: 14px;} } @media screen and (max-width:640px){ } /* feature-itemList-ptn2 -------------------------------------*/ .feature-content .feature-itemList-ptn3 { margin-top: 50px;} .feature-content .feature-itemList-ptn3 li {position:relative} .feature-content .feature-itemList-ptn3 li:nth-of-type(n+2) {margin-top:20px} .feature-content .feature-itemList-ptn3 li .itemList-tag {width: 24px;height: 24px;position: absolute;left: 0;border-radius: 24px;display: table;font-size: 14px;top: 0;background-color: #000033;border: 1px solid #000033;color: #ffffff;line-height: 24px;text-align: center;} .feature-content .feature-itemList-ptn3 li .itemList-link {font-weight: bold;display: inline-block;color: #000;line-height: 1.6;padding: 0 0 0 45px;font-size:16px} .feature-content .feature-itemList-ptn3 li .itemList-item {display: inline-block;color: #000;line-height: 1.6;padding: 0 0 0 45px; font-size:16px} .feature-content .feature-itemList-ptn3 li .itemList-link .icon-cart {width: 20px;height: 15px; display: inline-block;margin-left:10px} .feature-content .feature-itemList-ptn3 li .itemList-box:nth-of-type(n+2) { margin-top:5px;} .feature-content .feature-itemList-ptn3 li .itemList-element:nth-of-type(n+2) { margin-left:3px;} .feature-content .feature-itemList-ptn3 li .small { font-size:12px;} @media screen and (max-width:834px){ .feature-content .feature-itemList-ptn3 li .itemList-link {font-size:14px} } @media screen and (max-width:640px){ .feature-content .feature-itemList-ptn3 { margin-top: 40px;} .feature-content .feature-itemList-ptn3 li .itemList-link {padding: 0 0 0 40px; text-decoration: underline;} .feature-content .feature-itemList-ptn3 li .itemList-item {font-size:14px;padding: 0 0 0 40px;} } /* feature-itemList-ptn4 -------------------------------------*/ .feature-content .feature-itemList-ptn4 {display:table;width:100%;max-width: 560px;margin-top: 50px;padding-top:30px;border-top:1px solid #333;} .feature-content .feature-itemList-ptn4 dl{display:table-row} .feature-content .feature-itemList-ptn4 dl dt, .feature-content .feature-itemList-ptn4 dl dd{ padding:8px 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; display:table-cell} .feature-content .feature-itemList-ptn4 dl dt{min-width:77px;padding-right:15px;border-right:1px solid #333;font-size: 14px;} .feature-content .feature-itemList-ptn4 dl dd{width:100%;padding-left:15px;font-size: 13px;} .feature-content .feature-itemList-ptn4 dl dd a{position:relative;display:block;padding-right: 75px;color: #333;-moz-transition-property: all;-o-transition-property: all;-webkit-transition-property: all;transition-property: all;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;} .feature-content .feature-itemList-ptn4 dl dd a span{ text-decoration:underline} .feature-content .feature-itemList-ptn4 dl dd a:after{position:absolute;right:0;content: 'BUY';display:inline-block;width:60px;height: 25px;background: #333;text-align:center;color: #fff;font-size: 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;line-height: 25px;background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon-cart%22%20width%3D%22100%22%20height%3D%2277%22%20viewBox%3D%220%200%20100%2077%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.icon-cart%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Ctitle%3Ecart%3C%2Ftitle%3E%3Cpath%20class%3D%22icon-cart-fill%22%20d%3D%22M90%2059H30L12%209%200%206l2-6%2015%204%2018%2049h50l9-37%206%201-10%2042z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22icon-cart-fill%22%20d%3D%22M33%2026h52v5.97H33zm5%2013h42v5.97H38z%22%3E%3C%2Fpath%3E%3Cellipse%20class%3D%22icon-cart-fill%22%20cx%3D%2243%22%20cy%3D%2269%22%20rx%3D%228%22%20ry%3D%228%22%3E%3C%2Fellipse%3E%3Cellipse%20class%3D%22icon-cart-fill%22%20cx%3D%2276%22%20cy%3D%2269%22%20rx%3D%228%22%20ry%3D%228%22%3E%3C%2Fellipse%3E%3C%2Fsvg%3E');background-position: 42% 50%;background-repeat: no-repeat;background-size: 17px;} .feature-content .feature-itemList-ptn4 dl dd a:hover{opacity:0.7;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ .feature-content .feature-itemList-ptn4 {margin: 40px -20px 0;padding: 0 20px;} .feature-content .feature-itemList-ptn4 dl{position:relative;padding: 12px 0;margin: 0 -30px;border-bottom:1px solid #333;display: block;} .feature-content .feature-itemList-ptn4 dl dt, .feature-content .feature-itemList-ptn4 dl dd{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding: 0 105px 0 30px;min-width: inherit;display: block;border-right: none;} .feature-content .feature-itemList-ptn4 dl dt{ font-weight:bold;font-size: 11px;} .feature-content .feature-itemList-ptn4 dl dd{ width:100%;font-size: 13px;} .feature-content .feature-itemList-ptn4 dl dd a{display:block;padding-right:70px;position: inherit;} .feature-content .feature-itemList-ptn4 dl dd a:after{top:0;right:0;display:inline-block;width: 75px;height:100%;box-sizing:border-box;padding-top: 20px;border-top: 1px solid #555;border-bottom: 1px solid #555;background-size: 20px;} } /* linkBtnWrapper -------------------------------------*/ .feature-content .linkBtnWrapper {text-align: center;margin: 60px auto 0;font-size: 0;} .feature-content .linkBtnWrapper .linkBtn {display: inline-block;min-width: -webkit-calc(300px - 40px);min-width: calc(300px - 40px);height: 56px;line-height: 56px;background: #2490d0;font-size: 14px;font-weight: 400;padding: 0 20px;color: #fff;transition: .5s ease-in-out;margin: 8px;text-decoration: none;} .feature-content .linkBtnWrapper .linkBtn .icon-blank{margin-left:15px;width: 15px;height: 15px;display:inline-block;vertical-align:middle;margin-top:-3px;fill:#fff;} .feature-content .linkBtnWrapper .linkBtn .icon-cart{margin-right:15px;width: 20px;height: 20px;display:inline-block;vertical-align:middle;margin-top:-6px;fill:#fff;} .feature-content .linkBtnWrapper .linkBtn:hover {transform: translateY(-2px);} .feature-content .linkBtnWrapper .grey {background: #fff;color: #202020;box-shadow:-5px -5px 10px #b1b1b11a, 5px 5px 10px #2424241a;} .feature-content .linkBtnWrapper .grey:hover {box-shadow: -2px -2px 5px #b1b1b11a, 2px 2px 5px #2424241a;} .feature-content .linkBtnWrapper .blue {background:#2490d0;background-image: -webkit-linear-gradient(left, #2d94d2 0%, #00b6dd 100%);background-image: linear-gradient(to right, #2d94d2 0%, #00b6dd 100%);} .feature-content .linkBtnWrapper .red {background:#E83656;background-image: -webkit-linear-gradient(left, #E83656 0%, #f74780 100%);background-image: linear-gradient(to right, #E83656 0%, #f74780 100%);} .feature-content .linkBtnWrapper .black {background-image: -webkit-linear-gradient(left, #202020 0%, #202020 100%);background-image: linear-gradient(to right, #202020 0%, #202020 100%);} @media screen and (max-width:834px){ .feature-content .linkBtnWrapper {margin: 50px auto 0;} } @media screen and (max-width:640px){ .feature-content .linkBtnWrapper {margin: 40px auto 0;} .feature-content .linkBtnWrapper .linkBtn {max-width: -webkit-calc(100% - 40px);max-width: calc(100% - 40px);height: 50px;line-height: 50px;font-size: 13px;margin: 0;overflow: hidden;min-width: -webkit-calc(280px - 40px);min-width: calc(280px - 40px);} .feature-content .linkBtnWrapper .linkBtn:nth-of-type(n+2){margin-top: 15px;} } /* share -------------------------------------- */ .feature-share__bottom{white-space: nowrap;margin: 86px auto 0;text-align: center;} .feature-share__bottom .feature-share-ttl{font-size: 24px;text-align: center;font-family: geom-graphic, sans-serif;font-weight: 300;letter-spacing: 0.15em;} .feature-share__bottom .feature-share-list{font-size: 0;margin-top: 30px;} .feature-share__bottom .feature-share-list li{display: inline-block;margin-right: 25px;} .feature-share__bottom .feature-share-list li:last-of-type{margin-right:0;} .feature-share__bottom .feature-share-list li a{width: 60px;height: 60px;display: block;border-radius: 60px;-webkit-transition: 0.3s;transition: 0.3s;background-repeat: no-repeat;background-size: 36px 36px;background-position: 50% 50%;background-color: #f1f1f1;} .feature-share__bottom .feature-share-list li a:hover{} .feature-share__bottom .feature-share-list li a:active{} .feature-share__bottom .feature-share-list li .icon-line{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%23879fbe%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M100%2C43.07c0-22.37-22.43-40.58-50-40.58c-27.57%2C0-50%2C18.2-50%2C40.58C0%2C63.13%2C17.79%2C79.92%2C41.82%2C83.1%20c1.63%2C0.35%2C3.84%2C1.07%2C4.4%2C2.47c0.5%2C1.26%2C0.33%2C3.24%2C0.16%2C4.52c0%2C0-0.59%2C3.53-0.71%2C4.28c-0.22%2C1.26-1%2C4.94%2C4.33%2C2.7%20c5.34-2.25%2C28.8-16.96%2C39.29-29.03h0C96.53%2C60.09%2C100%2C52.02%2C100%2C43.07z%20M32.36%2C55.01c0%2C0.54-0.43%2C0.97-0.97%2C0.97H17.38h0%20c-0.26%2C0-0.5-0.1-0.67-0.27c0%2C0-0.01-0.01-0.01-0.01c-0.01%2C0-0.01-0.01-0.01-0.01c-0.17-0.17-0.27-0.41-0.27-0.67v0V33.23%20c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97v17.3h9.53c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97V55.01z%20M40.81%2C55.02%20c0%2C0.54-0.44%2C0.97-0.97%2C0.97h-3.51c-0.54%2C0-0.97-0.43-0.97-0.97V33.23c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97%20V55.02z%20M64.95%2C55.02c0%2C0.54-0.44%2C0.97-0.97%2C0.97h-3.51c-0.09%2C0-0.17-0.01-0.25-0.03c0%2C0-0.01%2C0-0.01%2C0%20c-0.02-0.01-0.04-0.01-0.07-0.02c-0.01%2C0-0.02-0.01-0.03-0.01c-0.02-0.01-0.03-0.01-0.05-0.02c-0.02-0.01-0.03-0.02-0.05-0.02%20c-0.01%2C0-0.02-0.01-0.03-0.01c-0.02-0.01-0.04-0.02-0.06-0.04c0%2C0-0.01-0.01-0.01-0.01c-0.09-0.06-0.18-0.14-0.25-0.24l-10-13.5%20v12.94c0%2C0.54-0.44%2C0.97-0.97%2C0.97H45.2c-0.54%2C0-0.97-0.43-0.97-0.97V33.23c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.01%2C0%2C0.02%2C0%2C0.03%2C0%20c0.02%2C0%2C0.03%2C0%2C0.05%2C0c0.02%2C0%2C0.03%2C0%2C0.05%2C0.01c0.01%2C0%2C0.03%2C0%2C0.04%2C0.01c0.02%2C0%2C0.04%2C0.01%2C0.06%2C0.01c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.01%20c0.02%2C0.01%2C0.04%2C0.01%2C0.06%2C0.02c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.01c0.02%2C0.01%2C0.04%2C0.02%2C0.06%2C0.02c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.02%20c0.02%2C0.01%2C0.03%2C0.02%2C0.05%2C0.03c0.01%2C0.01%2C0.02%2C0.01%2C0.03%2C0.02c0.02%2C0.01%2C0.03%2C0.02%2C0.05%2C0.03c0.01%2C0.01%2C0.02%2C0.01%2C0.03%2C0.02%20c0.02%2C0.01%2C0.04%2C0.03%2C0.05%2C0.04c0.01%2C0.01%2C0.01%2C0.01%2C0.02%2C0.02c0.02%2C0.02%2C0.04%2C0.04%2C0.06%2C0.06c0%2C0%2C0%2C0%2C0.01%2C0.01%20c0.03%2C0.03%2C0.05%2C0.06%2C0.08%2C0.1l9.98%2C13.48V33.23c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97V55.02z%20M84.32%2C36.74%20c0%2C0.54-0.43%2C0.97-0.97%2C0.97h-9.53v3.68h9.53c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97v3.51c0%2C0.54-0.43%2C0.97-0.97%2C0.97h-9.53v3.68h9.53%20c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97v3.51c0%2C0.54-0.43%2C0.97-0.97%2C0.97H69.34h0c-0.26%2C0-0.5-0.1-0.67-0.27c0%2C0-0.01-0.01-0.01-0.01%20c0%2C0-0.01-0.01-0.01-0.02c-0.17-0.17-0.27-0.41-0.27-0.67v0V33.23v0c0-0.26%2C0.1-0.5%2C0.27-0.67c0-0.01%2C0.01-0.01%2C0.02-0.02%20c0%2C0%2C0.01-0.01%2C0.01-0.01c0.18-0.17%2C0.41-0.27%2C0.68-0.27h0h14.01c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97V36.74z%22%2F%3E%3C%2Fsvg%3E');} .feature-share__bottom .feature-share-list li .icon-facebook{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%23879fbe%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M73.15%2C32.8H57.61c0-4.9%2C0-8.38%2C0-9.46c0-5.6%2C2.92-6.19%2C4.91-6.19c1.98%2C0%2C10.62%2C0%2C10.62%2C0V0c0%2C0-2.1%2C0-15.65%2C0%20C39.16%2C0%2C36.47%2C13.42%2C36.47%2C22.18c0%2C1.47%2C0%2C5.34%2C0%2C10.62H26.44v17.28h10.03c0%2C22.44%2C0%2C49.91%2C0%2C49.91h21.14c0%2C0%2C0-27.73%2C0-49.91H71.4%20L73.15%2C32.8z%22%2F%3E%3C%2Fsvg%3E');} .feature-share__bottom .feature-share-list li .icon-twitter{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%2026%2026%22%20style%3D%22enable-background%3Anew%200%200%2026%2026%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%238B9FBA%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M15.1%2C11.2l8.2-9.5h-1.9L14.2%2C10L8.6%2C1.7H2.1l8.6%2C12.5l-8.6%2C10H4l7.5-8.7l6%2C8.7H24L15.1%2C11.2L15.1%2C11.2z%20M12.5%2C14.4l-0.9-1.2l-6.9-10h3l5.5%2C8l0.9%2C1.2l7.3%2C10.4h-3L12.5%2C14.4L12.5%2C14.4z%22%2F%3E%3C%2Fsvg%3E');} .feature-share__bottom .feature-share-list li .icon-line:hover{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%231dcd00%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M100%2C43.07c0-22.37-22.43-40.58-50-40.58c-27.57%2C0-50%2C18.2-50%2C40.58C0%2C63.13%2C17.79%2C79.92%2C41.82%2C83.1%20c1.63%2C0.35%2C3.84%2C1.07%2C4.4%2C2.47c0.5%2C1.26%2C0.33%2C3.24%2C0.16%2C4.52c0%2C0-0.59%2C3.53-0.71%2C4.28c-0.22%2C1.26-1%2C4.94%2C4.33%2C2.7%20c5.34-2.25%2C28.8-16.96%2C39.29-29.03h0C96.53%2C60.09%2C100%2C52.02%2C100%2C43.07z%20M32.36%2C55.01c0%2C0.54-0.43%2C0.97-0.97%2C0.97H17.38h0%20c-0.26%2C0-0.5-0.1-0.67-0.27c0%2C0-0.01-0.01-0.01-0.01c-0.01%2C0-0.01-0.01-0.01-0.01c-0.17-0.17-0.27-0.41-0.27-0.67v0V33.23%20c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97v17.3h9.53c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97V55.01z%20M40.81%2C55.02%20c0%2C0.54-0.44%2C0.97-0.97%2C0.97h-3.51c-0.54%2C0-0.97-0.43-0.97-0.97V33.23c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97%20V55.02z%20M64.95%2C55.02c0%2C0.54-0.44%2C0.97-0.97%2C0.97h-3.51c-0.09%2C0-0.17-0.01-0.25-0.03c0%2C0-0.01%2C0-0.01%2C0%20c-0.02-0.01-0.04-0.01-0.07-0.02c-0.01%2C0-0.02-0.01-0.03-0.01c-0.02-0.01-0.03-0.01-0.05-0.02c-0.02-0.01-0.03-0.02-0.05-0.02%20c-0.01%2C0-0.02-0.01-0.03-0.01c-0.02-0.01-0.04-0.02-0.06-0.04c0%2C0-0.01-0.01-0.01-0.01c-0.09-0.06-0.18-0.14-0.25-0.24l-10-13.5%20v12.94c0%2C0.54-0.44%2C0.97-0.97%2C0.97H45.2c-0.54%2C0-0.97-0.43-0.97-0.97V33.23c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.01%2C0%2C0.02%2C0%2C0.03%2C0%20c0.02%2C0%2C0.03%2C0%2C0.05%2C0c0.02%2C0%2C0.03%2C0%2C0.05%2C0.01c0.01%2C0%2C0.03%2C0%2C0.04%2C0.01c0.02%2C0%2C0.04%2C0.01%2C0.06%2C0.01c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.01%20c0.02%2C0.01%2C0.04%2C0.01%2C0.06%2C0.02c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.01c0.02%2C0.01%2C0.04%2C0.02%2C0.06%2C0.02c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.02%20c0.02%2C0.01%2C0.03%2C0.02%2C0.05%2C0.03c0.01%2C0.01%2C0.02%2C0.01%2C0.03%2C0.02c0.02%2C0.01%2C0.03%2C0.02%2C0.05%2C0.03c0.01%2C0.01%2C0.02%2C0.01%2C0.03%2C0.02%20c0.02%2C0.01%2C0.04%2C0.03%2C0.05%2C0.04c0.01%2C0.01%2C0.01%2C0.01%2C0.02%2C0.02c0.02%2C0.02%2C0.04%2C0.04%2C0.06%2C0.06c0%2C0%2C0%2C0%2C0.01%2C0.01%20c0.03%2C0.03%2C0.05%2C0.06%2C0.08%2C0.1l9.98%2C13.48V33.23c0-0.54%2C0.44-0.97%2C0.97-0.97h3.51c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97V55.02z%20M84.32%2C36.74%20c0%2C0.54-0.43%2C0.97-0.97%2C0.97h-9.53v3.68h9.53c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97v3.51c0%2C0.54-0.43%2C0.97-0.97%2C0.97h-9.53v3.68h9.53%20c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97v3.51c0%2C0.54-0.43%2C0.97-0.97%2C0.97H69.34h0c-0.26%2C0-0.5-0.1-0.67-0.27c0%2C0-0.01-0.01-0.01-0.01%20c0%2C0-0.01-0.01-0.01-0.02c-0.17-0.17-0.27-0.41-0.27-0.67v0V33.23v0c0-0.26%2C0.1-0.5%2C0.27-0.67c0-0.01%2C0.01-0.01%2C0.02-0.02%20c0%2C0%2C0.01-0.01%2C0.01-0.01c0.18-0.17%2C0.41-0.27%2C0.68-0.27h0h14.01c0.54%2C0%2C0.97%2C0.44%2C0.97%2C0.97V36.74z%22%2F%3E%3C%2Fsvg%3E');} .feature-share__bottom .feature-share-list li .icon-facebook:hover{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%231778f2%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M73.15%2C32.8H57.61c0-4.9%2C0-8.38%2C0-9.46c0-5.6%2C2.92-6.19%2C4.91-6.19c1.98%2C0%2C10.62%2C0%2C10.62%2C0V0c0%2C0-2.1%2C0-15.65%2C0%20C39.16%2C0%2C36.47%2C13.42%2C36.47%2C22.18c0%2C1.47%2C0%2C5.34%2C0%2C10.62H26.44v17.28h10.03c0%2C22.44%2C0%2C49.91%2C0%2C49.91h21.14c0%2C0%2C0-27.73%2C0-49.91H71.4%20L73.15%2C32.8z%22%2F%3E%3C%2Fsvg%3E');} .feature-share__bottom .feature-share-list li .icon-twitter:hover{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%2026%2026%22%20style%3D%22enable-background%3Anew%200%200%2026%2026%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%3Cpath%20class%3D%22st0%22%20d%3D%22M15.1%2C11.2l8.2-9.5h-1.9L14.2%2C10L8.6%2C1.7H2.1l8.6%2C12.5l-8.6%2C10H4l7.5-8.7l6%2C8.7H24L15.1%2C11.2L15.1%2C11.2z%20M12.5%2C14.4l-0.9-1.2l-6.9-10h3l5.5%2C8l0.9%2C1.2l7.3%2C10.4h-3L12.5%2C14.4L12.5%2C14.4z%22%2F%3E%3C%2Fsvg%3E');} @media screen and (max-width:834px){ .feature-share__bottom .feature-share-ttl{font-size: 18px;} } @media screen and (max-width:640px){ .feature-share__bottom{margin: 68px auto 0;} .feature-share__bottom .feature-share-list{font-size: 0;margin-top: 20px;} .feature-share__bottom .feature-share-list li{margin-right: 15px;} .feature-share__bottom .feature-share-list li a{width: 50px;height: 50px;background-size: 26px 26px;} } /* otherfeature -------------------------------------*/ .jf-otherFeature-container{margin: 120px 0;position: relative;} .jf-otherFeature-container .jf-otherFeature-container__inner{max-width: 1300px;margin: 0 auto;} .jf-otherFeature-container .otherFeature__label{font-size: 18px;display:block;font-weight: 400;} .jf-otherFeature-container .features-list{overflow-x: auto;padding: 30px 0;scroll-behavior: smooth;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch;margin-right: calc((100% - 100vw) / 2);-webkit-flex-wrap: nowrap;flex-wrap: nowrap;} .jf-otherFeature-container .features-list::-webkit-scrollbar{height:8px} .jf-otherFeature-container .features-list::-webkit-scrollbar-track{ border-radius:5px; background:#ebecf0} .jf-otherFeature-container .features-list::-webkit-scrollbar-thumb{ border-radius:5px; background:#283135} .jf-otherFeature-container .features-list > li{width: 460px;min-width: 460px;} .jf-otherFeature-container .features-list > li:nth-of-type(n+2){margin-top: 0; margin-left:20px} .jf-otherFeature-container .features-list > li .features-list__link .info{padding: 15px;} .jf-otherFeature-container .otherLink{font-size: 0;padding: 0;margin: 50px 0 0;text-align: center;} .jf-otherFeature-container .otherLink a{position:relative;display: inline-block;background-color: #fff;box-shadow:-5px -5px 10px #b1b1b11a, 5px 5px 10px #2424241a;color: #242424;text-decoration: none;font-size: 14px;line-height: 60px;height: 60px;text-align: center;padding: 0 20px;margin-right: 20px;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);overflow: hidden;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;min-width: -webkit-calc(300px - 40px);min-width: calc(300px - 40px);} .jf-otherFeature-container .otherLink a:last-of-type{margin-right:0;} .jf-otherFeature-container .otherLink a::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;} .jf-otherFeature-container .otherLink a span{display: inline-block;position: relative;} .jf-otherFeature-container .otherLink a .arrow-left{width: 34px;height: 1px;margin-right: 20px;} .jf-otherFeature-container .otherLink a .arrow-left::after{transition: .3s ease-in-out;position: absolute;margin: auto;content: "";height: 1px;width: 34px;background: #242424;display:block;bottom: 0;left: 0;} .jf-otherFeature-container .otherLink a .arrow-left::before{transition: .3s ease-in-out;position: absolute;margin: auto;content: "";height: 1px;width: 10px;background: #242424;display:block;bottom: 3px;left: -1px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);} .jf-otherFeature-container .otherLink a:hover{color:#fff;box-shadow: -2px -2px 5px #b1b1b11a, 2px 2px 5px #2424241a;} .jf-otherFeature-container .otherLink a:hover:before{-webkit-transform:scale(40);transform:scale(40)} .jf-otherFeature-container .otherLink a:hover .arrow-left::after, .jf-otherFeature-container .otherLink a:hover .arrow-left::before{background:#fff} @media screen and (max-width:834px){ .jf-otherFeature-container{margin: 30px 0 100px;} .jf-otherFeature-container .otherFeature__label{margin:0 30px} } @media screen and (max-width:640px){ .jf-otherFeature-container{margin: 30px 0 80px;} .jf-otherFeature-container .jf-otherFeature-container__inner{margin: 0 20px;} .jf-otherFeature-container .otherFeature__label{margin:0; font-size:16px} .jf-otherFeature-container .features-list{overflow-x: inherit;padding: 0;margin:20px 0 0;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .jf-otherFeature-container .features-list > li{width: 100%;min-width: auto;} .jf-otherFeature-container .features-list > li:nth-of-type(n+2){margin-top: 20px;margin-left:0;} .jf-otherFeature-container .features-list > li .features-list__link .info{padding: 12px;} .jf-otherFeature-container .otherLink{margin:40px 0 0} .jf-otherFeature-container .otherLink a{line-height: 50px;height:50px;margin-right:0;min-width: -webkit-calc(280px- 40px);min-width: calc(280px - 40px);width:-webkit-calc(100% - 40px);width: calc(100% - 40px);padding: 0 20px;max-width: -webkit-calc(350px - 40px);max-width: calc(350px - 40px);} .jf-otherFeature-container .otherLink a:nth-of-type(n+2){margin-top:15px;} .jf-otherFeature-container .otherLink a:hover:before{-webkit-transform:scale(70);transform:scale(70)} .jf-otherFeature-container .otherLink a .arrow-left{width: 25px; margin-right:15px} .jf-otherFeature-container .otherLink a .arrow-left::after{width: 25px;} } /* ================================== featureDetail ver2.0.0 ================================== */ .featureBody-pl1{overflow-x:hidden} .jf-feature-header{padding: 0 0 90px;position: relative;} .jf-feature-header .jf-feature-header__inner{ max-width: 1300px;margin: 0 auto;} .jf-feature-header .p-breadcrumbs {position: relative;white-space: nowrap;overflow: scroll;padding: 20px 0;} .jf-feature-header .p-breadcrumbs::-webkit-scrollbar {display:none;} .jf-feature-header .p-breadcrumbs .p-breadcrumbsList {margin: 0 auto;padding: 0;display: -webkit-flex;display: flex;} .jf-feature-header .p-breadcrumbs .p-breadcrumbsList li{display: inline;position: relative;padding-right: 26px;font-size: 12px;font-style: italic;} .jf-feature-header .p-breadcrumbs .p-breadcrumbsList li:last-of-type{padding-right:0} .jf-feature-header .p-breadcrumbs .p-breadcrumbsList li.rightArrow::after{right: 10px;position:absolute;border-top: 1px solid #555;border-right: 1px solid #555;content:"";width: 6px;height: 6px;top: 50%;-webkit-transform: translate(0,-50%) rotate(45deg);-moz-transform: translate(0,-50%) rotate(45deg);-ms-transform: translate(0,-50%) rotate(45deg);-o-transform: translate(0,-50%) rotate(45deg);transform: translate(0,-50%) rotate(45deg);} .jf-feature-header .p-breadcrumbs .p-breadcrumbsList li a{color:#202020;-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-feature-header .p-breadcrumbs .p-breadcrumbsList li a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} .jf-feature-header .featureDetail-title{font-size: 36px;line-height: 1.6;margin-top: 36px;font-weight: 400;} .jf-feature-header .featureDetail-dates{display: -webkit-flex;display: flex;margin-top: 15px;} .jf-feature-header .featureDetail-dates [class^="entry-"]{display: -webkit-flex;display: flex; -webkit-align-items: center;align-items: center;} .jf-feature-header .featureDetail-dates [class^="entry-"]:nth-of-type(n+2){margin-left:20px;} .jf-feature-header .featureDetail-dates .icon-date{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%23202020%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: 16px;height: 16px;margin-right: 10px;display: inline-block;} .jf-feature-header .featureDetail-dates .icon-update{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%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%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%22M347.2%2C100.8l-96-96C246.7%2C0%2C240-1.3%2C233.9%2C1.3S224%2C9.6%2C224%2C16v48h-16C84.5%2C64-14.7%2C172.8%2C1.9%2C299.5%20c6.4%2C49.5%2C30.6%2C92.3%2C65.8%2C123.9c6.2%2C5.6%2C15.9%2C5%2C21.9-1L134%2C378c6.4-6.4%2C6.4-16.9-0.4-22.8c-17.5-15.2-30.2-35.7-35.1-59.8%20c-15-72%2C40-135.4%2C109.4-135.4h16v48c0%2C6.4%2C3.8%2C12.2%2C9.9%2C14.7s12.8%2C1.3%2C17.3-3.5l96-96C353.6%2C117.1%2C353.6%2C106.9%2C347.2%2C100.8z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M510.1%2C212.5c-6.4-49.5-30.6-92.3-65.8-123.9c-6.2-5.6-15.9-5-21.9%2C1L378%2C134c-6.4%2C6.4-6.4%2C16.9%2C0.4%2C22.8%20c17.5%2C15.3%2C30.2%2C35.8%2C35.1%2C59.8c15%2C72-40%2C135.4-109.4%2C135.4h-16v-48c0-6.4-3.8-12.2-9.9-14.7s-12.8-1.3-17.3%2C3.5l-96%2C96%20c-6.4%2C6.1-6.4%2C16.3%2C0%2C22.4l96%2C96c4.5%2C4.8%2C11.2%2C6.1%2C17.3%2C3.5c6.1-2.6%2C9.9-8.3%2C9.9-14.7v-48h16C427.5%2C448%2C526.7%2C339.2%2C510.1%2C212.5z%22%20%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');width: 16px;height: 16px;margin-right: 10px;display: inline-block;} .jf-feature-container{ display: -webkit-flex;display: flex;margin: 0 auto; max-width: 1300px;} .jf-feature-container .featureDetail-layout__main{width: -webkit-calc(100% - 380px);width: calc(100% - 380px);margin-right: 50px;} .jf-feature-container .mainContent{font-size: 14px;line-height:1.8;word-break: break-word;} .jf-feature-container .featureDetail-layout__sidebar{position: relative;width: 330px;} .jf-feature-container .featureDetail-layout__sidebar__inner{padding: 36px 0 0 50px;position: sticky;top: 0;} @media screen and (max-width:834px){ .jf-feature-header{padding: 0 0 50px;} .jf-feature-header .jf-feature-header__inner{margin: 0 30px;} .jf-feature-header .featureDetail-title{font-size: 28px;margin-top: 24px;} .jf-feature-container{-webkit-flex-wrap: wrap;flex-wrap: wrap;} .jf-feature-container .featureDetail-layout__main{width: auto;margin: 0 30px;} .jf-feature-container .mainContent{font-size: 13px;} .jf-feature-container .featureDetail-layout__sidebar{width: 100%;margin-top:80px} .jf-feature-container .featureDetail-layout__sidebar__inner{padding: 0;position: inherit;} } @media screen and (max-width:640px){ .jf-feature-header{padding: 0 0 40px;} .jf-feature-header::after{bottom: -125px;height: 125px;;} .jf-feature-header .jf-feature-header__inner{margin: 0 20px;} .jf-feature-header .p-breadcrumbs {padding: 12px 0;} .jf-feature-header .p-breadcrumbs .p-breadcrumbsList li {font-size: 12px;} .jf-feature-header .featureDetail-dates{font-size: 12px} .jf-feature-header .featureDetail-title{font-size: 20px;margin-top: 18px;} .jf-feature-container .featureDetail-layout__main{margin: 0 20px;} .jf-feature-container .featureDetail-layout__sidebar{margin-top:60px} } /* thumbnail -------------------------------------*/ .jf-feature-container .feature-thumbnail{max-width: 730px;margin: 0 auto;} .jf-feature-container .feature-thumbnail-inner{border-radius: 5px;overflow: hidden;height: auto;} .jf-feature-container .feature-thumbnail-inner img{display: block;width: 100%;height: 100%;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ } /* Lead img video -------------------------------------*/ .jf-feature-container .feature-Lead{margin-top: 80px;} .jf-feature-container .feature-content .feature-img{width: 100%;max-width: 730px;margin: 62px auto;display: block;} .jf-feature-container .imgSize-full{} .jf-feature-container .videoBox {width: auto;display: flex;max-width: 730px;margin: 50px auto;} .jf-feature-container .videoBox iframe {width: 100%;} @media screen and (max-width:834px){ .jf-feature-container .feature-Lead{margin-top: 50px;} .jf-feature-container .feature-content .feature-img{max-width: 500px;} } @media screen and (max-width:640px){ .jf-feature-container .feature-Lead{margin-top: 40px;} .jf-feature-container .feature-content .feature-img{margin: 40px auto;} .jf-feature-container .videoBox {margin: 40px auto;} } /* feature-toc -------------------------------------*/ .jf-feature-container .feature-toc{position: relative;border-radius: 0;margin: 80px auto 0;padding: 30px;border-bottom: 1px solid #eeeeee;border-top: 1px solid #eeeeee;max-width: 740px;} .jf-feature-container .feature-toc__header{position: relative;display: block;margin-right: auto;margin-left: auto;text-align: center;color: #fff;border-radius: 50px;background: #283135;width: 240px;padding: 6px 0;} .jf-feature-container .toc_title{display: -webkit-flex;display: flex;-webkit-align-items: center; align-items: center;-webkit-justify-content: center;justify-content: center;} .jf-feature-container .toc_title .icon-note{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%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%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%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M352.5%2C220c0-11-9-20-20-20h-206c-11%2C0-20%2C9-20%2C20s9%2C20%2C20%2C20h206C343.5%2C240%2C352.5%2C231%2C352.5%2C220z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M126.5%2C280c-11%2C0-20%2C9-20%2C20s9%2C20%2C20%2C20h125.1c11%2C0%2C20-9%2C20-20s-9-20-20-20H126.5z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M173.5%2C472h-66.9c-22.1%2C0-40-17.9-40-40V80c0-22.1%2C17.9-40%2C40-40h245.9c22.1%2C0%2C40%2C17.9%2C40%2C40v123%20c0%2C11%2C9%2C20%2C20%2C20s20-9%2C20-20V80c0-44.1-35.9-80-80-80H106.6c-44.1%2C0-80%2C35.9-80%2C80v352c0%2C44.1%2C35.9%2C80%2C80%2C80h66.9%20c11%2C0%2C20-9%2C20-20S184.5%2C472%2C173.5%2C472z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M467.9%2C289.6c-23.4-23.4-61.5-23.4-84.8%2C0L273.2%2C399.1c-2.3%2C2.3-4.1%2C5.2-5%2C8.3l-23.9%2C78.7%20c-2.1%2C7-0.3%2C14.6%2C4.8%2C19.8c3.8%2C3.9%2C9%2C6%2C14.3%2C6c1.8%2C0%2C3.6-0.2%2C5.3-0.7l80.7-22.4c3.3-0.9%2C6.4-2.7%2C8.8-5.1l109.6-109.4%20C491.3%2C351%2C491.3%2C313%2C467.9%2C289.6z%20M333.8%2C451.8L293.2%2C463l11.9-39.1l74.1-73.9l28.3%2C28.3L333.8%2C451.8z%20M439.6%2C346.1l-3.9%2C3.9%20l-28.3-28.3l3.9-3.9c7.8-7.8%2C20.5-7.8%2C28.3%2C0S447.4%2C338.3%2C439.6%2C346.1z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M332.5%2C120h-206c-11%2C0-20%2C9-20%2C20s9%2C20%2C20%2C20h206c11%2C0%2C20-9%2C20-20S343.5%2C120%2C332.5%2C120z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');width: 18px;height: 18px;margin-right: 10px;display: inline-block;} .jf-feature-container .feature-toc__body{margin-top: 30px; overflow-y:auto; max-height: 360px;} .jf-feature-container .feature-toc__body::-webkit-scrollbar{width:8px} .jf-feature-container .feature-toc__body::-webkit-scrollbar-track{ border-radius:5px; background:#fff} .jf-feature-container .feature-toc__body::-webkit-scrollbar-thumb{ border-radius:5px; background:#283135} .jf-feature-container .toc_itemWrap{font-size: 15px;} .jf-feature-container .toc_itemWrap:nth-of-type(n+2){margin-top: 10px;} .jf-feature-container .toc_item{margin-left: 20px;} .jf-feature-container .toc_item:nth-of-type(n+2){margin-top: 10px;} .jf-feature-container .toc_itemWrap a{color:#303030;text-decoration:none;-ms-transition: 0.3s;transition: 0.3s;-webkit-box-shadow: inset 0 -1px 0 0 #111;box-shadow: inset 0 -1px 0 0 #111;} .jf-feature-container .toc_itemWrap a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} .jf-feature-container .toc_itemWrap .toc_itemWrap{margin-top: 10px;} .jf-feature-container .toc_item_number{font-style: italic;margin-right: 15px;color: #949494;} /* sidebar用に調整 */ .jf-feature-container .sidebar-toc{margin-top: 0;padding: 30px 20px;} .jf-feature-container .sidebar-toc .feature-toc__header{width: 190px;} .jf-feature-container .sidebar-toc .feature-toc__body{margin-top: 20px;max-height: 180px;} .jf-feature-container .sidebar-toc .toc_itemWrap{font-size: 13px;} .jf-feature-container .sidebar-toc .toc_item{margin-left: 10px;} .jf-feature-container .toc_item_number{margin-right: 10px;} @media screen and (max-width:834px){ .jf-feature-container .feature-toc{margin: 50px auto 0;} .jf-feature-container .feature-toc__body{ max-height: 280px;} .jf-feature-container .toc_itemWrap{font-size: 14px;} .jf-feature-container .toc_itemWrap:nth-of-type(n+2){margin-top: 8px;} .jf-feature-container .toc_item:nth-of-type(n+2){margin-top: 8px;} .jf-feature-container .toc_itemWrap .toc_itemWrap{margin-top: 8px;} .jf-feature-container .sidebar-toc{display:none} } @media screen and (max-width:640px){ .jf-feature-container .feature-toc{margin: 40px auto 0;padding: 30px 20px;} .jf-feature-container .feature-toc__header{width: 200px;} .jf-feature-container .toc_itemWrap{font-size: 13px;} .jf-feature-container .toc_item{margin-left: 15px;} } /* chattingBox 吹き出し（会話形式） -------------------------------------*/ *[class^="chattingBox"] {display: table;width: 100%;margin: 1.5em 0;display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flexbox;display: flex;} *:not([class^="chattingBox"]) + *[class^="chattingBox"], *[class^="chattingBox"]:first-of-type{margin-top:80px} *[class^="chattingBox"] .faceIcon {display: table-cell;width: 100px;padding-right: 30px;text-align: center;vertical-align: top;} *[class^="chattingBox"] .faceIcon img {width: 100%;height: auto;border: solid 3px #eaedf2;border-radius: 50%;box-sizing: border-box;} *[class^="chattingBox"] .faceIcon span {font-size: 11px;font-weight: 400;display: block;margin-top: 5px;line-height: 1.8;} *[class^="chattingBox"] .chatting {display: table-cell;position: relative;width: -webkit-calc(100% - 130px);width: calc(100% - 130px);font-size: 0.95em;vertical-align: top;} *[class^="chattingBox"] .chatting .txt {display: inline-block;text-align: left;padding: 20px;border-radius: 25px;word-break: break-word;position: relative;box-shadow: -3px -3px 10px #e8e9ea, 3px 3px 10px #BABECC;} *[class^="chattingBox"] .chatting .txt::after {display: inline-block;position: absolute;top: 18px;left: -28px;border: 15px solid transparent;border-right: 15px solid #fff;content: "";} /*吹き出し（右）*/ .chattingBox__right {text-align: right; -webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;} .chattingBox__right .faceIcon {padding: 0 0 0 30px;} .chattingBox__right .chatting .txt{background: #283135;color: #fff;} .chattingBox__right .chatting .txt:after {right: -28px;left: auto;border: 15px solid transparent;border-left: 15px solid #283135;} @media screen and (max-width:834px){ *:not([class^="chattingBox"]) + *[class^="chattingBox"], *[class^="chattingBox"]:first-of-type{margin-top:50px} *[class^="chattingBox"] .faceIcon {width: 80px;padding-right: 20px;} *[class^="chattingBox"] .chatting {width: -webkit-calc(100% - 100px);width: calc(100% - 100px);} *[class^="chattingBox"] .chatting .txt {padding:15px;border-radius: 12px;} *[class^="chattingBox"] .chatting .txt::after {left: -20px;border: 10px solid transparent;border-right: 10px solid #fff;} .chattingBox__right .faceIcon {padding: 0 0 0 20px;} .chattingBox__right .chatting .txt:after {right: -20px;left: auto;border: 10px solid transparent;border-left: 10px solid #283135;} } @media screen and (max-width:640px){ } /* commentBox_ptn1 -------------------------------------*/ .commentBox_ptn1{background: url(/img/feature/commentBox_ptn1__bg1.jpg) repeat 0 0;background-size: 21px auto;margin: 68px auto 0;padding: 54px 0 48px;color: #fff;} .commentBox_ptn1 .commentBox_tit{margin: 0 auto;max-width: 225px;font-size: 24px;text-align: center;} .commentBox_ptn1 .commentBox_tit img{display: block; width: 100%;} .commentBox_ptn1 .commentBox_items{margin-top: 28px;padding: 0 72px;} .commentBox_ptn1 .commentBox_items .item{} .commentBox_ptn1 .commentBox_items .item:nth-of-type(n+2){margin-top: 28px;} .commentBox_ptn1 .commentBox_items .staff{display: flex;flex-wrap: wrap;align-items: center;} .commentBox_ptn1 .commentBox_items .icon{width: 80px;} .commentBox_ptn1 .commentBox_items .icon img{display: block;width: 100%;height: auto;border-radius: 50%;box-sizing: border-box;} .commentBox_ptn1 .commentBox_items .name{margin-left: 20px;} .commentBox_ptn1 .commentBox_items .name a{color: #fff;text-decoration: underline;transition: .5s ease-in-out;} .commentBox_ptn1 .commentBox_items .name a:hover{opacity:0.7;} .commentBox_ptn1 .commentBox_items .name span{display: block; font-size: 0.9em;} .commentBox_ptn1 .commentBox_items .txt{margin-top: 12px;} @media screen and (max-width:834px){ .commentBox_ptn1{margin: 42px auto 0; padding: 40px 0 38px;} .commentBox_ptn1 .commentBox_tit{max-width: 176px;font-size: 16px;} .commentBox_ptn1 .commentBox_items{padding: 0 30px;} .commentBox_ptn1 .commentBox_items .item:nth-of-type(n+2){margin-top: 28px;} .commentBox_ptn1 .commentBox_items .icon{width: 60px;} .commentBox_ptn1 .commentBox_items .name{margin-left: 16px;} .commentBox_ptn1 .commentBox_items .txt{font-size: 0.95em;} } @media screen and (max-width:640px){ } /* itemBox_ptn1 -------------------------------------*/ .itemBox_ptn1{display: flex;flex-wrap: wrap;align-items: center;margin: 80px auto 0;gap: 0 48px;} .itemBox_ptn1 .txtArea{width: -webkit-calc(44% - 48px);width: calc(44% - 48px);} .itemBox_ptn1 .txtArea .brand{letter-spacing: 0.05em;font-size: 24px;font-weight: 400;line-height: 1.6;} .itemBox_ptn1 .txtArea .itemName{margin-top: 3px;} .itemBox_ptn1 .txtArea .price{margin-top: 3px;} .itemBox_ptn1 .txtArea .txt{margin-top: 24px;} .itemBox_ptn1 .txtArea .btn{margin-top: 18px;} .itemBox_ptn1 .txtArea .btn a{font-size: 12px;letter-spacing: 0.1em;line-height: 32px;text-align: center;color: #fff;display: block;padding-left: 0.1em;width: 120px;height: 32px;background: #000;transition: .5s ease-in-out;text-decoration: none;} .itemBox_ptn1 .txtArea .btn a:hover{transform: translateY(-2px);} .itemBox_ptn1 .imgArea{width: 56%;} .itemBox_ptn1 .imgArea .img{} .itemBox_ptn1 .imgArea .img img{display: block;width: 100%;} .itemBox_ptn1.type__right{} .itemBox_ptn1.type__right .txtArea{order: 2;} .itemBox_ptn1.type__right .imgArea{order: 1;} @media screen and (max-width:1200px){ .itemBox_ptn1{gap: 48px 0;} .itemBox_ptn1 .txtArea{width:100%;} .itemBox_ptn1 .imgArea{width:100%;max-width: 730px;margin: 0 auto;} .itemBox_ptn1.type__left .txtArea{order: 2;} .itemBox_ptn1.type__left .imgArea{order: 1;} } @media screen and (max-width:640px){ .itemBox_ptn1{margin: 42px auto 0;gap: 28px 0;} .itemBox_ptn1 .txtArea .brand{font-size: 18px;} .itemBox_ptn1 .txtArea .itemName{font-size: 12px;} .itemBox_ptn1 .txtArea .price{font-size: 12px;} .itemBox_ptn1 .txtArea .txt{margin-top: 16px;} .itemBox_ptn1 .txtArea .btn a{font-size: 11px;} } /* feature-itemList-ptn2 -------------------------------------*/ .jf-feature-container .feature-itemList-ptn2 {margin-top: 80px;font-family: 'Cairo', sans-serif;} .jf-feature-container .feature-itemList-ptn2 .listTitle {position:relative;font-size: 24px;letter-spacing: .03em;text-align: center;font-family: geom-graphic, sans-serif;} .jf-feature-container .feature-itemList-ptn2 .listTitle:after {content: "";display: block;width: 40px;height: 3px;position: absolute;background: #000;left: 50%;-webkit-transform: translate(-50%,0);-moz-transform: translate(-50%,0);-ms-transform: translate(-50%,0);-o-transform: translate(-50%,0);transform: translate(-50%,0);bottom: -15px;} .jf-feature-container .feature-itemList-ptn2 .itemList{margin-top: 50px;text-align:-webkit-left;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-lines: multiple;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .jf-feature-container .feature-itemList-ptn2 .itemList li{width: 31%;width: -webkit-calc(100% / 3 - 13px);width: calc(100% / 3 - 14px);margin-right: 20px;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(3n){margin-right:0;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(n+4){margin-top: 20px;} .jf-feature-container .feature-itemList-ptn2 .itemList li a{transition: 0.3s ease-in-out;display: block;color: #000;} .jf-feature-container .feature-itemList-ptn2 .itemList li a:hover{opacity:0.7} .jf-feature-container .feature-itemList-ptn2 .itemList li img{display: block;width: 100%;} .jf-feature-container .feature-itemList-ptn2 .itemList li a span {display: block;line-height: 1.4;} .jf-feature-container .feature-itemList-ptn2 .itemList li a span:first-of-type {margin-top: 8px;font-weight:bold;} .jf-feature-container .feature-itemList-ptn2 .itemList li a .brandName {font-size: 18px;} .jf-feature-container .feature-itemList-ptn2 .itemList li a .itemCategory, .jf-feature-container .feature-itemList-ptn2 .itemList li a .price {font-size: 13px;} @media screen and (max-width:834px){ .jf-feature-container .feature-itemList-ptn2 .listTitle {font-size: 18px;} .jf-feature-container .feature-itemList-ptn2 .itemList li{width: -webkit-calc(100% / 4 - 7.5px);width: calc(100% / 4 - 7.5px);margin-right: 10px;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(3n){margin-right:10px;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(4n){margin-right:0;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(n+4){margin-top: 0;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(n+5){margin-top:20px;} .jf-feature-container .feature-itemList-ptn2 .itemList li a .brandName {font-size: 16px;} } @media screen and (max-width:640px){ .jf-feature-container .feature-itemList-ptn2 {margin-top: 40px;} .jf-feature-container .feature-itemList-ptn2 .itemList {margin-top: 40px;} .jf-feature-container .feature-itemList-ptn2 .itemList li{width: -webkit-calc(100% / 4 - 7.5px);width: calc(100% / 2 - 5px);margin-right: 10px;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(2n){margin-right:0;} .jf-feature-container .feature-itemList-ptn2 .itemList li:nth-of-type(n+3){margin-top:20px;} .jf-feature-container .feature-itemList-ptn2 .itemList li a .brandName {font-size: 14px;} .jf-feature-container .feature-itemList-ptn2 .itemList li a .itemCategory, .jf-feature-container .feature-itemList-ptn2 .itemList li a .price {font-size: 12px;} } /* feature-linkCard-ptn1 -------------------------------------*/ .jf-feature-container .feature-linkCard-ptn1{position: relative;transition: .5s;color: #202020;text-decoration: none;background-color: #fff;overflow: hidden;display: -webkit-flex;display: flex;max-width: 600px;margin: 30px auto 0;box-shadow: -5px -5px 10px #b1b1b11a, 5px 5px 10px #2424241a;padding: 16px;max-width: -webkit-calc(600px - 32px);max-width: calc(600px - 32px);} .jf-feature-container .feature-linkCard-ptn1 .linkCard_img{overflow: hidden;position: relative;min-width: 120px;max-width: 120px;} .jf-feature-container .feature-linkCard-ptn1 .linkCard_img img{width: 100%;height: 120px;display: block;-ms-transition: 0.3s;transition: 0.3s;} .jf-feature-container .feature-linkCard-ptn1 .info{padding: 0 0 0 15px;position:relative;overflow: hidden;} .jf-feature-container .feature-linkCard-ptn1 .infoTitle{font-size: 14px;font-weight: 400;line-height: 1.8;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin: 0;} .jf-feature-container .feature-linkCard-ptn1 .infoMeta{margin-top: 10px;font-size: 13px;color: #999;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;white-space: nowrap;overflow: hidden;font-family: 'Unica One', cursive;} .jf-feature-container .feature-linkCard-ptn1 .infoMeta .meta__sex{padding-right: 10px;border-right: 1px solid #e5e5e5; margin-right: 10px;} .jf-feature-container .feature-linkCard-ptn1 .infoMeta .meta__time{} .jf-feature-container .feature-linkCard-ptn1:hover{box-shadow: -2px -2px 5px #b1b1b11a, 2px 2px 5px #2424241a;} .jf-feature-container .feature-linkCard-ptn1:hover .linkCard_img img{-webkit-transform: scale(1.1);transform: scale(1.1);} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ .jf-feature-container .feature-linkCard-ptn1 .linkCard_img{min-width: 90px;max-width: 90px;} .jf-feature-container .feature-linkCard-ptn1 .linkCard_img img{height: 90px;} .jf-feature-container .feature-linkCard-ptn1 .infoTitle{font-size: 13px;line-height: 1.6;} .jf-feature-container .feature-linkCard-ptn1 .infoMeta{margin-top: 4px;font-size: 12px;} } /* category　tag-list(sidebar用) -------------------------------------*/ .featureDetail-layout__sidebar .category-list{margin-top: 20px;} .featureDetail-layout__sidebar .category-list li{} .featureDetail-layout__sidebar .category-list li a{color: #202020;transition: .5s;text-decoration: none;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;-webkit-justify-content: space-between;justify-content: space-between;padding: 10px 15px;border-radius: 5px;} .featureDetail-layout__sidebar .category-list li a:hover{box-shadow: -5px -5px 15px #e8e9ea, 5px 5px 15px #BABECC;} .featureDetail-layout__sidebar .category-list .icon-arrow{height: 30px;width: 30px;transition: .5s;background-color: #ebecf0;border-radius: 15px;background-repeat: no-repeat;background-size: 18px 18px;background-position: 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%20511%20511%22%20style%3D%22enable-background%3Anew%200%200%20511%20511%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%3Cpath%20class%3D%22st0%22%20d%3D%22M325.8%2C446.1c-6.5%2C0-13.1-1.3-19.3-3.9c-18.8-7.8-30.9-25.9-30.9-46.1v-42.9c0-11%2C8.9-20%2C20-20%20c11%2C0%2C20%2C8.9%2C20%2C20v42.9c0%2C6%2C4.4%2C8.4%2C6.3%2C9.2c1.9%2C0.8%2C6.9%2C2.2%2C11.2-2.1l132.4-132.6c7.8-7.8%2C7.8-20.5%2C0-28.3L332.8%2C109.7%20c-4.3-4.3-9.2-2.9-11.2-2.1c-1.9%2C0.8-6.3%2C3.2-6.3%2C9.2v120.7c0%2C22-17.9%2C39.9-39.9%2C39.9H20c-11%2C0-20-8.9-20-20c0-11%2C8.9-20%2C20-20%20h255.5V116.8c0-20.2%2C12.1-38.3%2C30.9-46.1c18.9-7.8%2C40.3-3.6%2C54.7%2C10.8l132.4%2C132.6c23.3%2C23.4%2C23.3%2C61.4%2C0%2C84.8L361.1%2C431.4%20C351.5%2C441%2C338.8%2C446.1%2C325.8%2C446.1z%22%2F%3E%3C%2Fsvg%3E');} .featureDetail-layout__sidebar .category-list li a:hover .icon-arrow{background-color:#001335;} .featureDetail-layout__sidebar .tag-list{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;margin-top: 20px;} .featureDetail-layout__sidebar .tag-list li{margin-right: 6px;margin-bottom: 6px;text-align: center;} .featureDetail-layout__sidebar .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;} .featureDetail-layout__sidebar .tag-list li a:hover{border: #001335 1px solid;} @media screen and (max-width:834px){ .featureDetail-layout__sidebar .category-list{ display: -webkit-flex;display: flex;-webkit-flex-wrap: nowrap;flex-wrap: nowrap; overflow-x: scroll;scroll-behavior: smooth;-ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; width: -webkit-calc(100vw - 40px); width: calc(100vw - 40px);padding: 10px 0 10px 10px; margin-top:10px;} .featureDetail-layout__sidebar .category-list li:nth-of-type(n+2){margin-left:10px} .featureDetail-layout__sidebar .category-list li a{box-shadow: -3px -3px 10px #e8e9ea, 3px 3px 10px #BABECC;white-space: nowrap;} .featureDetail-layout__sidebar .category-list .icon-arrow{height: 22px;width: 22px;border-radius: 22px;background-size: 12px 12px;margin-left: 15px;} .featureDetail-layout__sidebar .category-list li a:hover{box-shadow: -1px -1px 5px #e8e9ea, 1px 1px 5px #BABECC;} } @media screen and (max-width:640px){ .featureDetail-layout__sidebar .category-list{width: -webkit-calc(100vw - 30px);width: calc(100vw - 30px);} } /* ================================== featureDetail_pl3 ver2.0.0 ================================== */ /* jquery.inview.min.js ---------------------------------------- */ .fadeAnimation {opacity: 0;transform: translate(0, 40px);-webkit-transform: translate(0, 40px);transition: .5s;} .fadeInDown { opacity: 1.0;transform: translate(0, 0); -webkit-transform: translate(0, 0);} /* #feature-header -------------------------------- */ .featureBody-pl3 #mod_menuBtn{z-index: 12;position:fixed;top: 50px;left: 50px;width: 50px;height: 16px;cursor:pointer;} .featureBody-pl3 #mod_menuBtn span{display:block;width:100%;height: 1px;background-color:#333;transition:0.2s all ease-in-out;} .featureBody-pl3 #mod_menuBtn span:nth-of-type(1){ position:absolute; top:0; left:0} .featureBody-pl3 #mod_menuBtn span:nth-of-type(2){position:absolute;top: 7px;left:0;} .featureBody-pl3 #mod_menuBtn span:nth-of-type(3){position:absolute;top: 14px;width: 60%;left:0;} .featureBody-pl3 #mod_menuBtn:hover span:nth-of-type(1){ top:-3px} .featureBody-pl3 #mod_menuBtn:hover span:nth-of-type(3){ top:17px} .featureBody-pl3 .is-ready{ transform:translate(0,0)} @media screen and (max-width:834px){ .featureBody-pl3 #mod_menuBtn{top: 43px;left: 40px;} } @media screen and (max-width:640px){ .featureBody-pl3 #mod_menuBtn{top: 29px;left: 25px;width: 35px;} .featureBody-pl3 #mod_menuBtn span{height: 1px} } /* headerContainer -------------------------------------*/ #headerContainer {position: relative;display: block;width: 100%;height: 110px;top: 0;z-index: 10;} #headerContainer .header__logo {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);font: 0/0 a;background-repeat: no-repeat;width: 300px;height: 22px;display: inline-block;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%20300%2022%22%20style%3D%22enable-background%3Anew%200%200%20300%2022%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M158.1%2C1.08v1.23h-0.07c-0.08%2C0.77-0.16%2C1.54-0.62%2C1.97c-0.23-0.05-0.46%2C0.09-0.46%2C0.32c-1.3%2C0.7-2.82-0.23-4.35%2C0.16%20c-0.77-0.39-1.83%2C0-2.69-0.24c-0.62%2C0.17-1.45-0.14-2.21%2C0c-1.23%2C0.32-2.92-0.14-3.38%2C1.08v0.77c-0.21%2C0.38-0.38%2C0.84-0.6%2C1.3%20c0.39%2C0.78%2C1.44%2C0.78%2C2.44%2C0.7v0.08c1.29%2C0.21%2C2.52%2C0.07%2C3.75%2C0.14l0.31-0.31l4.29%2C0.08c0.22%2C0.15%2C0.31%2C0.54%2C0.69%2C0.37%20c0%2C0.17-0.08%2C0.32%2C0.07%2C0.39h0.16v1.92c-0.37%2C0.23-0.37%2C0.76-0.61%2C1.14l-0.86%2C0.55c-3.51-0.17-7.18%2C0.14-10.48%2C0.08%20c-0.61%2C0.75-0.54%2C1.54-0.69%2C2.43l-0.15%2C4.22c-0.4%2C0.23%2C0%2C0.85-0.55%2C1c-1.16%2C0.39-2.36%2C0.39-3.52%2C0.62%20c-1.06-0.09-2.06-0.4-2.98-0.84c0.08-0.78-0.83-1.31-0.45-2.16c0.15%2C0%2C0.22-0.13%2C0.3-0.22c-0.08-0.69-0.23-1.91%2C0.07-2.61%20c-0.54-3.58%2C0.62-6.72%2C0.47-10.25c0.38-0.75%2C0-1.45%2C0.38-2.14c-0.29-0.84%2C0.46-1.45%2C0.77-1.83c2.76-0.77%2C6.12-0.08%2C9.04-0.53%20c3.67%2C0.07%2C7.27-0.16%2C10.96-0.23C157.48%2C0.32%2C157.8%2C0.78%2C158.1%2C1.08z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M195.46%2C0.78c1.08%2C0.23%2C2.23%2C0.31%2C3.22%2C0.71c0.54%2C0.44%2C1.61%2C0.21%2C1.9%2C0.83c0.7%2C0.08%2C1.32%2C0.46%2C1.47%2C1.07h0.31%20c-0.17%2C0.3%2C0.23%2C0.39%2C0.37%2C0.47c0.55%2C0.53%2C0.55%2C1.3%2C1.08%2C1.83c0%2C0.75%2C0.15%2C1.68-0.16%2C2.29v0.68c-0.53%2C0.08-0.37%2C0.47-0.92%2C0.47%20c-1.36%2C0.23-2.98-0.39-4.58-0.23c0-0.24-0.31-0.17-0.46-0.17l-1.07-0.37c-0.62-1.38-1.85-2.55-3.68-2.61V5.69%20c-0.62-0.16-1.38-0.16-2%2C0c-0.84-0.16-1.46%2C0.68-2.22%2C0.75c-0.22%2C0.71-1.08%2C0.31-1.22%2C0.93c-0.53-0.21-0.3%2C0.54-0.62%2C0.54%20c-0.76%2C1-1.52%2C2.38-0.92%2C3.66c0.23%2C0.84%2C0.08%2C1.83%2C0.23%2C2.69c0.63%2C1.22%2C1.68%2C2.07%2C3.15%2C2.51c0%2C0.17%2C0.14%2C0.23%2C0.3%2C0.23%20c1.23%2C0.15%2C2.3-0.23%2C3.36-0.29c1.92-0.63%2C2.84-3.22%2C5.06-3.53h5.21c-0.16%2C0.85%2C0.83%2C1.31%2C0.46%2C2.3c-0.46%2C1.08-1.92%2C1.84-2.69%2C2.68%20c-0.3-0.08-0.62%2C0-0.62%2C0.39c-1.07%2C0.54-1.91%2C1.45-3.12%2C1.61c-0.62%2C0.6-1.77%2C0.38-2.22%2C0.92c-0.78-0.16-1%2C0.38-1.78%2C0.29%20c-0.91%2C0.47-2.29%2C0.31-3.51%2C0.08c-1.01%2C0.3-1.93-0.15-2.92-0.08c-0.76-0.38-1.98%2C0-2.52-0.62c-0.85%2C0-1.22-0.76-1.92-0.84%20c-0.68%2C0-0.99-0.76-1.45-1.14c-0.08-0.15%2C0.07-0.38-0.08-0.45h-0.31c0-0.08%2C0.08-0.31-0.07-0.38c-0.08-0.09-0.54-0.39-0.54-0.7%20c-0.46-0.46-0.77-1.29-1.01-2c0-0.84-0.67-1.36-0.46-2.36c-0.3-0.31-0.07-0.77-0.14-1.15h0.07c0.15-1.31%2C0-2.76%2C0.84-3.52%20c0-0.68%2C0.47-1.06%2C0.54-1.7c0.98-1.13%2C2.45-2.6%2C3.83-3.67c0.61%2C0%2C1-0.68%2C1.55-0.84c0.82-0.16%2C1.52-0.76%2C2.59-0.52%20c0.54-0.32%2C1.23-0.32%2C1.83-0.55c0.7%2C0.08%2C1.45-0.61%2C2.23-0.15H195.46z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M226.25%2C1.63c0.14%2C1.07%2C0.14%2C2.36%2C0%2C3.44c-0.4-0.17-0.55%2C0.16-0.77%2C0.38c-1.3%2C0.37-2.67-0.38-3.75-0.14%20c-0.92-0.16-1.37%2C0.51-2.31%2C0.3c-0.98%2C0.38-0.37%2C1.6-0.51%2C2.37h-0.24c0.09%2C1.08-0.47%2C1.68-0.23%2C2.77h-0.15l-0.09%2C1.29%20c-0.3%2C0.3%2C0.24%2C0.84%2C0%2C1.3h-0.07c0.07%2C0.38-0.16%2C1.06%2C0.15%2C1.39c-0.31%2C2.05%2C0.99%2C4.73-1.46%2C5.65c-0.3%2C0.61-0.91%2C0.47-1.38%2C0.7%20c-1%2C0.07-2.54%2C0.07-3.14-0.62c-1.01%2C0.22-0.16-0.91-0.92-1.14v-1h0.07c-0.07-2.53%2C0.22-4.75%2C0.08-7.35h0.14l0.08-1.84h0.07%20c-0.29-1.16%2C1.07-2.62-0.45-2.99h-0.92V6.07c-1.54%2C0-3-0.31-4.37-0.46c-0.85-0.08-0.15-1.08-0.62-1.46%20c0.23-1.15%2C0.23-2.66%2C1.47-2.98c1.52%2C0.15%2C3.22-0.32%2C4.44%2C0.38c3.14-0.07%2C6.5%2C0.22%2C9.5-0.31c1.52%2C0.24%2C2.74-0.31%2C4.2-0.23%20L226.25%2C1.63z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M287.2%2C2.47c0%2C1.14%2C0.67%2C1.82%2C0.82%2C2.98h0.16c0.39%2C0.68%2C0.15%2C1.99%2C1.45%2C1.99c1.08-0.84%2C1.15-2.06%2C1.99-3.06%20c0.23-0.84%2C0.84-1.6%2C1.07-2.53c2.07-1.3%2C4.52-0.3%2C6.82-0.22c0.84%2C0.15%2C0.29%2C1.15%2C0.47%2C1.76c-1.09%2C0.68-1.32%2C2.3-2.38%2C2.98%20c-0.17%2C0.23-0.08%2C0.61-0.08%2C0.92c-0.24%2C0-0.62-0.08-0.48%2C0.24c-0.45%2C0.84-1.22%2C1.53-1.52%2C2.43c-0.46%2C0.62-1.07%2C1.32-1.46%2C1.92v0.3%20c-0.6-0.15-0.3%2C0.55-0.6%2C0.69c-0.46%2C0.84-1.15%2C1.07-0.84%2C2.23h-0.07c-0.24%2C0.46%2C0.07%2C1.14-0.32%2C1.46c0%2C1.08%2C0.46%2C2.44-0.39%2C3.22%20c-0.62%2C1.08-1.98%2C0.76-3.05%2C0.98v-0.13c-0.85-0.24-1.92-0.32-2.99-0.24c-0.7-0.53-0.62-1.22-0.85-1.83%20c-0.38-1.69%2C0.45-3.82-0.77-5.15c-0.25-1.06-0.84-1.97-1.47-2.82c0.08-0.84-0.38-1.38-0.77-1.84c-0.22-0.99-0.99-1.44-1.35-2.37%20h-0.24c0.15-0.55-0.3-0.62-0.37-0.92h-0.24c0.08-0.3%2C0-0.68-0.3-0.68c-0.46-1-0.69-2.07-0.62-3.28c2.22-0.64%2C5.37-0.86%2C7.43%2C0.14%20L287.2%2C2.47z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M20.65%2C1.69l0.55%2C0.55v5.43c-0.32%2C0.16-0.55%2C0.54-0.46%2C1.07v0.92h-0.09c0.32%2C1.47-0.83%2C1.91-0.45%2C3.45%20c-0.3%2C1.07%2C0%2C2.6-0.62%2C3.61c-0.07%2C0.84-0.91%2C1.53-1.37%2C2.13c-0.31%2C0.54-1.08%2C1-1.69%2C1.23c0.08%2C0.54-0.61%2C0.16-0.84%2C0.45%20c-0.24%2C0.68-1.38%2C0.14-1.77%2C0.83c-0.84%2C0.17-1.53%2C0.39-2.37%2C0.39c-0.39-0.54-0.62%2C0.23-1%2C0c-0.84-0.3-2.14%2C0.23-2.61-0.45%20c-0.99-0.09-1.69-0.69-2.75-0.77c-0.54-0.38-1.15-0.76-1.69-1.08c-0.47-0.46-1.23-0.61-1.46-1.3H1.68%20c-0.16-0.84-1.15-1.3-1.07-2.22c-0.23-1.08-0.62-2.45%2C0.07-3.44c1.23-0.84%2C3.14-0.32%2C4.53-0.47c0.61%2C0.38%2C1.36%2C0.07%2C1.76%2C0.84%20c0.14%2C1.85%2C0.3%2C4.21%2C2.29%2C4.76c0.85%2C0.07%2C1.61-0.54%2C2.22-0.86v-0.22c0.53%2C0.3%2C0.46-0.39%2C0.68-0.54c0.39-0.3%2C0.92-0.78%2C0.84-1.46%20c0.76-0.21%2C0.07-1.29%2C0.53-1.75c0.16-1.38%2C0.46-2.68%2C0.68-4.07c0.16-2.3-0.07-4.82%2C0.93-6.42c0.07-0.39%2C0.83%2C0%2C0.61-0.62%20c1.61%2C0.31%2C2.99-0.52%2C4.44%2C0H20.65z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M117.51%2C1.85c1%2C0%2C1.62%2C0.39%2C2.22%2C1c0.62%2C0.3%2C0.39%2C0.84%2C0.93%2C1.23c-0.17%2C0.77%2C0.46%2C2.16-0.54%2C2.44%20c-1.98%2C0-4.44%2C0.47-6.29-0.38c-0.3-0.83-1.06-1.23-1.59-1.85c-0.78%2C0.24-0.85-0.37-1.39-0.44c-1.21%2C0-2.37%2C0.22-2.89%2C1.22%20c0.14%2C0.31-0.47%2C0.08-0.47%2C0.38c0.16%2C0.84-0.69%2C1.53%2C0%2C2.22c0.76%2C0.31%2C1.39%2C0.85%2C2.29%2C0.92v0.07c2.62-0.21%2C4.46%2C0.77%2C7.06%2C0.54%20c0.68%2C0.54%2C1.85%2C0%2C2.45%2C0.84c0.92%2C0%2C1.53%2C0.47%2C1.99%2C1.01c0%2C0.3-0.09%2C0.61%2C0.07%2C0.83h0.16v1.76c-0.32%2C0.15-0.09%2C0.99-0.16%2C1.46%20c-0.46%2C0.91-0.54%2C1.99-1.29%2C2.75v0.47c-0.77-0.16-0.47%2C0.77-1%2C0.91c-0.85%2C0.54-1.99%2C0.76-2.99%2C1.23c-2.98-0.08-5.91%2C0.62-8.8%2C0.08%20c-0.75-0.08-1.53%2C0.14-2.16-0.16c-0.98%2C0.7-1.29-0.92-2.36-0.39c-1.53-0.84-3.52-1.6-3.82-3.44l-0.09-2.84%20c2.01%2C0.07%2C4.14-0.54%2C5.9%2C0.16c1.31-0.54%2C2.53%2C0.23%2C3.52%2C0.75c0.39%2C0.39%2C0.62%2C1.16%2C1.08%2C1.7c0.83%2C0.15%2C1.23%2C1.07%2C2.22%2C0.68%20c0.62-0.52%2C1.68-0.38%2C1.83-1.37c0.46-0.54-0.07-1.14%2C0.08-1.85c-0.84-0.98-2-1.38-3.37-1.16c-0.92-0.22-1.76-0.37-2.69-0.6%20c-1.38%2C0.47-2.14-0.76-3.54-0.31c-0.29-0.23-0.67-0.38-0.98-0.61c-0.16-0.24-0.93%2C0-0.85-0.46c-1.3-0.62-1.98-2.29-2.21-3.75%20c0-1.22%2C1.06-2%2C1.29-3.06c0.77-0.47%2C1.33-1.07%2C1.85-1.46c1.16-0.32%2C2.14-1.22%2C3.38-1.38c2.29-0.3%2C4.82-0.16%2C7.27-0.23l0.22%2C0.23%20C115%2C1.49%2C116.52%2C1.08%2C117.51%2C1.85z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M35.2%2C1.01c2.22%2C0.23%2C4.91%2C0.23%2C7.2%2C0c0.15%2C0.31%2C0.31%2C0%2C0.46%2C0c0.85%2C0%2C1.76-0.08%2C2.6%2C0.07c0.16%2C1.16%2C0.54%2C2.83-0.31%2C3.68%20c-1.23%2C0.84-3.21%2C0.3-4.67%2C0.46V5.15c-1.68-0.08-3.67-0.24-5.2%2C0.08c-1.22-0.16-2.98-0.46-3.98%2C0.29c-0.83%2C0.61-0.69%2C1.54-1%2C2.38%20c0.47%2C0.54%2C1.15%2C0.38%2C1.69%2C0.68c0.61-0.31%2C1.68-0.31%2C2.22%2C0c0.45-0.45%2C0.91%2C0%2C1.45%2C0c1.83-0.08%2C3.82%2C0.15%2C5.43-0.23%20c0.47%2C0.3%2C1.69%2C0.08%2C1.62%2C0.99v1.38c-0.23%2C0.38-0.31%2C0.92-0.69%2C1.14c-0.31%2C1.52-2.53%2C0.68-3.83%2C0.93c-0.16-0.3-0.31%2C0-0.46%2C0%20c-1.3%2C0.22-2.15-0.4-3.45-0.17c-0.37-0.22-1%2C0-1.52-0.22c-0.77%2C0.09-1.61-0.15-2.08%2C0.46c-0.69%2C0.09-1.07%2C0.77-1.45%2C1.3%20c0.15%2C0.61-0.07%2C1.53%2C0.62%2C1.69c0.83-0.08%2C1.53%2C0%2C2.22%2C0.22c0.61-0.53%2C0.99%2C0.31%2C1.68%2C0c2.44%2C0.39%2C5.12%2C0.15%2C7.73%2C0.24%20c0.99-0.46%2C2.23-0.46%2C3.29-0.32c0.23%2C0.76%2C1.23%2C1.07%2C0.61%2C2.06c0.23%2C0.77-0.31%2C1.62-0.76%2C2.08c-1.53%2C0-3.22%2C0.15-4.67-0.16%20c-0.99%2C0.25-1.76-0.54-2.61%2C0c-0.61-0.6-1.22%2C0.39-1.83-0.22c-1.08%2C0.07-2.15-0.08-3.14%2C0.14c-2.68%2C0.46-5.81%2C0.17-8.73%2C0.24%20c-1.45-0.31-0.69-1.91-0.92-2.92c0.62-2.28%2C0.47-4.6%2C0.62-7.04h0.08l0.07-3.45c0.4-0.45%2C0.47-1.3%2C0.4-2.05%20c0.22-0.41%2C0.29-1%2C0.53-1.47c-0.08-0.61%2C0.07-1.06%2C0.6-1.37c1.84-0.84%2C4.45-0.3%2C6.52-0.84C32.83%2C1.4%2C33.83%2C0.78%2C35.2%2C1.01z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M81.68%2C3.77c0.22%2C1%2C0.6%2C1.98%2C1.22%2C2.83c0.46%2C0%2C0.16%2C0.77%2C0.69%2C0.93c0.08%2C0.61%2C0.53%2C1.13%2C1.07%2C1.37%20c0.16%2C0.23-0.07%2C0.75%2C0.46%2C0.6c0%2C0.07-0.08%2C0.31%2C0.08%2C0.31h0.23c-0.07%2C1.07%2C0.85%2C1.15%2C1.08%2C2.06h0.15c0.3%2C0.3%2C0.08%2C0.93%2C0.76%2C0.76%20c0.54-0.3%2C0.3-0.83%2C0.61-1.21c0.24-0.46-0.38-0.3-0.16-0.77c0.08-0.92%2C0.55-1.69%2C0.39-2.83h0.06l0.09-5.28%20c0.61-0.61%2C1.15-1.3%2C2.13-0.99c0.38%2C0.38%2C1.01%2C0.08%2C1.46%2C0.3c1.16-0.07%2C2.06%2C0.47%2C3.22%2C0.22c0.32%2C0.7%2C0.76%2C0.92%2C0.54%2C1.78%20c0.38%2C0.13%2C0.16%2C0.61%2C0.22%2C0.92c-0.3%2C0.61-0.22%2C1.3-0.37%2C1.98c-0.16%2C0.31-0.54%2C0.54-0.39%2C1.08c0.16%2C0.84-0.3%2C1.23-0.3%2C1.99h-0.16%20c-0.3%2C2.37%2C0.31%2C4.44-0.15%2C6.74c-0.07%2C0.6%2C0.15%2C1.29-0.15%2C1.76c0.23%2C0.77-0.23%2C1.3-0.61%2C1.84c-1%2C0.92-2.44-0.24-3.6%2C0.38%20c-0.54-0.38-1.46%2C0.08-1.99-0.38c-0.69-0.16-1.46-0.38-1.92-0.93c0.16-0.53-0.53-0.38-0.69-0.84c-0.69-0.99-1.22-2.06-2.3-2.52%20c-0.07-0.23%2C0.07-0.45-0.07-0.63c-0.68-0.06-0.31-1.06-1.15-1.21c-0.53-0.39-0.14-1.22-0.91-1.29c-0.16-0.32-0.16-0.77-0.54-0.85%20l-1.38-1.3c-0.38%2C0.08-0.61%2C0.54-0.76%2C0.77c-0.55%2C0.99-0.09%2C2.53-0.38%2C3.75c0.3%2C0.69%2C0.3%2C1.67%2C0%2C2.37c0%2C1.08%2C0.45%2C2.45-0.31%2C3.29%20c-1.38%2C0.16-3.07%2C0.1-4.37-0.3c-0.47-0.22-1.23%2C0.16-1.45-0.54c-0.24-1.37-0.53-2.91-0.16-4.27c-0.37-1.46%2C0.38-2.61%2C0.16-4.14%20c0.07-0.38%2C0.45-0.53%2C0.3-1.08V8.59c0.23-0.45%2C0.47-0.77%2C0.38-1.3V6.14h0.17c0.38-1.52%2C0.06-3.36%2C1.45-4.44%20c0.37%2C0%2C0.99%2C0.16%2C1.3-0.14C77.62%2C2.31%2C80.77%2C1.4%2C81.68%2C3.77z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M252.12%2C10.74l-0.06-2.15c-0.24-0.68%2C0.14-1.84-0.4-2.22c0.16-1.3-0.53-1.85-0.98-2.6c-0.85%2C0.08-0.47-1.23-1.39-0.93%20c-1.07-0.53-2.14-1.15-3.29-1.45c-0.85%2C0.09-1.46-0.23-2.08-0.47c-1.98-0.15-3.97-0.54-5.96-0.39c-0.54%2C0.54-1.53%2C0-2.15%2C0.47%20c-1.29-0.38-2%2C0.62-3.13%2C0.54c-0.32%2C0.52-1%2C0.45-1.39%2C0.84c-0.68%2C0.22-1.3%2C0.53-1.53%2C1.22c-0.53%2C0.31-1.14%2C0.68-1.37%2C1.23%20c0%2C0.68-0.76%2C0.54-0.76%2C1.22c-0.47%2C0.61-1.15%2C1.23-0.99%2C2.3h-0.09c-0.07%2C0.37%2C0.09%2C0.93-0.22%2C1.21c-0.23%2C2.08%2C0.45%2C3.3%2C0.83%2C5.06%20c0.47%2C0.7%2C0.62%2C1.7%2C1.39%2C2.14c0.6%2C1.01%2C1.91%2C1.3%2C2.83%2C1.93c1.07%2C0.07%2C1.84%2C0.68%2C2.91%2C0.75c0.99%2C0.23%2C1.9%2C0.23%2C2.75%2C0.63%20c1.99-0.17%2C4.82%2C0.3%2C6.58-0.39c0.92%2C0%2C1.38-0.76%2C2.38-0.61c0.53-1.01%2C1.75-0.23%2C2.29-1.38c1.08-0.54%2C2.14-1.54%2C2.44-2.91%20c0.77-0.68%2C0.92-1.83%2C0.92-2.91C252.27%2C11.8%2C251.73%2C10.96%2C252.12%2C10.74z%20M244.78%2C11.57c-0.54%2C0.62-0.4%2C1.54-0.86%2C2.15v0.39%20c-0.54%2C0-0.45%2C0.62-0.76%2C0.91c-0.75%2C0.62-1.3%2C1.39-2.38%2C1.31c-1.29%2C0.44-3.36%2C0.23-4.89-0.09c-1.6-0.83-2.77-2.6-2.91-4.36h0.07%20c-0.07-1.07%2C0.47-1.68%2C0.3-2.75c0.24-0.39%2C0.24-0.92%2C0.62-1.16c-0.06-0.82%2C0.46-1%2C0.61-1.6c0.61%2C0.23%2C0.23-0.55%2C0.61-0.62%20c0.17-0.23%2C0.33-0.38%2C0.62-0.68c1.99%2C0.16%2C3.39-1.15%2C5.43-0.69c0.85%2C0.14%2C1.61%2C0.85%2C2.15%2C1.37c0.7%2C0.23%2C0.92%2C1.08%2C1.31%2C1.54%20C245.15%2C8.59%2C244.62%2C10.13%2C244.78%2C11.57z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M276.33%2C4.07c-0.25-0.99-1.4-1.53-2.09-2.07c-0.76-0.16-1.68-0.31-2.6-0.38V1.55c-0.84%2C0.14-1.54-0.23-2.3-0.38%20c-0.31%2C0.07-0.82-0.16-1.06%2C0.23c-3.45-0.15-7.51-0.31-11.25-0.15l-0.31-0.16c-0.46%2C0.09-1.16-0.15-1.54%2C0.31%20c-0.6%2C0.23-0.75%2C0.84-1.21%2C1.38c-0.15%2C1.75%2C0%2C3.82-0.46%2C5.43h-0.07c0.15%2C0.92-0.31%2C1.45-0.31%2C2.37h-0.08%20c0%2C2.82-0.77%2C5.51-0.38%2C8.42c0.22%2C0.55%2C0.3%2C1.16%2C1.07%2C1.16c0.37%2C0.3%2C0.76%2C0.38%2C1.15%2C0.6c1.38%2C0%2C2.98%2C0.32%2C4.22-0.3%20c0.52-0.08%2C0.52-0.54%2C1.07-0.68c0.23-0.32-0.08-0.93%2C0.3-1.07c-0.07-1.84%2C0-3.29%2C0.23-4.98c0.24-0.23%2C0.46-0.45%2C0.85-0.38%20c0.99-0.53%2C1.77%2C0.3%2C2.83%2C0c0.31%2C0.38%2C0.92%2C0.61%2C0.77%2C1.16c0.7%2C0.68%2C1.22%2C1.99%2C1.93%2C2.67c0.14%2C0.69%2C0.38%2C1.46%2C0.59%2C2.07h0.23%20c0.17%2C0.16%2C0.08%2C0.39%2C0.08%2C0.54h0.31c-0.16%2C0.76%2C0.62%2C0.46%2C0.84%2C0.76l1.99%2C0.08v0.13c0.68-0.07%2C1.45%2C0.1%2C2-0.22%20c0.67%2C0.31%2C1.28-0.16%2C1.98-0.3c0.31-0.16%2C0.61-0.55%2C0.46-1.01c-0.1-0.61-0.53-1.07-0.62-1.6c-0.69-0.54-0.61-1.39-1.15-1.84%20c0.31-1.23-0.61-1.84-0.53-2.83c0.84-1.08%2C2.15-1.68%2C3.13-3C276.46%2C8.05%2C276.61%2C5.69%2C276.33%2C4.07z%20M268.74%2C8.14v0.23%20c-2.3%2C0.69-5.28%2C1.07-7.73%2C0.37c-0.45-1.21%2C0.77-1.83%2C0.39-2.98c0.92-0.07%2C1.6-0.45%2C2.76-0.3v0.07c1.6%2C0.47%2C4.44-0.68%2C5.13%2C0.99%20C269.19%2C7.15%2C269.57%2C8.05%2C268.74%2C8.14z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M175.94%2C16.09c-0.07-0.53-0.61-0.92-0.38-1.59c-0.69-0.39-0.31-1.16-0.69-1.62c0.32-0.77-0.55-0.77-0.22-1.53h-0.23%20c-0.16-0.15%2C0-0.46-0.1-0.69c-0.76-0.62%2C0-2.38-0.61-2.99c0-0.83-0.44-1.16-0.3-2.06c-0.3-0.76-0.54-1.37-0.54-2.29%20c-0.61-0.39-0.39-1.08-0.91-1.47c-0.38-2.06-2.83-0.76-4.29-1.14c-1.45%2C0.38-3.46-0.46-4.6%2C0.78c0.1%2C0.59-0.84%2C0.83-0.68%2C1.44%20c-0.69%2C0-0.45%2C0.85-0.77%2C1.15c-0.61%2C0.92-0.99%2C1.92-1.77%2C2.84c-0.08%2C0.45-0.15%2C1.14-0.6%2C1.3c0.14%2C0.76-0.78%2C0.69-0.62%2C1.37%20c-0.62%2C0.71-0.78%2C1.92-1.47%2C2.76c-0.06%2C0.69-0.37%2C1.38-0.83%2C1.92c0.07%2C0.76-0.54%2C1.3-0.92%2C1.68c0.22%2C0.39-0.23%2C0.54-0.46%2C0.83%20c-0.08%2C0.46-0.08%2C1.07-0.38%2C1.38v1c0.3%2C0.39%2C0.23%2C1.08%2C0.84%2C1.22c1.52-0.07%2C3.22%2C0.16%2C4.59-0.22c0.76-0.24%2C0.83-0.93%2C1.21-1.38%20c0.47-2.61%2C3.61-0.76%2C5.37-1.54c0.75%2C0.47%2C1.83-0.23%2C2.37%2C0.47c0.29%2C0.68%2C0.9%2C1.29%2C0.9%2C2.07c0.47%2C0.76%2C1.55%2C0.53%2C2.15%2C0.98%20c1.91-0.13%2C4.28%2C0.47%2C5.06-1.3C177.63%2C17.94%2C176.32%2C17.09%2C175.94%2C16.09z%20M167.84%2C13.79c-0.93%2C0.7-1.84-0.15-2.99%2C0.09%20c-0.54-0.16-1-0.32-1.22-0.92c0.15-0.62%2C0.45-1.16%2C0.59-1.84c0.24-0.38%2C0.24-0.93%2C0.63-1.08c0-0.98%2C1.01-1.14%2C1.15-2.06%20c-0.38-1%2C0.91-0.31%2C0.68-1.23h0.53C167.84%2C8.9%2C168.84%2C11.57%2C167.84%2C13.79z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M68.58%2C15.94c-0.31-1.54-0.92-2.98-1.22-4.44c-0.55-0.69-0.3-2.07-0.55-3.05c-0.53-1.54-0.29-3.46-1.08-4.99%20c-0.06-0.61-0.51-0.92-0.75-1.53c-0.61-0.24-0.3-0.68-0.92-1c-2.6%2C0.39-5.05-0.54-7.43%2C0.47c-0.22%2C0.23-0.68%2C0.38-0.45%2C0.84%20c-0.76-0.17-0.08%2C0.84-0.76%2C0.68c-0.08%2C0.77-0.62%2C1.15-0.93%2C1.77c-0.23%2C0.38-0.23%2C0.99-0.76%2C1.06c-0.15%2C0.62-0.24%2C1.22-0.69%2C1.54%20c-0.23%2C0.38-0.39%2C0.68-0.62%2C1.07c-0.24%2C1.53-1.77%2C2.76-1.99%2C4.51c-0.77%2C1.23-1.38%2C2.68-2.07%2C3.9c-0.3%2C0.17-0.38%2C0.62-0.61%2C0.93%20l-0.07%2C1.52c0.15%2C0.46%2C0.3%2C0.93%2C0.84%2C1.15c1.69-0.14%2C3.6%2C0.3%2C5.06-0.39c0.3-0.3%2C0.3-0.76%2C0.53-1.22c1.01-2%2C3.84-1.14%2C5.89-1.38%20c0.46%2C0.39%2C1.16%2C0.16%2C1.69%2C0.24c0.45%2C0.07%2C0.37%2C0.61%2C0.62%2C0.91c0.45%2C0.23%2C0.3%2C1.14%2C0.83%2C1.37c0.08%2C0.77%2C0.92%2C0.39%2C1.31%2C0.94h3.52%20c0.61%2C0%2C0.92-0.31%2C1.44-0.47c0.47-0.07-0.08-0.83%2C0.47-0.76C69.97%2C18.16%2C69.81%2C16.86%2C68.58%2C15.94z%20M61.32%2C13.18%20c-0.23%2C0.31-0.23%2C0.7-0.78%2C0.93c-1.36-0.08-3.12%2C0.24-3.82-0.93v-0.37c0.15-0.47%2C0.38-0.84%2C0.53-1.31c0-0.45%2C0.46-0.69%2C0.38-1.3%20c0.62-0.23%2C0.54-1%2C0.92-1.46c0.7-0.45%2C0.77-2.92%2C1.98-1.37c-0.21%2C1.46%2C1%2C1.92%2C0.62%2C3.52C61.46%2C11.5%2C61.24%2C12.41%2C61.32%2C13.18z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-position: 50%;} #headerContainer .header__logo a{display:block;width: 100%;height: 100%;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ #headerContainer {height: 75px;} #headerContainer .header__logo {width: 190px;height: 14px;} } /* share -------------------------------------- */ .featureBody-pl3 .feature-share__bottom .feature-share-ttl{font-size:22px;font-family: nudista-web, sans-serif;} @media screen and (max-width:834px){ } @media screen and (max-width:640px){ .featureBody-pl3 .feature-share__bottom{margin: 60px auto 0;} .featureBody-pl3 .feature-share__bottom .feature-share-ttl{font-size:18px} } /* otherfeature_pl3 -------------------------------------*/ .jf-otherFeature_pl3-container{margin: 120px 0 0;background-color: #F1F1F1;} .jf-otherFeature_pl3-container .jf-otherFeature_pl3-container__inner{max-width: 1120px;margin: 0 auto;padding: 68px 0 120px;} .jf-otherFeature_pl3-container .otherFeature__label{font-size: 22px;display:block;text-align: center;font-family: nudista-web, sans-serif;font-weight: 300;letter-spacing: 0.15em;} .jf-otherFeature_pl3-container .features-list{margin-top: 50px;} .jf-otherFeature_pl3-container .features-list > li{width: calc(100% / 4 - 22.5px);} .jf-otherFeature_pl3-container .features-list > li:nth-of-type(n+5){display:none} .jf-otherFeature_pl3-container .features-list > li:nth-of-type(n+2){margin-top: 0;margin-left: 30px;} .jf-otherFeature_pl3-container .features-list li .features-list__link{display: block;background-color: rgb(255 255 255 / 0%);} .jf-otherFeature_pl3-container .features-list li .features-list__link .img{min-width: calc(100% - 26px);max-width: calc(100% - 26px);margin-left: 18px;border: 4px solid #fff;} .jf-otherFeature_pl3-container .features-list li .features-list__link .info{height: auto;margin-top: -16px;margin-right: 18px;padding: 16px;background-color: #fff;} .jf-otherFeature_pl3-container .features-list li .features-list__link .infoTitle{font-size: 13px;} .jf-otherFeature_pl3-container .features-list li .features-list__link:hover{box-shadow:none;} .jf-otherFeature_pl3-container .otherLink{margin: 50px 0 0;text-align: center;display: -webkit-box;display: flex;-webkit-box-pack: center;justify-content: center;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .jf-otherFeature_pl3-container .otherLink a{display: inline-block;color: #242424;text-decoration: none;font-size: 13px;line-height: 52px;height: 52px;text-align: center;padding: 0 20px;margin-right: 20px;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);overflow: hidden;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;min-width: -webkit-calc(280px - 44px);min-width: calc(280px - 44px);border: 2px solid #000;} .jf-otherFeature_pl3-container .otherLink a:last-of-type{margin-right:0;} .jf-otherFeature_pl3-container .otherLink a:hover{color: #fff;background-color: #000;} @media screen and (max-width:834px){ .jf-otherFeature_pl3-container{margin: 60px 0 0;} .jf-otherFeature_pl3-container .otherFeature__label{margin:0 30px} } @media screen and (max-width:640px){ .jf-otherFeature_pl3-container .jf-otherFeature_pl3-container__inner{padding: 48px 0 60px;} .jf-otherFeature_pl3-container .otherFeature__label{font-size: 18px} .jf-otherFeature_pl3-container .features-list{margin-top: 30px;} .jf-otherFeature_pl3-container .features-list > li{width: calc(100% / 2 - 6px);} .jf-otherFeature_pl3-container .features-list > li:nth-of-type(n+2){margin-left: 0;} .jf-otherFeature_pl3-container .features-list > li:nth-of-type(2n+1){margin-right: 12px;} .jf-otherFeature_pl3-container .features-list > li:nth-of-type(n+3){margin-top: 20px;} .jf-otherFeature_pl3-container .features-list li .features-list__link .infoTitle{font-size: 12px;} .jf-otherFeature_pl3-container .otherLink{margin: 30px 20px 0;} .jf-otherFeature_pl3-container .otherLink a{line-height: 45px;height: 45px;padding: 0 20px;width: -webkit-calc(100% - 44px);width: calc(100% - 44px);min-width: -webkit-calc(240px - 44px);min-width: calc(240px - 44px);max-width: -webkit-calc(240px - 44px);max-width: calc(300px - 44px);} } /* ranking_layout01 -------------------------------- */ .ranking-mainImg__Container{position:relative} .ranking-mainImg__Container::before{position:absolute;content:"";display:block;background-color:#F1F1F1;z-index:-1;top: 23vw;bottom: -8vw;right: 0;width: -webkit-calc(100% - 7vw);width: calc(100% - 7vw);} .ranking-mainImg__Container .mainImg-thumbnail{width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1200px;margin: 0 auto;} .ranking-mainImg__Container .mainImg-thumbnail img{display:block;width:100%;} .ranking-mainImg__Container .mainImg-heading{max-width: 720px;margin: 64px auto 0;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);} .ranking-mainImg__Container .mainImg-heading .title-en{font-family: nudista-web, sans-serif;font-weight: 300;letter-spacing: 0.15em;font-size: 2.4em;} .ranking-mainImg__Container .mainImg-heading .title-en .small{margin-left:20px;font-size: 0.4em;color: #333;} .ranking-mainImg__Container .mainImg-heading .title-ja{margin-top: 12px;font-size: 2em;line-height: 1.8;} .ranking-mainImg__Container .mainImg-heading .dates{font-family: nudista-web, sans-serif;font-weight: 300;letter-spacing: 0.15em;margin-top: 12px;} /* lead */ .ranking-lead__Container{margin: 80px auto 0;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width:480px;text-align: center;line-height: 2;} /* tabs */ .ranking__tabs{list-style: none;display: flex;font-size: 0.9em;justify-content: center;margin-top: 60px;} .ranking__tabs .tab-item{position: relative;} .ranking__tabs .tab-item .tab-image{width: 100px;border: 6px solid transparent;border-radius: 100px;overflow: hidden;} .ranking__tabs .tab-item .tab-image img{width: 100%;display: block;} .ranking__tabs .tab-item .tab-title{text-align:center;margin-top:6px;} .ranking__tabs .tab-item:nth-of-type(n+2){margin-left:16px} .ranking__tabs .tab-item a{color:#202020;text-decoration:none;position: relative;transition: 0.3s ease-in-out;padding:0;display: block;} .ranking__tabs .tab-item a:hover{opacity:0.7;} .ranking__tabs .tab-item.women .active .tab-image{border-color: #ffefeb;} .ranking__tabs .tab-item.men .active .tab-image{border-color: #8faaff;} /* rankingitem-layout */ .ranking-layout01__Container{padding:100px 0;} .rankingitem-layout{display: flex;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1160px;margin:0 auto;} .rankingitem-layout_image{position: relative;max-width: 560px;width: 100%;min-width: 300px;} .rankingitem-layout_image figure img{display:block;width:100%;} .rankingitem-layout_image .brandLogo{position: absolute;top: -38px;right: -38px;width: 24%;border: 4px solid #000;} .rankingitem-layout_label{margin: 62px 0 0 92px;font-family: "atrament-web";} .rankingitem-layout_label .style__theme{-ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-orientation: sideways;line-height: 1;font-size: 20px;letter-spacing: 0.8px;} .rankingitem-layout_label .style__hr {height: 1px; width: 100%; border: none; -webkit-box-shadow: none;box-shadow: none; background-color: #333; opacity: .2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=20);margin: 22px 0 20px 0;display: block;} .rankingitem-layout_label .style__number{text-align:center;font-size: 48px;} .rankingitem-layout_info{padding: 62px 0 0 48px;max-width: 380px;} .rankingitem-layout_info .infoContainer{} .rankingitem-layout_info .infoContainer__specification{} .rankingitem-layout_info .infoContainer__specification .brand{font-family: "atrament-web"; font-size: 1.2em;} .rankingitem-layout_info .infoContainer__specification .name{font-size: 1.6em;margin-top: 12px;} .rankingitem-layout_info .infoContainer__specification .no{font-family: "atrament-web"; font-size: 1.2em;margin-top: 12px;} .rankingitem-layout_info .infoContainer__specification .price{font-family: "atrament-web";font-size: 1.8em;margin-top: 16px;} .rankingitem-layout_info .infoContainer__specification .txt{margin-top: 30px;line-height: 1.8;} .rankingitem-layout_info .infoContainer__specification .link-button{display: inline-block;color: #fff;text-decoration: none;font-size: 12px;line-height: 44px;height: 44px;text-align: center;padding: 0 20px;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);overflow: hidden;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;min-width: -webkit-calc(240px - 44px);min-width: calc(240px - 44px);border: 2px solid #000;margin-top: 30px;background-color: #000;} .rankingitem-layout_info .infoContainer__specification .link-button:hover{opacity:0.7;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_image, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_image{-webkit-box-ordinal-group: 4;-webkit-order: 3;-ms-flex-order: 3;order: 3;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_image .brandLogo, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_image .brandLogo{left: -38px;right: initial;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_label, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_label{-webkit-box-ordinal-group: 2; -webkit-order: 1;-ms-flex-order: 1;order: 1;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_info, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_info{-webkit-box-ordinal-group: 3;-webkit-order: 2;-ms-flex-order: 2;order: 2;padding: 62px 48px 0 48px;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_image{-webkit-box-ordinal-group: 3;-webkit-order: 2;-ms-flex-order: 2;order: 2;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_image .brandLogo{left: -38px;right: initial;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_label{-webkit-box-ordinal-group: 2;-webkit-order: 1;-ms-flex-order: 1;order: 1;margin: 62px 92px 0 36px;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_info{-webkit-box-ordinal-group: 4;-webkit-order: 3;-ms-flex-order: 3;order: 3;padding: 62px 0 0 48px;} /* ranking-slide01 */ .ranking-slide01__Container{} .ranking-slide01_inner{padding: 80px 100px 100px;width: calc(100% - 200px);margin: 0 auto;max-width: 1500px;} .ranking-slide01_inner .title{font-size:22px;font-family: nudista-web, sans-serif;font-weight: 300;letter-spacing: 0.15em;text-align: center;} .ranking-slide01_items{margin-top:48px} .ranking-slide01_item{width: 300px;transition: all .8s ease;} .ranking-slide01_item:nth-of-type(n+2){margin-left:20px;} .ranking-slide01_item > a{display: block; color:#242424; text-decoration:none;transition: .3s ease-in-out;} .ranking-slide01_item > a:hover{opacity:0.7;} .ranking-slide01_item figure{position:relative} .ranking-slide01_item figure img{width: 100%;display: block;} .ranking-slide01_item figure .rankingitem_label{font-family: "atrament-web";position: absolute;top: 24px;left: 22px;} .ranking-slide01_item figure .rankingitem_label .style__theme{-ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-orientation: sideways;line-height: 1;font-size: 16px;letter-spacing: 0.8px;} .ranking-slide01_item figure .rankingitem_label .style__hr {height: 1px;width: 100%;border: none;-webkit-box-shadow: none;box-shadow: none;background-color: #333;opacity: .2;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=20);margin: 18px 0 10px 0;display: block;} .ranking-slide01_item figure .rankingitem_label .style__number{text-align:center;font-size: 36px;} .ranking-slide01_item .brand{font-family: "atrament-web";font-size: 1em;margin-top: 12px;} .ranking-slide01_item .name{font-size: 1em;margin-top: 6px;} .ranking-slide01_item .price{font-family: "atrament-web";font-size: 1.2em;margin-top: 3px;} .ranking-slide01_items .slick-arrow{position:absolute;z-index: 1;transition: all 0.2s ease-in-out;border: 0;font-size: 0;padding: 0;top: 50%;-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%);} .ranking-slide01_items .slider__next{right: -40px;} .ranking-slide01_items .slider__next::before{content: "";display: block;width: 20px;height: 20px;border-top: 1px solid #202020;border-right: 1px solid #202020;-webkit-transform: rotate(45deg);transform: rotate(45deg);} .ranking-slide01_items .slider__prev{left:-40px;} .ranking-slide01_items .slider__prev::before{content: "";display: block;width: 20px;height: 20px;border-bottom: 1px solid #202020;border-left: 1px solid #202020;-webkit-transform: rotate(45deg);transform: rotate(45deg);} .ranking-slide01_items .slick-disabled{opacity: 0;} @media screen and (max-width: 834px){ .ranking-mainImg__Container::before{bottom: 0;right: 0;width: 100%;} .ranking-mainImg__Container::after{position:absolute;content:"";display:block;background-color: #000;z-index: 1;bottom: -30px;right: 50%;width: 1px;height: 60px;} .ranking-mainImg__Container .mainImg-thumbnail{width:100%;} .ranking-mainImg__Container .mainImg-heading{padding: 40px 50px 68px;margin: 0 auto;} .ranking-mainImg__Container .mainImg-heading .title-en{font-size: 2em;} .ranking-mainImg__Container .mainImg-heading .title-en .small{margin-left: 12px;} .ranking-mainImg__Container .mainImg-heading .title-ja{font-size: 1.4em;} .ranking-mainImg__Container .mainImg-heading .dates{} .ranking-layout01__Container{padding:80px 0;} .rankingitem-layout_image{min-width: 240px;} .rankingitem-layout_image .brandLogo{top: -28px;right: -28px;} .rankingitem-layout_label{margin: 38px 0 0 42px;} .rankingitem-layout_info{padding: 38px 0 0 36px;} .rankingitem-layout_info .infoContainer{max-width:240px;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_image .brandLogo, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_image .brandLogo{left: -28px;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_label, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_label{margin: 38px 0 0 0;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_info, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_info{padding: 38px 36px 0 36px;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_image .brandLogo{left: -28px;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_label{margin: 38px 48px 0 0;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_info{padding: 38px 0 0 36px;} .ranking-slide01_inner{padding: 60px 0 80px 80px;width: calc(100% - 80px);} .ranking-slide01_item{width: 230px;} .ranking-slide01_items .slider__next{right: 30px;} .ranking-slide01_items .slider__prev{left: -30px;} .ranking-slide01_item figure .rankingitem_label{top: 20px;left: 18px;} } @media screen and (max-width:640px){ .ranking-mainImg__Container .mainImg-heading{padding: 30px 26px 42px;} .ranking-mainImg__Container .mainImg-heading .title-en{font-size: 1.6em;} .ranking-mainImg__Container .mainImg-heading .title-en .small{margin-left: 12px;} .ranking-mainImg__Container .mainImg-heading .title-ja{margin-top: 10px;font-size: 1.1em;} .ranking-mainImg__Container .mainImg-heading .dates{margin-top: 10px;font-size: 0.8em;} .ranking-lead__Container{margin: 48px auto 0;width: -webkit-calc(100% - 72px);width: calc(100% - 72px);font-size: 0.9em;} .ranking__tabs{margin-top: 42px;} .ranking__tabs .tab-item .tab-image{width: 80px;border-radius: 80px;} .ranking-layout01__Container{padding: 48px 0;} .rankingitem-layout{flex-flow: row wrap;width: 100%;} .rankingitem-layout_image{min-width:initial;margin:0 auto;-webkit-box-ordinal-group: 2 !important;-webkit-order: 1 !important;-ms-flex-order: 1 !important;order: 1 !important;} .rankingitem-layout_image .brandLogo{top: -26px;right: 26px;border: 3px solid #000;} .rankingitem-layout_label{margin: 32px 0 0 26px !important;-webkit-box-ordinal-group: 3 !important;-webkit-order: 2 !important;-ms-flex-order: 2 !important;order: 2 !important;} .rankingitem-layout_label .style__theme{font-size: 18px;} .rankingitem-layout_label .style__number{text-align:center;font-size: 38px;} .rankingitem-layout_info{padding: 32px 26px 0 38px !important;-webkit-box-ordinal-group: 4 !important;-webkit-order: 3 !important;-ms-flex-order: 3 !important;order: 3 !important;width: -webkit-calc(100% - 128px);width: calc(100% - 128px);max-width: inherit;} .rankingitem-layout_info .infoContainer{max-width:initial;} .rankingitem-layout_info .infoContainer__specification .brand{font-size: 1.1em;} .rankingitem-layout_info .infoContainer__specification .name{font-size: 1.3em;} .rankingitem-layout_info .infoContainer__specification .no{font-size: 1.1em;} .rankingitem-layout_info .infoContainer__specification .price{font-size: 1.5em;} .rankingitem-layout_info .infoContainer__specification .txt{margin-top: 24px;} .rankingitem-layout_info .infoContainer__specification .link-button{line-height: 40px;height: 40px;padding: 0 16px;min-width: -webkit-calc(200px - 36px);min-width: calc(200px - 36px);margin-top: 24px;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_image, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_image{width: -webkit-calc(100% - 26px);width: calc(100% - 26px);margin-left: 26px;} .ranking-layout01__Container:nth-of-type(1) .rankingitem-layout_image .brandLogo, .ranking-layout01__Container:nth-of-type(5) .rankingitem-layout_image .brandLogo{left: 26px;} .ranking-layout01__Container:nth-of-type(2) .rankingitem-layout_image, .ranking-layout01__Container:nth-of-type(4) .rankingitem-layout_image{width: -webkit-calc(100% - 26px);width: calc(100% - 26px);margin-right: 26px;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_image{width: -webkit-calc(100% - 52px);width: calc(100% - 52px);margin:0 26px;} .ranking-layout01__Container:nth-of-type(3) .rankingitem-layout_image .brandLogo{left: 26px;} .ranking-slide01_inner{padding: 32px 0 60px 0;width:100%;} .ranking-slide01_inner .title{font-size:18px;} .ranking-slide01_items{margin-top:32px} .ranking-slide01_item{width: 230px;} .ranking-slide01_item:nth-of-type(n+2){margin-left:10px;} .ranking-slide01_item.slick-slide:not(.slick-center) {transform: scale(0.8);} .ranking-slide01_items .slider__next{right: 26px;} .ranking-slide01_items .slider__prev{left: 26px;} } /* galleryLayout01 -------------------------------- */ .galleryLayout01-mainVisual__Container{position:relative} .galleryLayout01-mainVisual__Container .mainVisual-thumbnail{width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1200px;margin: 0 auto;} .galleryLayout01-mainVisual__Container .mainVisual-thumbnail img{display:block;width:100%;} .galleryLayout01-mainVisual__Container .mainVisual-thumbnail video{display:block;width:100%;} .galleryLayout01-mainVisual__Container .mainVisual-thumbnail a{-webkit-transition: 0.3s;transition: 0.3s;display:block;} .galleryLayout01-mainVisual__Container .mainVisual-thumbnail a:hover{opacity:0.7;} .galleryLayout01-mainVisual__Container .mainVisual-title{width: -webkit-calc(100% - 100px);width: calc(100% - 100px);margin: 100px auto 0;min-width: 200px;max-width: 450px;} .galleryLayout01-mainVisual__Container .mainVisual-title img {display: block; width: 100%;} .galleryLayout01-mainVisual__Container .mainVisual-txt{color: #fff;max-width: 600px;margin: 48px auto 0;font-size: 13px;line-height: 1.8;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);text-align: center;} .galleryLayout01-contents__Container{margin:100px auto 0;} .galleryLayout01-contents__Container [class^="gallery__block"]{margin:100px auto 0;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1060px;} .galleryLayout01-contents__Container [class^="gallery__block"] img {display: block; width: 100%;} .galleryLayout01-contents__Container [class^="gallery__block"] video {display: block; width: 100%;} .galleryLayout01-contents__Container [class^="gallery__block"] a{-webkit-transition: 0.3s;transition: 0.3s;display:block;position: relative;} .galleryLayout01-contents__Container [class^="gallery__block"] a:hover{opacity:0.7;} .galleryLayout01-contents__Container [class^="gallery__block"] a[href^="#modal-item_"]::before{content: "";background: url(/img/feature/icon_plus_wh.svg) no-repeat;width: 30px;height: 30px;background-size: 30px;position: absolute;z-index: 3;bottom: 26px;right: 26px;-webkit-transition: all .3s ease-in-out .0s;transition: all .3s ease-in-out .0s;} .galleryLayout01-contents__Container .gallery__block--1{max-width: 600px;} .galleryLayout01-contents__Container .gallery__block--2{display: flex;max-width: 915px;justify-content: space-between;} .galleryLayout01-contents__Container .gallery__block--2 .image-left{width: 54%;} .galleryLayout01-contents__Container .gallery__block--2 .image-right{width: 40%;margin-top: 68px;} .galleryLayout01-contents__Container .gallery__block--3{display: flex;max-width: 915px;justify-content: space-between;} .galleryLayout01-contents__Container .gallery__block--3 .image-left{width: -webkit-calc(50% - 5px);width: calc(50% - 5px);} .galleryLayout01-contents__Container .gallery__block--3 .image-right{width: -webkit-calc(50% - 5px);width: calc(50% - 5px);} .galleryLayout01-contents__Container .gallery__block--4{display: flex;max-width: 915px;justify-content: space-between;} .galleryLayout01-contents__Container .gallery__block--4 .image-left{width: 60%;margin-top: 88px;} .galleryLayout01-contents__Container .gallery__block--4 .image-right{width: 32%;} .galleryLayout01-contents__Container .gallery__block--5{} .galleryLayout01-contents__Container .gallery__block--6{display: flex;max-width: 915px;justify-content: space-between;} .galleryLayout01-contents__Container .gallery__block--6 .image-left{width: 54%;} .galleryLayout01-contents__Container .gallery__block--6 .image-right{width: 40%;margin-top: 68px;} .galleryLayout01-contents__Container .gallery__block--3column_ptn1{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;align-items: stretch;gap: 12px;} .galleryLayout01-contents__Container .gallery__block--3column_ptn1 .image{width: -webkit-calc(100% / 3 - 8px); width: calc(100% / 3 - 8px);} .galleryLayout01-contents__Container .gallery__block--footer{} .galleryLayout01-contents__Container .gallery__block--footer .title{width:50%;margin:0 auto;min-width: 200px;max-width: 450px;} .galleryLayout01-contents__Container .gallery__block--footer .txt{color:#fff;max-width: 600px;margin:48px auto 0;font-size:13px;line-height: 1.8;text-align: center;} .galleryLayout01-contents__Container .btnType_ptn1{margin-top:50px} .galleryLayout01-contents__Container .btnType_ptn1 .btn{display: -ms-flexbox;display: flex;-ms-flex-align: center;-webkit-align-items: center;align-items: center;min-width: 300px;margin: 0 auto;width: 340px;width: fit-content;font-size: 16px;color: #fff;text-decoration: none;padding: 15px 0;position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;white-space: nowrap;} .galleryLayout01-contents__Container .btnType_ptn1 .btn span{padding-right:30px;} .galleryLayout01-contents__Container .btnType_ptn1 .btn .arrow{margin-left: auto;width: 50px;} .galleryLayout01-contents__Container .btnType_ptn1 .btn::before {content: "";background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);background-size: 8px 1px; background-repeat: repeat-x;position: absolute;bottom: 0;left: 0;right: 0;height: 1px;} .galleryLayout01-contents__Container .btnType_ptn1 .btn::after {content: "";position: absolute;bottom: 0;right: 0;height: 1px;width: 94px;background: #fff; -webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;} .galleryLayout01-contents__Container .btnType_ptn1 .btn:hover::after {width: 100%;} .galleryLayout01-contents__Container .gallery__block--productItems{max-width: 600px;margin: 46px auto 0;text-align: center;} .galleryLayout01-contents__Container .gallery__block--productItems .txt{color:#fff;line-height: 1.8;} .galleryLayout01-contents__Container .gallery__block--productItems .productItems{} .galleryLayout01-contents__Container .gallery__block--productItems .txt + .productItems{margin-top: 38px;} .galleryLayout01-contents__Container .gallery__block--productItems .productItems > li{color: #fff;} .galleryLayout01-contents__Container .gallery__block--productItems .productItems > li:nth-of-type(n+2){margin-top:6px;} .galleryLayout01-contents__Container .gallery__block--productItems .productItems > li a{color: #fff;} .galleryLayout01-contents__Container .gallery__block--productItems .productItems > li .price{display:block;color: #b1b1b1;} .galleryLayout01-contents__Container .gallery__block--headLine{max-width: 820px;margin: 128px auto -42px;} .galleryLayout01-contents__Container .gallery__block--headLine .txt{text-align: center; color: #fff; font-family: montserrat, sans-serif; font-weight: 700; font-style: normal; font-size: 4.2em;} .galleryLayout01-itemList__Container{margin: 136px auto 0;padding-bottom: 148px;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1060px;} .galleryLayout01-itemList__Container .itemList_inner{} .galleryLayout01-itemList__Container .product_items{display: flex;flex-wrap: wrap;justify-content: center;} .galleryLayout01-itemList__Container .product_items_item{width: -webkit-calc(100% / 4 - 12px);width: calc(100% / 4 - 12px);margin: 6px;} .galleryLayout01-itemList__Container .product_items_item a{-webkit-transition: 0.3s;transition: 0.3s;display:block;color: #fff;} .galleryLayout01-itemList__Container .product_items_item img{display:block;width:100%;} .galleryLayout01-itemList__Container .product_items_item .itemName{margin-top: 10px;} .galleryLayout01-itemList__Container .product_items_item .itemPrice{margin-top: 8px;} .galleryLayout01-itemList__Container .product_items_item a:hover{opacity:0.7;} .galleryLayout01-itemList__Container .txt{color:#fff;max-width: 600px;margin:60px auto 0;font-size:13px;line-height: 1.8;text-align: center;} .galleryLayout01-itemList__Container .txt a{color:#fff;text-decoration: underline} .galleryLayout01-itemList__Container .btnType_ptn1{margin-top:50px;display: flex;align-items: center;justify-content: center; gap: 42px;flex-wrap: wrap;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn{display: -ms-flexbox;display: flex;-ms-flex-align: center;-webkit-align-items: center;align-items: center;min-width: 300px;margin: 0 auto;width: 340px;width: fit-content;font-size: 14px;color: #fff;text-decoration: none;padding: 15px 0;position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;white-space: nowrap;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn span{padding-right:30px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn .arrow{margin-left: auto;width: 50px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn::before {content: "";background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);background-size: 8px 1px; background-repeat: repeat-x;position: absolute;bottom: 0;left: 0;right: 0;height: 1px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn::after {content: "";position: absolute;bottom: 0;right: 0;height: 1px;width: 94px;background: #fff; -webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn:hover::after {width: 100%;} .galleryLayout01-archives__Container{margin: 0 auto 0;padding-bottom: 148px;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1060px;} .galleryLayout01-archives__Container .archive_item{margin: 0 auto 0;width: 100%;max-width: 820px;} .galleryLayout01-archives__Container .archive_item:nth-of-type(n+2){margin-top:46px;} .galleryLayout01-archives__Container .archive_item img {display: block; width: 100%;} .galleryLayout01-archives__Container .archive_item a{-webkit-transition: 0.3s;transition: 0.3s;display:block;} .galleryLayout01-archives__Container .archive_item a:hover{opacity:0.7;} .gallery-modal-content{padding: 60px 0 !important;max-width: 670px;} .gallery-modal-content .contents-box{ position: relative;} .gallery-modal-content .contents-box .img{} .gallery-modal-content .contents-box .img img{width:100%; display:block;} .gallery-modal-content .contents-box .txt_ptn01{position:absolute;top: 0;color: #020202;font-size: 1.8em;line-height: 1.8;text-align: center;margin: 0 auto;display: block;width: -webkit-calc(100% - 72px);width: calc(100% - 72px);padding: 0 36px;height: 20%;display: flex;flex-direction: column;justify-content: center;align-items: center;} .gallery-modal-content .product-list{margin: 24px 0 0;} .gallery-modal-content .product-list > li:nth-of-type(n+2){margin-top:6px;} .gallery-modal-content .product-list > li a{color: #fff;} .gallery-modal-content .remodal-close{right: -60px;top: 60px;z-index: 1;font-size: 0;width: 45px;height: 45px;left: inherit;} .gallery-modal-content .remodal-close:before {content:"";} .gallery-modal-content .remodal-close .close_ico{display:block;position:absolute;width: 1px;height: 50px;background: #fff;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);} .gallery-modal-content .remodal-close .close_ico:before{display:block;content:"";position:absolute;width: 50px;height: 1px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background: #fff;} @media screen and (max-width:834px){ .galleryLayout01-mainVisual__Container .mainVisual-thumbnail{width:100%;} .galleryLayout01-contents__Container .btnType_ptn1 .btn{min-width: 280px;} .galleryLayout01-itemList__Container .product_items_item{width: -webkit-calc(100% / 3 - 12px);width: calc(100% / 3 - 12px);} .galleryLayout01-itemList__Container .btnType_ptn1 .btn{min-width: 280px;} .gallery-modal-content{padding: 60px 30px !important;} .gallery-modal-content .remodal-close{right: 10px;top: 0;} } @media screen and (max-width:640px){ .galleryLayout01-mainVisual__Container .mainVisual-title{width: 50%;margin: 48px auto 0;} .galleryLayout01-mainVisual__Container .mainVisual-txt{margin: 36px auto 0;font-size: 11px;width: -webkit-calc(100% - 50px);width: calc(100% - 50px);} .galleryLayout01-contents__Container{margin:68px auto 0;} .galleryLayout01-contents__Container [class^="gallery__block"]{margin:68px auto 0;width: -webkit-calc(100% - 50px);width: calc(100% - 50px);} .galleryLayout01-contents__Container [class^="gallery__block"] a[href^="#modal-item_"]::before{width: 20px;height: 20px;background-size: 20px;bottom: 12px;right: 12px;} .galleryLayout01-contents__Container .gallery__block--2{flex-wrap: wrap;} .galleryLayout01-contents__Container .gallery__block--2 .image-left{width: -webkit-calc(100% + 25px);width: calc(100% + 25px);margin: 0 0 0 -25px;} .galleryLayout01-contents__Container .gallery__block--2 .image-right{width: 60%;margin: 48px auto 0;} .galleryLayout01-contents__Container .gallery__block--4{margin: 68px 0 0 -25px;width: -webkit-calc(100% + 25px);width: calc(100% + 25px);} .galleryLayout01-contents__Container .gallery__block--5{width: 100%;} .galleryLayout01-contents__Container .gallery__block--6 .image-right{margin-top: 32px;} .galleryLayout01-contents__Container .gallery__block--3column_ptn1{gap: 9px;width: 100%;} .galleryLayout01-contents__Container .gallery__block--3column_ptn1 .image{width: -webkit-calc(100% / 3 - 6px);width: calc(100% / 3 - 6px);} .galleryLayout01-contents__Container .gallery__block--footer .txt{margin:36px auto 0;font-size:11px;} .galleryLayout01-contents__Container .btnType_ptn1{margin-top:40px} .galleryLayout01-contents__Container .btnType_ptn1 .btn{min-width: 220px;font-size: 15px;} .galleryLayout01-contents__Container .btnType_ptn1 .btn span{padding-right:20px;} .galleryLayout01-contents__Container .btnType_ptn1 .btn .arrow{width: 40px;} .galleryLayout01-contents__Container .btnType_ptn1 .btn::after {width: 68px;} .galleryLayout01-contents__Container .gallery__block--productItems{margin: 36px auto 0;font-size: 11px;} .galleryLayout01-contents__Container .gallery__block--productItems .txt + .productItems{margin-top: 30px;} .galleryLayout01-contents__Container .gallery__block--headLine{margin: 86px auto -38px;} .galleryLayout01-contents__Container .gallery__block--headLine .txt{font-size: 2em;} .galleryLayout01-itemList__Container{margin: 88px auto 0;padding-bottom: 108px;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .galleryLayout01-itemList__Container .product_items_item{width: -webkit-calc(100% / 2 - 8px);width: calc(100% / 2 - 8px);margin: 4px;} .galleryLayout01-itemList__Container .txt{margin:40px auto 0;font-size:11px;} .galleryLayout01-itemList__Container .btnType_ptn1{margin-top:40px;gap: 20px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn{min-width: 220px;font-size: 13px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn span{padding-right:20px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn .arrow{width: 40px;} .galleryLayout01-itemList__Container .btnType_ptn1 .btn::after {width: 68px;} .galleryLayout01-archives__Container{padding-bottom: 108px;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .galleryLayout01-archives__Container .archive_item:nth-of-type(n+2){margin-top:28px;} .gallery-modal-content{padding: 36px 12px !important;} .gallery-modal-content .contents-box .txt_ptn01{font-size: 0.95em;width: -webkit-calc(100% - 52px);width: calc(100% - 52px);padding: 0 26px;} .gallery-modal-content .product-list{font-size:11px;} } /* itemListLayout01 -------------------------------- */ .itemListLayout01-mainVisual__Container{position:relative} .itemListLayout01-mainVisual__Container .mainVisual-thumbnail{width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1200px;margin: 0 auto;} .itemListLayout01-mainVisual__Container .mainVisual-thumbnail img{display:block;width:100%;} /* lead */ .itemListLayout01-lead__Container{margin:100px auto 0; color:#fff;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 920px;text-align: center;} /* tabs */ .itemListLayout01-contents__Container{margin:70px auto 0; color:#fff;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1000px;} .itemListLayout01-contents__Container .itemList__tabs{list-style: none;display: flex;font-size: 0.9em;justify-content: center;flex-wrap: wrap;gap: 20px;} .itemListLayout01-contents__Container .itemList__tabs .tab-item{position: relative;width: 112px;} .itemListLayout01-contents__Container .itemList__tabs .tab-item .tab-image{width: 100px;border: 6px solid transparent;border-radius: 100px;overflow: hidden;background-color: #1a1a1a;} .itemListLayout01-contents__Container .itemList__tabs .tab-item .tab-image img{width: 100%;display: block;} .itemListLayout01-contents__Container .itemList__tabs .tab-item .tab-title{text-align:center;margin-top:6px;} .itemListLayout01-contents__Container .itemList__tabs .tab-item a{color:#fff;text-decoration:none;position: relative;transition: 0.3s ease-in-out;padding:0;display: block;} .itemListLayout01-contents__Container .itemList__tabs .tab-item a:hover{opacity:0.7;} .itemListLayout01-contents__Container .itemList__tabs .tab-item.women .active .tab-image{border-color: #ffefeb;} .itemListLayout01-contents__Container .itemList__tabs .tab-item.men .active .tab-image{border-color: #8faaff;} /* アイテム紹介 */ .itemListLayout01-itemList__Container{margin: 136px auto 0;padding-bottom: 148px;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 1060px;} .itemListLayout01-itemList__Container + .itemListLayout01-itemList__Container{margin: 0 auto 0;} .itemListLayout01-itemList__Container .itemList_inner{} .itemListLayout01-itemList__Container .itemList_inner > .txt{color:#fff;text-align: center;margin-top: 68px;} .itemListLayout01-itemList__Container .itemList_inner > .txt a{color:#fff;text-decoration: none;-ms-transition: 0.3s;transition: 0.3s;-webkit-box-shadow: inset 0 -1px 0 0 #fff;box-shadow: inset 0 -1px 0 0 #fff;} .itemListLayout01-itemList__Container .itemList_inner > .txt a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #fff;box-shadow: inset 0 -1.5px 0 0 #fff;opacity:0.7;} .itemListLayout01-itemList__Container .item-author{display: flex;justify-content: stretch;color: #fff;align-items: center;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);max-width: 760px;margin: 0 auto;} .itemListLayout01-itemList__Container .c-author{flex: 0 0 160px;} .itemListLayout01-itemList__Container .author-image{width: 105px;height: 105px;} .itemListLayout01-itemList__Container .author-image img{display: block;width: 100%;height: 100%;} .itemListLayout01-itemList__Container .author-profile{margin-top: 10px; width: 105px;} .itemListLayout01-itemList__Container .author-name{font-size: 14px; font-weight: 600;} .itemListLayout01-itemList__Container .author-subName{font-size: 10px;color: #898989;} .itemListLayout01-itemList__Container .impressions-content{} .itemListLayout01-itemList__Container .impressions-comment{} .itemListLayout01-itemList__Container .product_items{display: flex;flex-wrap: wrap;justify-content: center;margin-top: 80px;} .itemListLayout01-itemList__Container .product_items_item{width: -webkit-calc(100% / 4 - 12px);width: calc(100% / 4 - 12px);margin: 26px 6px 6px;font-size: 0.9em;} .itemListLayout01-itemList__Container .product_items_item a{-webkit-transition: 0.3s;transition: 0.3s;display:block;color: #fff;} .itemListLayout01-itemList__Container .product_items_item img{display:block;width:100%;} .itemListLayout01-itemList__Container .product_items_item .itemName{margin-top: 10px;} .itemListLayout01-itemList__Container .product_items_item .itemPrice{margin-top: 8px;} .itemListLayout01-itemList__Container .product_items_item a:hover{opacity:0.7;} .itemListLayout01-itemList__Container .btnType_ptn1{margin-top: 60px;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn{display: -ms-flexbox;display: flex;-ms-flex-align: center;-webkit-align-items: center;align-items: center;min-width: 300px;margin: 0 auto;width: 340px;width: fit-content;font-size: 16px;color: #fff;text-decoration: none;padding: 15px 0;position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;white-space: nowrap;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn span{padding-right:30px;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn .arrow{margin-left: auto;width: 50px;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn::before {content: "";background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);background-size: 8px 1px; background-repeat: repeat-x;position: absolute;bottom: 0;left: 0;right: 0;height: 1px;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn::after {content: "";position: absolute;bottom: 0;right: 0;height: 1px;width: 94px;background: #fff; -webkit-transition-duration: 0.3s;transition-duration: 0.3s;transition: .3s ease-in-out;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn:hover::after {width: 100%;} @media screen and (max-width:834px){ .itemListLayout01-lead__Container{margin:72px auto 0;} .itemListLayout01-contents__Container{margin:56px auto 0;} .itemListLayout01-itemList__Container{margin: 86px auto 0;padding-bottom: 108px;} .itemListLayout01-itemList__Container .product_items{margin-top: 32px;} .itemListLayout01-itemList__Container .product_items_item{width: -webkit-calc(100% / 3 - 12px);width: calc(100% / 3 - 12px);} .itemListLayout01-itemList__Container .btnType_ptn1{margin-top: 50px;} } @media screen and (max-width:640px){ .itemListLayout01-mainVisual__Container .mainVisual-thumbnail{width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .itemListLayout01-lead__Container{margin:42px auto 0;font-size:0.9em;} .itemListLayout01-contents__Container{margin:42px auto 0;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .itemListLayout01-contents__Container .itemList__tabs .tab-item{width: 92px;} .itemListLayout01-contents__Container .itemList__tabs .tab-item .tab-image{width: 80px;border-radius: 80px;} /* アイテム紹介 */ .itemListLayout01-itemList__Container{margin: 68px auto 0;padding-bottom: 72px;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .itemListLayout01-itemList__Container .itemList_inner > .txt{margin-top: 58px;font-size: 0.9em;} .itemListLayout01-itemList__Container .item-author{width: -webkit-calc(100% - 40px);width: calc(100% - 40px);} .itemListLayout01-itemList__Container .c-author{flex: 0 0 100px;} .itemListLayout01-itemList__Container .author-image{width: 75px;height: 75px;} .itemListLayout01-itemList__Container .author-profile{width: 75px;word-break: break-all;} .itemListLayout01-itemList__Container .impressions-content{font-size:0.9em;} .itemListLayout01-itemList__Container .product_items{margin-top: 24px;} .itemListLayout01-itemList__Container .product_items_item{width: -webkit-calc(100% / 2 - 12px);width: calc(100% / 2 - 12px);font-size: 0.8em;} .itemListLayout01-itemList__Container .btnType_ptn1{margin-top: 40px;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn{min-width: 220px;font-size: 13px;} .itemListLayout01-itemList__Container .btnType_ptn1 .btn .arrow{width: 40px;} } /* articleLayout01 -------------------------------- */ .jf-articleLayout01-header{font-family: MyYuMinchoM, "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;max-width: 1200px;margin: 0 auto;} .jf-articleLayout01-header__inner{} .jf-articleLayout01-header .p-breadcrumbs {position: relative;white-space: nowrap;overflow: scroll;padding: 20px 0;} .jf-articleLayout01-header .p-breadcrumbs::-webkit-scrollbar {display:none;} .jf-articleLayout01-header .p-breadcrumbs .p-breadcrumbsList {margin: 0 auto;padding: 0;display: -webkit-flex;display: flex;} .jf-articleLayout01-header .p-breadcrumbs .p-breadcrumbsList li {position: relative;font-size: 13px;padding-right: 26px;font-style: italic;} .jf-articleLayout01-header .p-breadcrumbs .p-breadcrumbsList li:last-of-type {padding-right: 0;} .jf-articleLayout01-header .p-breadcrumbs .p-breadcrumbsList li.rightArrow::after{right: 10px;position:absolute;content: "/";top: 50%;-webkit-transform: translate(0,-50%);transform: translate(0,-50%);color: #202020;} .jf-articleLayout01-header .p-breadcrumbs .p-breadcrumbsList li a{text-decoration:none;color: #535353;font-weight: bold;} .jf-articleLayout01-mainVisual .mainVisual-thumbnail{max-width: 1200px;margin: 62px auto 0;} .jf-articleLayout01-mainVisual .mainVisual-thumbnail img{display:block;width:100%;} .jf-articleLayout01-body{font-family: MyYuMinchoM, "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;margin: 0 auto;max-width: 1000px;width: -webkit-calc(100% - 100px);width: calc(100% - 100px);padding: 62px 50px 100px;font-size: 15px;line-height: 2;color: #5d5d5d;} .jf-articleLayout01-body__inner > *:first-child{margin-top: 0 !important;} .jf-articleLayout01-body .article01-img{display:block;margin: 62px auto 0;} .jf-articleLayout01-body .imgSize-full{width:100%;} .jf-articleLayout01-body .imgSize-middle{width:60%;min-width: 300px;} .jf-articleLayout01-body .article01__txt{margin-top: 62px;} .jf-articleLayout01-body .article01-title__ptn1{color:#202020;text-align: center;margin-top: 62px;font-size: 34px;letter-spacing: .12em;} .jf-articleLayout01-body .article01-title__ptn1-1{color: #8f8f8f;text-align: center;margin-top: 62px;font-size: 26px;letter-spacing: .12em;} .jf-articleLayout01-body .article01-subTitle__ptn1{text-align: center;font-size: 20px;} .jf-articleLayout01-body .c-creditBox_creditList{max-width: 500px;margin-top: 24px;} .jf-articleLayout01-body .article01__txt a{color:#202020;-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-articleLayout01-body .article01__txt a:hover{-webkit-box-shadow: inset 0 -1.5px 0 0 #111;box-shadow: inset 0 -1.5px 0 0 #111;} .jf-articleLayout01-body .c-creditBox_creditList_node{} .jf-articleLayout01-body .c-creditBox_creditList_node:nth-of-type(n+2){margin-top: 12px;}{} .jf-articleLayout01-body .c-creditBox_creditList_node a{display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;text-decoration: none; -webkit-transition: all .3s ease;transition: all .3s ease;} .jf-articleLayout01-body .c-creditBox_creditList_node a:hover{opacity:0.7;} .jf-articleLayout01-body .c-creditBox_creditList_spec{max-width: calc( 100% - 80px);font-family: "Times New Roman", Times, Georgia, serif;font-style: italic;letter-spacing: .08em;line-height: 1.3;font-size: 13px;color: #555;} .jf-articleLayout01-body .c-creditBox_creditList_spec_tax{font-size: 10px;} .jf-articleLayout01-body .c-creditBox_creditList_spec_brand{margin-left: 8px; padding-left: 10px;border-left: 1px solid #555;} .jf-articleLayout01-body .c-creditBox_creditList_bd{-webkit-box-flex: 1;-ms-flex: 1; flex: 1;margin: 0 12px;height: 1px; background-color: #E2E2E2;} .jf-articleLayout01-body .c-creditBox_creditList_button{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center; -ms-flex-align: center;align-items: center; width: 40px; height: 17px; font-size: 10px; color: #fff;font-family: "Times New Roman", Times, Georgia, serif;font-style: italic;letter-spacing: .12em;line-height: 1;background-color: #1A1A1A;} .jf-articleLayout01-body .btnType_ptn1{display: -webkit-box;display: flex;-webkit-box-pack: center;justify-content: center;margin-top: 62px;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .jf-articleLayout01-body .btnType_ptn1 > *:nth-child(n+2){margin-left: 20px;} .jf-articleLayout01-body .btnType_ptn1 .btn{min-width: -webkit-calc(300px - 40px);min-width: calc(300px - 40px);height: 72px;text-align: center;color: #050505;padding: 0 20px;-webkit-transition: 0.3s;transition: 0.3s;text-decoration: none;border: none;font-size: 15px;font-weight: 400;display: -webkit-box;display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;border: 1px solid #202020;position: relative;} .jf-articleLayout01-body .btnType_ptn1 .btn::after{right: 30px;position:absolute;top: 50%;border-top: 1px solid #202020;border-right: 1px solid #202020;content:"";width: 8px;height: 8px;-webkit-transform: translate(0,-50%) rotate(45deg);-moz-transform: translate(0,-50%) rotate(45deg);-ms-transform: translate(0,-50%) rotate(45deg);transform: translate(0,-50%) rotate(45deg);-webkit-transition: 0.3s;transition: 0.3s;} .jf-articleLayout01-body .btnType_ptn1 .btn:hover {color: #fff;background-color: #000;} .jf-articleLayout01-body .btnType_ptn1 .btn:hover::after{border-top: 1px solid #fff;border-right: 1px solid #fff;} .jf-articleLayout01-body .c-column_card{margin-top: 62px;border-top: 1px solid #E2E2E2;border-bottom: 1px solid #E2E2E2;} .jf-articleLayout01-body .c-column_card_content{padding: 62px 0;display: -ms-grid;display: grid;grid-gap: 28px;max-width: 640px;margin: 0 auto;} .jf-articleLayout01-body .c-column_card_img{grid-row: 1 / 3; grid-column: 1 / 2; width: 200px;} .jf-articleLayout01-body .c-column_card_img img{display:block; width:100%;} .jf-articleLayout01-body .c-column_card_title{grid-row: 1 / 2; grid-column: 2 / 3;font-size: 18px;} .jf-articleLayout01-body .c-column_card_description{grid-row: 2 / 3; grid-column: 2 / 3;} .jf-articleLayout01-body .description__headLine{letter-spacing: .12em;font-style: italic;font-size: 12px;color: #aaa;} .jf-articleLayout01-body .description__txt{font-size: 12px;} .jf-articleLayout01-body .c-column_card_description a{color:#202020;-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-articleLayout01-body .c-column_card_description 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){ .jf-articleLayout01-header .p-breadcrumbs {margin:0 32px;} .jf-articleLayout01-mainVisual .mainVisual-thumbnail{margin: 32px auto 0;} .jf-articleLayout01-body .article01-img{margin: 48px auto 0;} .jf-articleLayout01-body .article01__txt{margin-top: 48px;} .jf-articleLayout01-body .article01-title__ptn1{margin-top: 48px;} .jf-articleLayout01-body .article01-title__ptn1-1{margin-top: 48px;} .jf-articleLayout01-body .btnType_ptn1{margin-top: 48px;} } @media screen and (max-width:640px){ .jf-articleLayout01-header .p-breadcrumbs {padding: 12px 0;margin:0 20px;} .jf-articleLayout01-header .p-breadcrumbs .p-breadcrumbsList li {font-size: 12px;} .jf-articleLayout01-mainVisual .mainVisual-thumbnail{margin: 20px auto 0;} .jf-articleLayout01-body{width: -webkit-calc(100% - 64px);width: calc(100% - 64px);padding: 36px 32px 48px;font-size: 13px;} .jf-articleLayout01-body .article01-img{margin: 36px auto 0;} .jf-articleLayout01-body .article01__txt{margin-top: 36px;} .jf-articleLayout01-body .article01-title__ptn1{margin-top: 36px;font-size: 24px;} .jf-articleLayout01-body .article01-title__ptn1-1{margin-top: 36px;font-size: 18px;} .jf-articleLayout01-body .article01-subTitle__ptn1{font-size: 15px;} .jf-articleLayout01-body .c-creditBox_creditList_bd{margin: 0 10px;} .jf-articleLayout01-body .btnType_ptn1{margin-top: 36px;} .jf-articleLayout01-body .btnType_ptn1 .btn{height: 52px;} .jf-articleLayout01-body .c-column_card{margin-top: 36px;} .jf-articleLayout01-body .c-column_card_content{padding: 36px 0;grid-gap: 20px;-ms-grid-columns: 120px 1fr;grid-template-columns: 120px 1fr;} .jf-articleLayout01-body .c-column_card_img{grid-row: 1 / 2; grid-column: 1 / 2; width: 120px;} .jf-articleLayout01-body .c-column_card_title{grid-row: 1 / 2;grid-column: 2 / 3;font-size: 16px;align-self: center;justify-self: center;} .jf-articleLayout01-body .c-column_card_description{grid-row: 2 / 3; grid-column: 1 / 3;} } /* ================================== featureDetail ~2021.02 旧ソース用対応用 ================================== */ .jf-feature-container .feature-content .featureWrapper{margin-top:80px} .jf-feature-container .feature-content .featureWrapper .featureImg img{width: 100%;max-width: 730px;margin: 50px auto;display: block;} @media screen and (max-width:834px){ .jf-feature-container .feature-content .featureWrapper{margin-top:60px} .jf-feature-container .feature-content .featureWrapper .featureImg img{max-width: 500px;} } @media screen and (max-width:640px){ .jf-feature-container .feature-content .featureWrapper{margin-top:40px} .jf-feature-container .feature-content .featureWrapper .featureImg img{margin: 40px auto;} } /* archiveContainer ※freeAreaで使用 -------------------------------- */ .archiveContainer{} .archiveContainer .archiveContainer_inner{padding: 0;margin: 60px auto;position: relative;} .archiveContainer .archiveContainer_inner .labelName{font-size: 18px;position:relative;font-weight:400;} .archiveList{padding: 0;margin: 50px 0 0;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;} .archiveList li{width: -webkit-calc(100% / 3 - 12px);width: calc(100% / 3 - 12px);margin-right: 18px;font-size: 13px;} .archiveList li:nth-of-type(3n){margin-right:0;} .archiveList li:nth-of-type(n+4){margin-top: 50px;} .archiveList li .archiveList_link{display: block; position: relative;transition: .5s ease-in-out;color: #242424;text-decoration: none; color:#fff;} .archiveList li .archiveList_link::before { content: "";position: absolute; left: 0px; bottom: 0px;width: 100%;height: 90%; z-index: -1; background: #242424;} .archiveList li .archiveList_link .photo{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center; align-items: center;} .archiveList li .archiveList_link .photo time {font-size: 13px;display: inline-block; position: relative; -webkit-writing-mode: vertical-rl;writing-mode: vertical-rl; padding: 40px 20px 5px;} .archiveList li .archiveList_link .photo time::before { content: ""; position: absolute; left: 50%; top: 0px;width: 1px; height: 25px; background:#fff} .archiveList li .archiveList_link .photo .img{display: block;overflow: hidden;width: 100%;height: 100%;} .archiveList li .archiveList_link .photo .img img{border: 0;width: 100%;height: 100%;object-fit: cover;vertical-align: middle;display: block;transition: .5s ease-in-out;} .archiveList li .archiveList_link .info{font-size: 0.9em; padding: 30px 30px 50px 60px;} .archiveList li .archiveList_link .info::after{transition: .5s ease-in-out;position: absolute;margin: auto;content: "";height: 1px;width: 28px;background: #fff;display:block;bottom: 20px;right: 25px;} .archiveList li .archiveList_link .info::before{transition: .5s ease-in-out;position: absolute;margin: auto;content: "";height: 1px;width: 10px;background: #fff;display:block;bottom: 23px;right: 23px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);} .archiveList li .archiveList_link .info .title{font-size: 1.3em;} .archiveList li .archiveList_link:hover .img img{-webkit-transform:scale(1.1);transform:scale(1.1);} .archiveList li .archiveList_link:hover .info::after{background: #ddd;right:20px} .archiveList li .archiveList_link:hover .info::before{background: #ddd;right:18px} @media screen and (max-width:834px){ .archiveList{-webkit-flex-wrap: nowrap;flex-wrap: nowrap;overflow-x: scroll;scroll-behavior: smooth;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch;width: -webkit-calc(100vw - 60px);width: calc(100vw - 60px);} .archiveList li{width: 260px;min-width: 260px;} .archiveList li:nth-of-type(3n){margin-right: 20px;} .archiveList li:nth-of-type(n+4){margin-top: 0;} .archiveList li .archiveList_link{white-space: normal;} .archiveList li .archiveList_link .photo time {font-size: 11px;padding: 36px 15px 5px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;} .archiveList li .archiveList_link .info{font-size: 0.9em; padding: 25px 25px 40px 47px;} .archiveList li .archiveList_link .info .title{font-size: 1.2em;} } @media screen and (max-width:640px){ .archiveList{width: -webkit-calc(100vw - 40px);width: calc(100vw - 40px);margin: 40px 0 0;} .archiveContainer .archiveContainer_inner .labelName{font-size: 16px;} }