/* カスタマイズ用CSS */ /*.ec-layoutRole .ec-layoutRole__contents {max-width: 1200px;}*/ .categoryid18 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul:first-child {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a:first-child {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul span {display: none;} .ec-categoryNaviRole {display: none;} .ec-blockTopBtn {display: none !important;} .ec-sliderItemRole .slideThumb {width: 24.4%;} .ec-sliderItemRole .item_nav { margin: 0 -5% 0 0;} .slick-slider {margin-bottom: 10px;} .ec-sliderItemRole .slideThumb img {width: 90%;} .ec-sliderItemRole .slideThumb {margin-bottom: 10px;} .ec-sliderItemRole {padding: 0;} .ec-blockBtn--action {height: 46px; line-height: 46px; background: #333; border: none; transition: all 0.3s ease-out; font-weight: normal;} .ec-productRole .ec-productRole__btn:hover .ec-blockBtn--action {background: #615d59;} .ec-productRole .ec-productRole__profile { width: 90%; margin: 0 0 0 auto;} .ec-productRole__profile {color: rgb(85, 85, 85);} .ec-layoutRole .ec-layoutRole__contents {width: 100%; margin: auto; max-width: 100%;} .ec-productRole .ec-productRole__title .ec-headingTitle { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; color: rgb(85, 85, 85) !important; text-align: left; font-size: 28px; font-weight: normal; margin-bottom: 6px; padding: 0; border: none; /* 游明朝体 */ font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color: #333; } .ec-productRole__description { font-size: 0.9em; font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;} .ec-productRole .ec-productRole__price { border: none; padding: 0; font-size: 14px; margin-bottom: 40px;} .ec-productRole .ec-productRole__title .ec-headingTitle ul { color: rgb(85, 85, 85) !important; font-family: monospace; font-size: 12px; display: block; margin-bottom: 10px; font-weight: normal; padding: 0; } .ec-productRole .ec-productRole__title .ec-headingTitle ul a { pointer-events: none; font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid10 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid15 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid15 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid16 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid17 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid18 {display: none;} .ec-productRole .ec-productRole__title .ec-headingTitle ul a.categoryid21 {display: none;} .ec-price .ec-price__tax,.ec-price {font-size: 16px; font-weight: normal;} .ec-price .ec-price__price {font-weight: normal; padding: 0;} .ec-grid2 .ec-grid2__cell {width: 48%;} .ec-productRole .ec-productRole__actions .ec-select select {width: 100%; min-width: 100%;} .ec-numberInput span {font-size: 16px; line-height: 1em;} .ec-productRole .ec-productRole__actions .ec-select select {background: #fff; border-radius: 0; border-color: #333;} .ec-productRole .ec-productRole__actions {padding-bottom: 0;} .ec-numberInput input[type='number'] {padding-top: 0; padding-bottom: 0; line-height: 1em; height: 30px; /*border-radius: 0;*/ border-color: #333;} .ec-productRole .ec-productRole__price { color: #333; } .ec-productRole .ec-productRole__price { /* 游明朝体 */ font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color: #333; } .ec-numberInput {position: relative;} .ec-numberInput span {position: absolute; top: 7px; left: 10px;} .ec-numberInput input[type='number'] {width: 100%; max-width: 100%;} .ec-productRole .ec-productRole__description { font-size: 13px; font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important; } .ec-productRole .ec-productRole__description.free003 p { margin-bottom: 15px; } .ec-productRole .ec-productRole__description.free003 p span { margin-bottom: 2px; font-weight: bold; display: block; font-size: 14px; } .ec-blockBtn--action { background: #5CB1B1 !important; } .ec-blockBtn--action { height: 46px; line-height: 46px; background: #333; border: none; transition: all 0.3s ease-out; font-weight: normal; } .ec-numberInput input[type='number'] { width: 100%; max-width: 100%; } .ec-numberInput input[type='number'] { padding-top: 0; padding-bottom: 0; line-height: 1em; height: 30px; /* border-radius: 0; */ border-color: #333; } .ec-blockBtn--action { width: 100%; margin-bottom: 20px; } .ec-productRole .ec-productRole__price .ec-price__tax { font-size: 13px; margin-left: 10px; } .ec-productRole .ec-productRole__btn { width: 100%; } /* 全ての要素に共通 */ #wrap { width: 100%; margin: auto; max-width: 1200px; /* 游明朝体 */ font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } a { color: #333; text-decoration: none; } a:hover { opacity: 0.7; transition: all 0.3s ease-out; color: #333; text-decoration: none; } ul li { list-style-type: none; } .left {float: left;} .right {float: right;} .sp-zone {display: none;} .pc-zone {display: block;} html { background: #fff; } .ec-itemNav__nav { display: block; } .ec-layoutRole__contents { margin-top: 0px; /*margin-bottom: 120px;*/ margin-bottom: 0px; } .ec-productRole {margin: 0; padding: 0;} .ec-grid2 {width: 100%;} .ec-productRole {max-width: 100%; margin: 0;} .ec-pageHeader h1.contact {font-size: 20px; border-bottom:none; margin-bottom: 60px; font-weight: normal; padding-top: 60px; text-align: center;} .ec-borderedDefs {border-top: 1px none !important;} .ec-borderedDefs dl {border-bottom: none !important;} .ec-borderedDefs dt span.ec-required {line-height: 1.5em; padding: 1px 5px; font-size: 12px; background: #aaa; color: #fff; margin-left: 15px; border-radius: 5px;} .ec-contactRole p {text-align: center;} .hp-access { display: none; position: fixed; bottom: 90px; right: 30px; width: 120px; padding: 10px; text-align: center; line-height: 1.7em; font-size: 15px; font-weight: bold; color: #fff; background: #333; } .hp-access:hover { color: #fff; background: #615d59; } .ec-productRole { margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; font-size: 16px; line-height: 1.4; color: #525263; -webkit-text-size-adjust: 100%; width: 100%; } .ec-shelfGrid {margin: auto;} /* 全てに適用 */ .right {float: right} .left {float: left;} /* header.phpに適用 */ .sp-navi {display: none;} .navi {display: none;} header {padding: 0;} span.pc {display: block;} span.sp {display: none;} body {color: #555;} /* 下記header記述 */ header {} header #wrap {margin-top: 40px; max-width: 1200px;} header #wrap h1 {font-size: 24px; letter-spacing: 0.2px; margin-bottom: 5px;} header #wrap h1 span {font-size: 19px;} header #wrap .title-area {width: 75%; height: auto; margin: auto;} header #wrap .title-area img {width: 100%; height: auto;} header #wrap .left .title-sub-text {font-size: 12px; letter-spacing: 0.2px;} header .title-zone {background: #fafafa;} header #wrap.page .page-title {text-align: center;} header #wrap.page .left {text-align: center; float: none;} header #wrap.contact {margin-bottom: 60px;} header #wrap .content {width: 100%; margin: auto; position: relative;} header #wrap .content h1 {width: 240px; margin: auto; margin-bottom: 39px;} header #wrap .content h1 img {width: 100%; height: auto;} header #wrap .content .tel {position: absolute; top: 0; right: 0; text-align: right; font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;} header #wrap .content .tel .text {font-size: 16.5px; line-height: 1em;} header #wrap .content .tel .text span {font-size: 13px; line-height: 1em; display: block; margin-top: 4px;} header #wrap .content .tel .text:nth-child(2) span {letter-spacing: 0.2px;} header #wrap .content .tel .text:nth-child(3) span {letter-spacing: 0.6px;} header #wrap .content .tel .cart {text-align: right; width: 20px; position: absolute; /*right: 3%; bottom: 100px;*/bottom: 15px; left: -42px; z-index: 9999;} header #wrap .content .tel .cart a {display: block; width: 20px; margin: 10px 0 0 auto;} header #wrap .content .tel .cart img {width: 100%; height: auto;} header #wrap .content .menu {display: flex; justify-content: space-between; margin-bottom: 24px;} header #wrap .content .menu li {/*width: calc(100% / 8);*/ text-align: center;} header #wrap .content .menu li a {text-align: center; font-size: 14px; line-height: 1.5em; color: #555;} header #wrap .content .menu li a.comingsoon {pointer-events: none;} header #wrap .content .menu li a p {position: relative;} header #wrap .content .menu li a p img {width: 100%; height: auto;} header #wrap .content .menu li a p:nth-child() {background: url(../images/header/slide001.png) no-repeat center center;} header #wrap .content .menu li a .lang01 {display: block; transition: all 0.3s ease-out;} header #wrap .content .menu li a .lang02 {display: none; transition: all 0.3s ease-out;} header #wrap .content .menu li a {/*width: calc(100% / 8);*/ text-align: center; height: 20px; text-align: center; padding-bottom: 20px;} header .title-area {width: 100%; position: relative;} header .title-area p {text-align: center; font-size: 16px;} header .title-area p.header-fadein {margin-bottom: 10px;} header .title-area p.first-in {margin-bottom: 40px;} header .title-area h2 {width: 275px; margin: auto;} header .title-area h2 img {width: 100%; height: auto;} header .title-area .first-text {position: absolute; top: 182px; /*bottom: 0;*/ left: 0; right: 0; margin: auto; width: 50%; z-index: 999; height: 250px;} header .title-area .slider {width: 100%; max-width: 1600px; height: 600px;} header .title-area .slider li {height: 600px;} header .title-area .slider li:nth-child(1) {background: url(../images/header/slide001.png) no-repeat center center;} header .title-area .slider li:nth-child(2) {background: url(../images/header/slide03.png) no-repeat top center;} header .title-area .slider li:nth-child(3) {background: url(../images/header/slide002.png) no-repeat top center;} header .title-area .slider li:nth-child(4) {background: url(../images/header/slide003.png) no-repeat center center;} header .title-area .slider li:nth-child(5) {background: url(../images/header/slide02.png) no-repeat center center;} /*{background: url(../ec-shopping/common/images/header/slide04s.jpg) no-repeat center center;}*/ header .title-area .bx-controls {display: none;} header .first-text-area {background: #fbfbfb; width: 100%; height: 600px; position: absolute; z-index: 99; top: 0; left: 0; right: 0; margin: auto;} header.pages {border-bottom: 1px solid #efefef;} .take-on {} .take-on header #wrap .content .menu-area {width: 100%; position: fixed; top: 0; left: 0; padding-top: 40px; z-index: 9999; background-color: #fff; border-bottom: 1px solid #efefef;} .take-on header #wrap .content .menu-area .menu {width: 1200px; margin: auto;} header #wrap .content .menu {display: flex; justify-content: space-between; /*padding-bottom: 30px;*/} .take-on header #wrap .content .menu li {padding-bottom: 20px;} header #wrap .content .menu li a {/*width: calc(100% / 8);*/ text-align: center; height: 20px; text-align: center; padding-bottom: 20px;} /*header #wrap .content .menu li a.current {padding-bottom: 2px; margin-bottom: 20px; border-bottom: 3px solid #aaa;}*/ header #wrap .content .menu li a {display: block; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; /*font-weight: bold;*/ text-align: center;} header #wrap .content .menu li .lang01 {display: block; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} header #wrap .content .menu li .lang02 {font-size: 10px; display: none; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} header #wrap .content .menu li:hover .lang01 {display: none; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} header #wrap .content .menu li:hover .lang02 {display: block; position: absolute; top: 0; left: 0; right: 0; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #front_page header #wrap .content .menu li:nth-child(1) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} .product_page header #wrap .content .menu li:nth-child(2) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} #brand-concept header #wrap .content .menu li:nth-child(4) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} #about header #wrap .content .menu li:nth-child(5) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} #other_page header #wrap .content .menu li:nth-child(6) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} #page_mypage header #wrap .content .menu li:nth-child(7) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} #page_mypage_favorite header #wrap .content .menu li:nth-child(8) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} .cart_page header #wrap .content .menu li:nth-child(9) a {padding-bottom: 22px; margin-bottom: -22px; border-bottom: 3px solid #aaa;} /* header #wrap .content .menu li:nth-child(1) {position: relative; top: 0; left: 0; width: 32px;} header #wrap .content .menu li:nth-child(2) {position: relative; top: 0; left: 0; width: 80px;} header #wrap .content .menu li:nth-child(3) {position: relative; top: 0; left: 0; width: 130px;} header #wrap .content .menu li:nth-child(4) {position: relative; top: 0; left: 0; width: 95px;} header #wrap .content .menu li:nth-child(5) {position: relative; top: 0; left: 0; width: 110px;} header #wrap .content .menu li:nth-child(6) {position: relative; top: 0; left: 0; width: 70px;} header #wrap .content .menu li:nth-child(7) {position: relative; top: 0; left: 0; width: 125px;} header #wrap .content .menu li:nth-child(8) {position: relative; top: 0; left: 0; width: 100px;} header #wrap .content .menu li:nth-child(9) {position: relative; top: 0; left: 0; width: 110px;} */ /* 以下から */ /* header #wrap .content .menu li:nth-child(1) {position: relative; top: 0; left: 0; width: 32px !important;} header #wrap .content .menu li:nth-child(2) {position: relative; top: 0; left: 0; width: 80px !important;} header #wrap .content .menu li:nth-child(3) {position: relative; top: 0; left: 0; width: 130px !important;} header #wrap .content .menu li:nth-child(4) {position: relative; top: 0; left: 0; width: 95px !important;} header #wrap .content .menu li:nth-child(5) {position: relative; top: 0; left: 0; width: 110px !important;} header #wrap .content .menu li:nth-child(6) {position: relative; top: 0; left: 0; width: 70px !important;} header #wrap .content .menu li:nth-child(7) {position: relative; top: 0; left: 0; width: 125px !important;} header #wrap .content .menu li:nth-child(8) {position: relative; top: 0; left: 0; width: 100px !important;} header #wrap .content .menu li:nth-child(9) {position: relative; top: 0; left: 0; width: 110px !important;} */ header #wrap .content .menu li:nth-child(1) {position: relative; top: 0; left: 0; width: 32px !important;} header #wrap .content .menu li:nth-child(2) {position: relative; top: 0; left: 0; width: 60px !important;} header #wrap .content .menu li:nth-child(2):hover {position: relative; top: 0; left: 0; width: 40px !important; margin-right: 20px;} header #wrap .content .menu li:nth-child(3) {position: relative; top: 0; left: 0; width: 130px !important;} header #wrap .content .menu li:nth-child(4) {position: relative; top: 0; left: 0; width: 95px !important;} header #wrap .content .menu li:nth-child(5) {position: relative; top: 0; left: 0; width: 70px !important;} header #wrap .content .menu li:nth-child(6) {position: relative; top: 0; left: 0; width: 53px !important;} header #wrap .content .menu li:nth-child(7) {position: relative; top: 0; left: 0; width: 75px !important;} header #wrap .content .menu li:nth-child(8) {position: relative; top: 0; left: 0; width: 65px !important;} header #wrap .content .menu li:nth-child(9) {position: relative; top: 0; left: 0; width: 95px !important;} header #wrap .content .menu li:nth-child(1) a {background: url(/common/menu/menu01.png) no-repeat top center; background-size: 34px;} header #wrap .content .menu li:nth-child(2) a {background: url(/common/menu/menu02.png) no-repeat top center; background-size: 80px;} header #wrap .content .menu li:nth-child(3) a {background: url(/common/menu/menu03.png) no-repeat top center; background-size: 130px;} header #wrap .content .menu li:nth-child(4) a {background: url(/common/menu/menu04.png) no-repeat top center; background-size: 100px;} header #wrap .content .menu li:nth-child(5) a {background: url(/common/menu/menu05.png) no-repeat top center; background-size: 110px; margin-top: 2px;} header #wrap .content .menu li:nth-child(6) a {background: url(/common/menu/menu06.png) no-repeat top center; background-size: 70px;} header #wrap .content .menu li:nth-child(7) a {background: url(/common/menu/menu07.png) no-repeat top center; background-size: 120px; margin-top: 2px;} header #wrap .content .menu li:nth-child(8) a {background: url(/common/menu/menu08.png) no-repeat top center; background-size: 120px;} header #wrap .content .menu li:nth-child(9) a {background: url(/common/menu/menu09.png) no-repeat top center; background-size: 120px;} header #wrap .content .menu li:nth-child(1):hover a img {width: 105%;} header #wrap .content .menu li:nth-child(2):hover a img {width: 185%; margin-left: -15px;} header #wrap .content .menu li:nth-child(3):hover a img {width: 100%; margin-left: -21px;} header #wrap .content .menu li:nth-child(4):hover a img {width: 100%;} header #wrap .content .menu li:nth-child(5):hover a img {width: 100%; margin-left: -22px;} header #wrap .content .menu li:nth-child(6):hover a img {width: 120%; margin-left: -5px;} header #wrap .content .menu li:nth-child(7):hover a img {width: 165%; margin-left: -20px;} header #wrap .content .menu li:nth-child(8):hover a img {width: 165%; margin-left: -20px;} header #wrap .content .menu li:nth-child(9):hover a img {width: 150%; margin-left: -20px;} header #wrap .content .menu li:nth-child(1):hover a {/*background: url(/common/menu/menu01-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(2):hover a {/*background: url(/common/menu/menu02-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(3):hover a {/*background: url(/common/menu/menu03-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(4):hover a {/*background: url(/common/menu/menu04-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(5):hover a {/*background: url(/common/menu/menu05-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(6):hover a {/*background: url(/common/menu/menu06-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(7):hover a {/*background: url(/common/menu/menu07-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(8):hover a {/*background: url(/common/menu/menu08-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li:nth-child(9):hover a {/*background: url(/common/menu/menu09-on.png) no-repeat center center;*/ background: none;} header #wrap .content .menu li a .lang01 {display: none;} /* 以上まで */ /* header #wrap .content .menu li a.current { display: inline-table; padding-bottom: 6px; margin-bottom: -14px; border-bottom: 3px solid #aaa; } */ .ec-select__delivery,.ec-select__time {display: none;} header .title-area .slider li img {display: none;} header .title-area .slider li:nth-child(1) {height: 600px; background: url(/common/images/header/slide01.jpg) no-repeat center center;} header .title-area .slider li:nth-child(2) {height: 600px; background: url(/common/images/header/slide02s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(3) {height: 600px; background: url(/common/images/header/slide03s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(4) {height: 600px; background: url(/common/images/header/slide04s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(5) {height: 600px; background: url(/common/images/header/slide05s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(6) {height: 600px; background: url(/common/images/header/slide06s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(7) {height: 600px; background: url(/common/images/header/slide07s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(8) {height: 600px; background: url(/common/images/header/slide08s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(9) {height: 600px; background: url(/common/images/header/slide09s.jpg) no-repeat center center;} /* header #wrap .content .menu li a.current { display: inline-table; padding-bottom: 6px; margin-bottom: -14px; border-bottom: 3px solid #aaa; } */ .ec-select__delivery,.ec-select__time {display: none;} header .title-area .slider li img {display: none;} header .title-area .slider li:nth-child(1) {height: 600px; background: url(/common/images/header/slide01.jpg) no-repeat center center;} header .title-area .slider li:nth-child(2) {height: 600px; background: url(/common/images/header/slide02s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(3) {height: 600px; background: url(/common/images/header/slide03s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(4) {height: 600px; background: url(/common/images/header/slide04s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(5) {height: 600px; background: url(/common/images/header/slide05s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(6) {height: 600px; background: url(/common/images/header/slide06s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(7) {height: 600px; background: url(/common/images/header/slide07s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(8) {height: 600px; background: url(/common/images/header/slide08s.jpg) no-repeat center center;} header .title-area .slider li:nth-child(9) {height: 600px; background: url(/common/images/header/slide09s.jpg) no-repeat center center;} /* .page-wrap .wrap-content .content .side-content {display: none;} .product_page .page-wrap .wrap-content .content .side-content {display: block;} */ #wrap .top-content-first {margin-top: -200px;} .ec-sliderRole {max-width: 1200px !important; padding-left: 0px !important; padding-right: 0px !important;} /* フェード */ .fadein { opacity : 0; transform : translate(0, 50px); transition:all 0.5s; display:block; margin:60px auto; text-align:center; } .fadein.scrollin { opacity : 1; transform : translate(0, 0); font-size: 14px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; } .about .page-wrap .wrap-content {margin-top: 0;} .about .page-wrap .wrap-content .content {margin-bottom: 90px;} .brand-concept .page-wrap .wrap-content {margin-top: 0;} .brand-concept .page-wrap .wrap-content .content {margin-bottom: 90px;} .ec-layoutRole .ec-layoutRole__contents {margin-bottom: 100px;} .ec-pageHeader /* 下記フッター */ footer {} footer {background: #efefef !important;} footer #wrap {padding: 60px 0; text-align: center;} footer #wrap h1 {} footer .footer-content .list h1 {} footer #wrap .copy {font-size: 20px; letter-spacing: 0.3px; margin: -10px 0 10px 0;} footer #wrap p.txt01 {font-size: 13px; line-height: 1.4em;} footer .footer-content {display: flex; justify-content: space-between;} footer .footer-content .list {width: 46%; color: #555;} footer .footer-content .list:first-child {width: 320px;} footer .footer-content .list:last-child {margin-top: 20px;} footer .footer-content .list:first-child p:last-child {font-size: 14px; margin-top: 3px;} footer .footer-content .list a {color: #555;} footer .footer-content .list h1 {width: 245px; margin: 0 auto 15px auto;} footer .footer-content .list h1 img {width: 100%; height: auto;} footer .footer-content .list ul {display: flex; flex-wrap: left; margin-bottom: 25px; flex-wrap: wrap; justify-content: flex-start;} footer .footer-content .list ul li {width: calc(100% / 4); text-align: left;} footer .footer-content .list ul li.no-link a {pointer-events: none; color: #afafaf;} footer .footer-content .list ul li a {display: block; font-size: 13px; line-height: 2.0em;} footer .footer-content .list ul li.text01 a {font-size: 10px; letter-spacing: -1px;} /* index */ header #wrap.contact {margin-bottom: 60px;} #wrap.top {margin: -81px auto auto auto;} #wrap .top-content { font-size: 16px; line-height: 1.7em; margin-bottom: 120px;} #wrap .top-content h1 {} /*#wrap .top-content h2 {font-size: 32px; margin-bottom: 100px;}*/ #wrap .top-content h2 {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; /*font-weight: bold;*/ font-size: 20px; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid #efefef; text-align: center; color: #615d59;} #wrap .top-content h2 span {display: block; font-size: 16px; margin-top: 0px;} #wrap .top-content h2.title-con {margin-top: -15px;} #wrap .top-content h2.title-con img {width: 330px;} #wrap .top-content .content-text {margin: 30px auto;} #wrap .top-content .content-text span {display: inline-block; margin-bottom: 20px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dl {margin-top: 0;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt {width: 230px; padding-left: 80px; position: relative; text-align: left; margin-bottom: 30px; float: left;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt span {position: absolute; top: 0; left: 0; line-height: 1.5em; padding: 5px; font-size: 12px; background: #aaa; color: #fff; margin-left: 15px; border-radius: 5px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dd {float: left; margin-bottom: 30px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dd input {border: 1px solid #aaaaaa; padding: 3px;} .mw_wp_form.mw_wp_form_input button, .mw_wp_form.mw_wp_form_input input, .mw_wp_form.mw_wp_form_input optgroup, .mw_wp_form.mw_wp_form_input select, .mw_wp_form.mw_wp_form_input textarea {width: 500px; border: 1px solid #aaaaaa;} .mw_wp_form.mw_wp_form_input textarea {padding: 5px;} li.form-Confirmation .next {background: #fff;} .mw_wp_form.mw_wp_form_input [type="button"], .mw_wp_form.mw_wp_form_input [type="reset"], .mw_wp_form.mw_wp_form_input [type="submit"] {width: 200px; margin-bottom: 30px;} .mw_wp_form_preview {} .mw_wp_form_preview dl {padding-bottom: 5px; margin-bottom: 30px; text-align: left; border-bottom: 1px solid #efefef;} .mw_wp_form_preview dt {display: inline-block; width: 200px;} .mw_wp_form_preview dt span {display: none;} .mw_wp_form_preview dd {display: inline-block;} .mw_wp_form_preview .btnbox input {} #wrap .top-content .btnbox input {width: 100px; margin-bottom: 20px; border: 1px solid #000000; padding: 5px 10px; background: #fff;} #wrap .top-content .btnbox input:hover {background: #000; color: #fff;} #wrap .top-content.contact-content {width: 825px; padding-top: 60px; margin: auto auto 100px auto;} .btnbox li {text-align: center;} .near-bottom .page-wrap .wrap-content .content .side-content.fixedWidget { opacity: 0; transition: .3s; pointer-events: none; } /* ページごとのコンテンツ処理 */ .page-wrap .wrap-content {width: 90%; /*max-width: 1200px;*/ margin: 80px 5% 0px 5%; /*min-height: 1000px;*/} .page-wrap .wrap-content .ec-shelfGrid { justify-content: space-between; } .ec-shelfGrid .ec-shelfGrid__item {font-size: 13px; text-align: center; width: 32% !important; margin-right: 0 !important; margin-right: 5%; margin-bottom: 40px; position: relative;} .ec-shelfGrid .ec-shelfGrid__item img {width: 100%; height: auto;} .cat-tab {margin-bottom: 10px;display: flex; flex-wrap: wrap; justify-content: flex-start;} #page_product_list .page-wrap .wrap-content h2 {border-bottom: none;} .mintyo { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; } .page-wrap .wrap-content .content .main-content .cat-tab {width: 100%; display: flex; margin-bottom: 30px;} .page-wrap .wrap-content .content .main-content .cat-tab li {width: calc(100% / 4.5); border-right: 1px solid #efefef; margin-bottom: 30px;} .page-wrap .wrap-content .content .main-content .cat-tab li a {display: block; margin: 0 15px; font-size: 14px; text-align: center; padding: 10px 0;} /*.page-wrap .wrap-content .content .main-content .cat-tab li a.current {border-bottom: 2px solid #efefef; pointer-events: none;}*/ .page-wrap .wrap-content .content .main-content .cat-tab li:last-child {border-right: none;} .page-wrap .wrap-content .content {/*margin-bottom: 180px;*/ /*display: flex; justify-content: space-between;*/} .page-wrap .wrap-content .content .side-content {width: 17%; float: left; padding-top: 40px;} /* .page-wrap .wrap-content .content .side-content.fixedWidget {position: fixed; top: 0; left: 0%;} */ .page-wrap .wrap-content .content .side-content ul {margin-bottom: 50px; font-size: 0.9em; font-family: monospace;} .page-wrap .wrap-content .content .side-content ul li {} .page-wrap .wrap-content .content .side-content ul li a {color: #555; display: block; margin-bottom: 5px; font-size: 12px;} .page-wrap .wrap-content .content .side-content ul li.main {margin-left: -10px; font-size: 18px; font-weight: normal; margin-bottom: 15px; display: block;} .page-wrap .wrap-content .content .side-content .side-top {font-family: monospace; margin-left: -10px; font-size: 18px; font-weight: bold; margin-bottom: 40px; display: block;} .page-wrap .wrap-content .content .main-content {width: 78%; float: right; padding-top: 40px; margin-bottom: 150px;} .page-wrap .wrap-content .content .main-content:last-child {margin-bottom: 0;} .page-wrap .wrap-content h2 {font-weight: bold;font-size: 20px; font-family: monospace; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid #efefef; text-align: center; color: #615d59;} .page-wrap .wrap-content a img {border: none; vertical-align: top; -webkit-transition: 1.0s ease-in-out; -moz-transition: 1.0s ease-in-out; -o-transition: 1.0s ease-in-out; transition: 1.0s ease-in-out;} .page-wrap .wrap-content .photo {overflow: hidden;} /* archive.product.php */ .page-wrap .wrap-content .content ul.list {display: flex; justify-content: flex-start; flex-wrap: wrap;} .page-wrap .wrap-content .content ul.list li {text-align: center; width: 30%; margin-right: 5%; margin-bottom: 40px; position: relative;} .page-wrap .wrap-content .content ul.list li:nth-child(3n) {margin-right: 0;} .page-wrap .wrap-content .content ul.list li .off {display: block; transition: all 0.3s ease-out;} .page-wrap .wrap-content .content ul.list li .on {position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;} .page-wrap .wrap-content .content ul.list li:hover .off {display: block;} .page-wrap .wrap-content .content ul.list li:hover .on {opacity: 1; background: #fff; position: absolute; top: 0; left: 0; z-index: 99;} .page-wrap .wrap-content .content ul.list li:hover .on {opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1.0; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;} .page-wrap .wrap-content .content ul.list li a {display: block;} .page-wrap .wrap-content .content ul.list li h2 {font-size: 15px; margin-bottom: 10px;} .page-wrap .wrap-content .content ul.list li .photo {margin-bottom: 15px; overflow: hidden; position: relative;} .page-wrap .wrap-content .content ul.list li .photo img {width: 100%; height: auto;} .page-wrap .wrap-content .content ul.list li ul.photo {display: flex; flex-wrap: wrap;} .page-wrap .wrap-content .content ul.list li ul.photo li {width: 50%; margin: 0;} .page-wrap .wrap-content .content ul.list li .info {font-size: 13px;} .page-wrap .wrap-content .content ul.list li .coming_soon {position: absolute; display: none; top: 0; left: 0; z-index: 9;} .page-wrap .wrap-content .content ul.list li .coming_soon img {width: 100%; height: auto;} /* single-product.php */ #product.page-wrap .single {width: 90%; margin: 80px 5% 0px 5%;} #product.page-wrap .wrap-content.single .content .side-content.fixedWidget {left: 6%;} #product.page-wrap .single .bx-controls-direction {display: none;} #product.page-wrap .single .content {} #product.page-wrap .single .content h1 {font-size: 32px; font-weight: bold; margin-bottom: 20px;} #product.page-wrap .single .content h1 span {font-family: monospace; font-size: 12px; display: block; margin-bottom: 10px; font-weight: normal;} #product.page-wrap .single .content .single-content {margin-bottom: 180px;} #product.page-wrap .single .content .single-content .photo-area {width: 50%;} #product.page-wrap .single .content .single-content .photo-area img {width: 100%; height: auto;} #product.page-wrap .single .content .single-content .photo-area .bx-pager {} #product.page-wrap .single .content .single-content .photo-area .bx-pager {margin-top: 5px; display: flex; margin-left: -4%; justify-content: flex-start; flex-wrap: wrap;} #product.page-wrap .single .content .single-content .photo-area .bx-pager li {width: 22%; margin-left: 3%; margin-top: 10px;} #product.page-wrap .single .content .single-content .photo-area .bx-pager li img {width: 100%; height: auto;} #product.page-wrap .single .content .single-content .text-area {width: 45%; font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;} #product.page-wrap .single .content .single-content .text-area ul {padding: 0;} #product.page-wrap .single .content .single-content .text-area ul > li {margin-bottom: 20px;} #product.page-wrap .single .content .single-content .text-area ul > li .title {font-size: 0.9em;} #product.page-wrap .single .content .single-content .text-area .price-text {font-size: 16px; margin-bottom: 40px;} #product.page-wrap .single .content .single-content .text-area ul li.price {margin-top: 60px; margin-bottom: 0px;} #product.page-wrap .single .content .single-content .text-area ul li.price ul {display: flex;} #product.page-wrap .single .content .single-content .text-area ul li.price ul li {position: relative; margin-right: 20px;} #product.page-wrap .single .content .single-content .text-area ul li.price ul li:first-child {border: 1px solid #efefef; width: 150px; padding: 10px 5px;} #product.page-wrap .single .content .single-content .text-area ul li.price ul li:first-child:after {position: absolute; top: 10px; font-size: 10px; right: 5px; content: '▼';} #product.page-wrap .single .content .single-content .text-area ul li.price ul li:first-child:before {font-size: 11px; position: absolute; top: -20px; left: 0; content: 'サイズを選択';} #product.page-wrap .single .content .single-content .text-area ul li.price ul li a.list {font-size: 12px; display: block; text-decoration: underline;} #product.page-wrap .single .content .single-content .text-area .cart-btn {background: #333; width: 100%; padding: 10px 0; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; cursor: pointer;} #product.page-wrap .single .content .single-content .text-area .cart-btn:hover {background: #615d59;} #product .single-content { margin-top: 0; } .page-wrap #product .wrap-content .content .main-content { padding-top: 0px; } .bxslider-product img { width: 100%; height: auto; } .bx-pager { margin-left: -10px; display: flex; flex-wrap: wrap; } .bx-pager li { float: left; width: 18%; margin-left: 10px; margin-top: 10px; } .bx-pager a { display: block; border: 1px solid #fff; } .bx-pager a img { width: 100%; height: auto; } .page-wrap .wrap-content .content {margin-bottom: 180px; /*display: flex; justify-content: space-between;*/} .page-wrap .wrap-content .content.content-first {margin-bottom: 60px;} .page-wrap .wrap-content .content .side-content {width: 17%; float: left; padding-top: 40px;} .page-wrap .wrap-content .content .side-content.fixedWidget {padding-top: 120px;} .top-content .page-wrap .wrap-content .content .side-content {display: none;} /* .page-wrap .wrap-content .content .side-content.fixedWidget {position: fixed; top: 0; left: 5%;} */ .page-wrap .wrap-content .content .side-content ul {margin-bottom: 50px; font-size: 0.9em; font-family:"游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;} .page-wrap .wrap-content .content .side-content ul li {} .page-wrap .wrap-content .content .side-content ul li a {display: block; margin-bottom: 5px;} .page-wrap .wrap-content .content .side-content ul li.main {margin-left: -10px; font-size: 18px; /*font-weight: bold;*/ margin-bottom: 15px; display: block;} .page-wrap .wrap-content .content .side-content .side-top {font-family:"游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; margin-left: -10px; font-size: 18px; /*font-weight: bold;*/ margin-bottom: 40px; display: block;} .page-wrap .wrap-content .content .main-content {width: 78%; float: right; padding-top: 40px; margin-bottom: 150px;} .page-wrap .wrap-content .content .main-content:last-child {margin-bottom: 0;} #products.page-wrap .wrap-content .content .main-content { padding-top: 0; } .ec-navlistRole__item#nav_mypage_sln_edit_card {display: none;} .ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {z-index: 9998;} .page-wrap .wrap-content .content {margin-bottom: 180px; /*display: flex; justify-content: space-between;*/} .page-wrap .wrap-content .content .side-content { margin-left: 20px; width: 17%; float: left; padding-top: 0px;} .page-wrap .wrap-content .content .side-content.fixedWidget {padding-top: 120px;} .top-content .page-wrap .wrap-content .content .side-content {display: none;} .page-wrap .wrap-content .content .side-content ul li a { display: block; color: #555; font-size: 12.5px; margin-bottom: 12px !important; } #page_product_list .page-wrap .wrap-content h2 { } #page_product_list .page-wrap .wrap-content h2 {border-bottom: none;} .mintyo { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; } .page-wrap .wrap-content .content .main-content .cat-tab {width: 100%; display: flex; margin-bottom: 30px;} .page-wrap .wrap-content .content .main-content .cat-tab.first-cat-tab {margin-bottom: 20px; border-bottom: 1px solid #efefef; padding-bottom: 0px;} .page-wrap .wrap-content .content .main-content .cat-tab.first-cat-tab li {margin-bottom: 20px;} .page-wrap .wrap-content .content .main-content .cat-tab li {width: calc(100% / 4.5); border-right: 1px solid #efefef; margin-bottom: 30px;} .page-wrap .wrap-content .content .main-content .cat-tab li a {display: block; margin: 0 15px; font-size: 13px; text-align: center; padding: 10px 0;} .top-content .bxslider01 li {} .top-content .bxslider01 li p {font-size: 13px; text-align: center;} .top-content .bx-default-pager {display: none;} .top-content .bxslider01 li img {width: 100%; height: auto;} .top-content .bxslider01 li a {display: block;} .top-content .collections-list {display: flex; justify-content: space-between; width: 95%; margin: auto;} .top-content .collections-list li {width: 32%; position: relative;} .top-content .collections-list li .collection-title {width: 100%;} .top-content .collections-list li .collection-title img {width: 100%; height: auto;} .top-content .collections-list li h3 {display: none; font-size: 16px; color: #615d59; /*font-weight: bold;*/ margin-bottom: 10px; text-align: center;} .top-content .collections-list li img {width: 100%; height: auto;} .top-content .collections-list li ul {display: flex; flex-wrap: wrap;} .top-content .collections-list li ul li {width: 50%;} .top-content .collections-list li ul li:nth-child(3),.top-content .collections-list li ul li:nth-child(4) {display: none;} .top-content .collections-list li .coming_soon {position: absolute; display: none; bottom: 0; left: 0; z-index: 99;} .top-content .items-list {display: flex; flex-wrap: wrap; margin: auto;} .top-content .items-list li {width: 46%; margin: 0 20px 40px 20px;} .top-content .items-list > li {border: 1px solid #efefef; position: relative;} .top-content .items-list > li .coming_soon {position: absolute; display: none; top: 0; left: 0; z-index: 9;} .top-content .items-list li img {width: 100%; height: auto;} .top-content .items-list li ul {display: flex;} .top-content .items-list li ul li {width: calc(100% / 3); margin: 0;} .top-content .items-list li h3 {font-size: 15px; text-align: center; padding: 10px 0; /*font-weight: bold;*/} .top-content .items-list li h3.title {font-size: 16px; color: #fff; position: absolute; left: 0; right: 0; top: 0; right: 0; height: 28px; margin: 193px 0; padding: 0;} .top-content .news_and_blog-area {display: flex; justify-content: space-between; margin-top: 165px;} .top-content .news_and_blog-area ul {width: 46%;} .top-content .news_and_blog-area ul li {margin-bottom: 30px; padding-bottom: 5px; border-bottom: 1px solid #efefef;} .top-content .news_and_blog-area ul h2 {padding-bottom: 0 !important; border-bottom: none !important; text-align: left !important;} .top-content .news_and_blog-area ul li a {font-size: 13px;} .top-content .news_and_blog-area ul li span {} #wrap .top-content .content-area .news_and_blog-area p {font-size: 15px; text-align: center;} #wrap .top-content .content-area .bx-wrapper {position: relative; max-width: 1200px !important;} #wrap .top-content .content-area .bx-viewport {max-width: 1200px !important;} #wrap .top-content .content-area .bx-wrapper .bx-controls {position: absolute; top: 0; bottom: 0; margin: auto;} #wrap .top-content .content-area .bx-wrapper .bx-controls-direction {width: 1200px;} #wrap .top-content .content-area .bx-wrapper .bx-controls-direction .bx-prev {left: -30px; transform: scale(1.0, 2); color: #615d59; font-size: 21px; position: absolute; top: 50%;} #wrap .top-content .content-area .bx-wrapper .bx-controls-direction .bx-next {right: -30px; transform: scale(1.0, 2); color: #615d59; font-size: 21px; position: absolute; top: 50%;} #wrap .top-content .content-area {margin-bottom: 180px;} #wrap .top-content .content-area {opacity: 0;transform : translate(0, 50px); transition:all 0.5s; display:block;} #wrap .top-content .content-area.scrollin { opacity : 1; transform : translate(0, 0); } #wrap.attencion {width: 900px; margin: auto;} /*#wrap.attencion .page-wrap .wrap-content .content .side-content,.page-wrap .wrap-content .content .side-content {display: none;}*/ #wrap.attencion .attencion {width: 900px;} #wrap.attencion .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #wrap.attencion .wrapcontent .content {margin-bottom: 60px; line-height: 2em;} #wrap.attencion .wrapcontent .content img {width: 300px; height: auto;} #wrap.attencion .wrapcontent .content h3 {font-size: 18px; margin-bottom: 10px; /*font-weight: bold;*/} #wrap.attencion .wrapcontent .content span {display: block; margin-left: 20px; position: relative;} #wrap.attencion .wrapcontent .content span:before {content: '・'; position: absolute; top: 0; left: -15px;} .brand-concept .top-content {text-align: center;} .brand-concept .top-content p {margin-bottom: 30px; margin-top: 30px; /*font-weight: bold;*/} .brand-concept .top-content p.about-text {font-weight: normal; font-size: 13px; font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important;} .brand-concept .top-content h1 {font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} .brand-concept .top-content h2 {border-bottom: none; /*font-weight: bold;*/ font-size: 32px; margin-bottom: 100px;} .brand-concept .top-content h2.title-con {border-bottom: none !important;} .brand-concept .top-content h2 {font-size: 24px; margin-bottom: 60px; font-family:"游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;} .brand-concept .top-content .list-content {width: 100%; display: flex; justify-content: space-between;} .brand-concept .top-content .list-content .list {width: 48%; display: flex; justify-content: space-between;} .brand-concept .top-content .list-content .list .photo {width: 30%; height: 200px; background: #c2c2c2; margin-top: 0;} .brand-concept .top-content .list-content .txt {width: 65%; text-align: left; font-size: 14px; line-height: 1.5em;} .brand-concept .top-content .list-content .txt h3 {font-size: 16px; /*font-weight: bold;*/ margin-bottom: 10px;} .brand-concept .top-content .list-content .txt {} .brand-concept .top-content .company-list {width: 80%; margin: auto; text-align: left;} .brand-concept .top-content .company-list li {padding-bottom: 5px; margin-bottom: 30px; border-bottom: 1px solid #efefef;} .brand-concept .top-content .company-list li img {width: 70px; height: auto;} .brand-concept .top-content .company-list li span {min-width: 250px; display: inline-block; /*font-weight: bold;*/} .about .top-content h2 {border-bottom: 1px solid #efefef; font-size: 24px; margin-bottom: 60px; font-family:"游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;} .about .top-content .list-content {width: 100%; display: flex; justify-content: space-between;} .about .top-content .list-content .list {width: 48%; display: flex; justify-content: space-between;} .about .top-content .list-content .list .photo {width: 30%; height: 200px; background: #c2c2c2; margin-top: 0;} .about .top-content .list-content .txt {width: 65%; text-align: left; font-size: 14px; line-height: 1.5em;} .about .top-content .list-content .txt h3 {font-size: 16px; /*font-weight: bold;*/ margin-bottom: 10px;} .about .top-content .list-content .txt {} .about .top-content .company-list {width: 80%; margin: auto; text-align: left;} .about .top-content .company-list li {padding-bottom: 5px; margin-bottom: 30px; border-bottom: 1px solid #efefef;} .about .top-content .company-list li img {width: 70px; height: auto;} .about .top-content .company-list li span {min-width: 250px; display: inline-block; /*font-weight: bold;*/} .about .top-content .content-text {text-align: center;} #about .pages,#brand-concept .pages {border-bottom: none;} #about .title-content .content h1 {/*font-weight: bold;*/ color: #fff; font-family:"游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; position: absolute; font-size: 20px; line-height: 1.2em; top: 50%; width: 100%; left: 0%; text-align: center;} #about .title-content .content h1 span {line-height: 1.5em; } #spec_care .page-wrap .wrap-content .content .side-content {display: none;} #after_care .page-wrap .wrap-content .content .side-content {display: none;} #after_care #wrap.attencion {width: 900px;} #after_care #wrap .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #after_care #wrap .top-content h1 span {font-size: 12px; display: block; margin-top: 10px;} #after_care .wrapcontent .content {margin-bottom: 60px; line-height: 2em; font-size: 13px;} #after_care .wrapcontent .content a.contact-link {text-decoration: underline; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #after_care .wrapcontent .content a.contact-link:hover {opacity: 0.6;} #after_care .wrapcontent .content h3 {font-size: 14px; margin-bottom: 10px; /*font-weight: bold;*/} #after_care .wrapcontent .content span.text01 {font-size: 12px;} #spec_care #wrap.attencion {width: 900px;} #spec_care #wrap .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #spec_care #wrap .top-content h1 span {font-size: 12px; display: block; margin-top: 10px;} #spec_care .wrapcontent .content {margin-bottom: 60px; line-height: 2em; font-size: 13px;} #spec_care .wrapcontent .content a.contact-link {text-decoration: underline; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #spec_care .wrapcontent .content a.contact-link:hover {opacity: 0.6;} #spec_care .wrapcontent .content h3 {font-size: 14px; margin-bottom: 10px; /*font-weight: bold;*/} #spec_care .wrapcontent .content span.text01 {font-size: 12px;} .title-content {height: 600px; width: 100%; max-width: 1600px; margin: auto; position: relative; background: url(/common/images/header/slide03.jpg) no-repeat top center;} .about .title-content {background: url(/common/images/first/AboutUs.jpg) no-repeat top center;} .brand-concept .title-content {background: url(/common/images/first/BrandConcept.jpg) no-repeat top center;} .product_page .title-content {background: url(/common/images/first/OurCollections.jpg) no-repeat top center;} .title-content .content {height: 600px; width: 90%; max-width: 1200px; margin: auto; position: relative;} .title-content .content h1 { /* font-weight: bold; */ color: #fff; font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; position: absolute; font-size: 20px; line-height: 1.2em; top: 50%; width: 100%; left: 0%; text-align: center; } .slick-slider {position: relative;} .slick-prev {left: -30px; transform: scale(1.0, 2); color: #615d59; font-size: 21px; position: absolute; top: 50%;} .slick-next {right: -30px; transform: scale(1.0, 2); color: #615d59; font-size: 21px; position: absolute; top: 50%;} .ec-shelfGrid .ec-shelfGrid__item-image {height: 280px !important;} #wrap .top-content .slick-slide {margin: 0 5px; text-align: center;} .ec-sliderRole p {margin-top: 5px; font-size: 13px; text-align: center;} .ec-sliderRole p span {margin-right: 20px;} .ec-sliderRole img {width: 95%; margin: auto; height: auto;} #wrap .top-content .slick-slide img {width: 100%; margin: auto; height: auto;} .slick-dots {display: none !important;} /* 最重要項目 */ #nav_mypage_sln_edit_card {display: none;} .rssimg {display: none!important;} .news_and_blog-area-list {} #wrap .top-content .news_and_blog-area-list {width: 46%;} #wrap .top-content .news_and_blog-area-list h2 {border-bottom: none; text-align: left; color: #615d59; font-size: 20px; margin-bottom: 30px;} #wrap .top-content .news_and_blog-area-list .page-header {padding-bottom: 0; margin: 0px 0 0px; border-bottom: none;} #wrap .top-content .news_and_blog-area-list .rsswrapper {margin-bottom: 30px; padding-bottom: 5px; border-bottom: 1px solid #efefef; font-size: 13px;} #wrap .top-content .news_and_blog-area-list .rsswrapper span {display: inline-block; width: 78px; line-height: 1.5em;} #wrap .top-content .news_and_blog-area-list p.more-btn {font-size: 15px; text-align: center;} .ec-cartNaviWrap {display: none;} .ec-newsRole .ec-newsRole__newsCloseBtn {display: none;} .ec-newsRole .ec-newsRole__news {border: none !important; padding: 20px 0;} .ec-secHeading {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; /* font-weight: bold; */ font-size: 20px; margin-bottom: 0px; /* padding-bottom: 10px; */ /* border-bottom: 1px solid #efefef; */ /* text-align: center; */ color: #615d59;} .ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {border-bottom: 1px solid #efefef; margin-top: 0px; padding-bottom: 5px;} .ec-newsRole .ec-newsRole__newsItem:last-of-type {border-bottom: 1px solid #efefef; margin-top: 0px; padding-bottom: 5px;} .ec-newsRole .ec-newsRole__newsTitle {font-weight: normal; color: #333;} .title-content .content h1.e-shop {display: block;} .product_page .title-content.categoryid11 .content h1.e-shop {display: none;} .product_page .title-content.categoryid12 .content h1.e-shop {display: none;} .product_page .title-content.categoryid13 .content h1.e-shop {display: none;} .product_page .title-content.categoryid15 .content h1.e-shop {display: none;} .product_page .title-content.categoryid16 .content h1.e-shop {display: none;} .product_page .title-content.categoryid17 .content h1.e-shop {display: none;} .product_page .title-content.categoryid21 .content h1.e-shop {display: none;} .product_page .title-content.categoryid11 {background: url(/common/images/first/GLOSSYcollection.jpg) no-repeat top center;} .product_page .title-content.categoryid12 {background: url(/common/images/first/necklacechapter.jpg) no-repeat top center;} .product_page .title-content.categoryid13 {background: url(/common/images/first/FORTUNEcollection.jpg) no-repeat top right;} .product_page .title-content.categoryid13 .content h1 {color: #333;} .product_page .title-content.categoryid15 {background: url(/common/images/first/GLOSSYcollection.jpg) no-repeat top center;} .product_page .title-content.categoryid16 {background: url(/common/images/first/piercechaapter.jpg) no-repeat top left;} .product_page .title-content.categoryid17 {background: url(/common/images/first/necklacechapter.jpg) no-repeat top center !important;} .product_page .title-content.categoryid21 {background: url(/common/images/first/braceletchapter.jpg) no-repeat top right !important;} /*header .title-area .slider li img {width: 100%; height: auto; display: none;}*/ .ec-shelfGrid { display: -ms-flexbox; display: flex; margin-left: 0; margin-right: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; list-style: none; } .ec-shelfGrid .ec-shelfGrid__item { line-height: 1.4; } .ec-shelfGrid .ec-shelfGrid__item-image { height: 150px; margin-bottom: 10px; text-align: center; } .ec-shelfGrid .ec-shelfGrid__item { gap: 16px; } .ec-shelfGrid .ec-shelfGrid__item-image {height: 85% !important;} header .title-area p.header-fadein {opacity: 0; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;} header .title-area h2 {opacity: 0; margin-top: 50px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;} header .title-area p.header-fadein:nth-child(1) { -webkit-animation: example 0.5s ease 0.3s 1 forwards; animation: example 0.5s ease 0.3s 1 forwards; } header .title-area p.header-fadein:nth-child(2) { -webkit-animation: example 0.5s ease 0.5s 1 forwards; animation: example 0.5s ease 1.3s 1 forwards; } header .title-area p.header-fadein:nth-child(3) { -webkit-animation: example 0.5s ease 0.7s 1 forwards; animation: example 0.5s ease 2.3s 1 forwards; } header .title-area p.header-fadein:nth-child(4) { -webkit-animation: example 0.5s ease 0.7s 1 forwards; animation: example 0.5s ease 3.3s 1 forwards; } header .title-area h2 { -webkit-animation: example 0.5s ease 0.9s 1 forwards; animation: example 0.5s ease 5.0s 1 forwards; } @-webkit-keyframes example { 100% { opacity: 1; } } @keyframes example { 100% { opacity: 1; } } .popup-link-btn { display: block; /* display: none; */ position: fixed; bottom: 40px; right: 3%; width: 120px; z-index: 9999; } .popup-link-btn a {display: block;} .popup-link-btn img {width: 100%; height: auto; transition: all 0.3s ease-out;} .popup-link-btn:hover img {opacity: 0.7; transition: all 0.3s ease-out;} .popup-link-btn02 { display: block; /* display: none; */ position: fixed; bottom: 180px; right: 3%; width: 120px; z-index: 9999; } .popup-link-btn02 a {display: block;} .popup-link-btn02 img {width: 100%; height: auto; transition: all 0.3s ease-out;} .popup-link-btn02:hover img {opacity: 0.7; transition: all 0.3s ease-out;} /* =Reset -------------------------------------------------------------- */ body { line-height: 1; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-rendering: geometricPrecision; } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; vertical-align: baseline; white-space: normal; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } @charset "UTF-8"; /*スマホ用 ----------------------------------*/ /*@media only screen and (max-width: 1035px) { .FEATURE-box .text {width: 100%;} .FEATURE-box .right {width: 100%;} .FEATURE-box .left {width: 100%;} }*/ @media only screen and (max-width: 1000px) { .sp-zone {display: block;} .pc-zone {display: none;} .ssp-zone {display: block;} .cart.sp-zone {display: none;} .popup-link-btn .pc-zone {/*display: none;*/ display: block;} .popup-link-btn .sp-zone {display: none;} .cart.sp-zone,.sp-groval {display: none;} header .title-area .slider li {} header .title-area .slider .sp-zone {display: none;} header .title-area .slider .pc-zone {display: block;} .ec-shelfGrid .ec-shelfGrid__item {width: 50% !important;} #wrap {width: 100%; margin: auto;} #wrap.top {margin: -60px auto auto auto;} #wrap .top-content h2 {} #wrap .top-content h2.title-con img {width: 80%;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt {float: none; width: 74%; padding-left: 26%; margin-bottom: 5px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt span {margin-left: 0;} #wrap .top-content .mw_wp_form.mw_wp_form_input dd {float: none; width: 100%;} #wrap .top-content .mw_wp_form.mw_wp_form_input dd input {padding: 2%; width: 96%;} .mw_wp_form.mw_wp_form_input button, .mw_wp_form.mw_wp_form_input input, .mw_wp_form.mw_wp_form_input optgroup, .mw_wp_form.mw_wp_form_input select, .mw_wp_form.mw_wp_form_input textarea {width: 100%;} .contact-btn {bottom: 0 !important; top: auto; width: 100%; left: 0; border: none; border-top: 1px solid #555;} .mw_wp_form.mw_wp_form_input textarea {padding: 2%; width: 96%;} .contact-btn:hover {background: #333; color: #fff;} #wrap .top-content.contact-content {width: 92%; margin: auto auto 100px auto;} .fadeinout {opacity: 1 !important; transform: translate(0, 0px);} .fadeinout.scrollin {opacity: 1 !important; transform: translate(0, 0px);} header #wrap {width: 94% !important;} header #wrap .content h1 {margin: 25px auto 40px auto;} header #wrap .left {float: none; width: 100%; text-align: center;} header #wrap .left .title-sub-text {font-size: 3vw;} header #wrap.page .page-title {width: 80%; margin: auto;} header #wrap.page .page-title img {width: 100%; height: auto; margin: auto;} header #wrap {margin-top: 15px;} header #wrap h1 {font-size: 15px; margin-bottom:0;} header #wrap h1 span {font-size: 13px;} header #wrap .left .title-sub-text { font-size: 10px; } header #wrap .title-area {position: relative;} header #wrap .title-area:before { content: ''; display: block; padding-top: 20%; } header #wrap .title-area:after { content: ''; display: block; padding-bottom: 20%; } footer .footer-content .list:last-child {width: 65%;} footer .footer-content .list h1 {width: 70%;} /* footer #wrap p {font-size: 13px;} footer #wrap p.txt01 {font-size: 11px;} footer #wrap h1 {width: 30%; margin: auto auto 30px auto;} footer #wrap h1 img {width: 100%; height: auto;} footer #wrap .copy {font-size: 18px;} */ .ec-productRole .ec-productRole__title .ec-headingTitle {margin-top: 30px; display: inline-block;} #wrap .top-content .content-area.important {opacity: 1 !important;} .product_page .page-wrap .wrap-content {width: 100%; margin: auto;} .ec-grid2 .ec-grid2__cell {width: 100%;} .ec-productRole .ec-productRole__profile {width: 100%;} #product.page-wrap .single .content .single-content {margin-top: 50px;} #brand-concept #wrap .top-content .list-content .list {display: block;} /*btn-navi*/ .Btn-navi {left: 15px; top: 30px; position: fixed; border: 2px solid #eee; border-radius: 5px; width: 40px; background:#fff; display:block; line-height:1em; z-index:9999; transition: .3s;} .Btn-navi .name {font-weight: bold; position: relative; bottom: -25px; vertical-align:middle; text-align:center; color:#333; font-size:7.3px; line-height: 1em; } /*.Btn-navi .menuBtn {display: inline-block; position: relative; width: 28px; height:30px;}*/ .Btn-navi .menuBtn { display: block; position: relative; width: 37px; height: 40px; padding-top: 5px; } .menu-icon {display: block; position: absolute; top: 36%; left: 45%; width: 26px; height: 2px; margin: -1px 0 0 -12px; background: #333; transition: .2s;} .menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 75%; left: 0; width: 26px; height: 2px; background: #333; transition: .3s;} .menu-icon:before {margin-top: -9px;} .menu-icon:after {margin-top: 5px;} .menuBtn:hover .menu-icon:before {margin-top: -10px;} .menuBtn:hover .menu-icon:after {margin-top: 6px;} .Btn-navi.close .name { color:#ffffff; overflow: hidden; left: 0px; width: 100%; font-size: 7.3px; line-height: 10px; text-align: center; font-weight: bold; height: 8px;} .Btn-navi.close .name:before {display: block; content: 'CLOSE'; overflow: hidden; margin-right: 20px: } .Btn-navi.close .menu-icon:before,.Btn-navi.close .menu-icon:after {background: #fff;} .Btn-navi.close .menuBtn .menu-icon {background: transparent;} .Btn-navi.close .menuBtn .menu-icon:before, .Btn-navi.close .menuBtn .menu-icon:after {margin-top: 0;} .Btn-navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} .Btn-navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);} #mainhead .Btn-navi{ position: absolute; left:5px; top:5px; } #mainhead .Btn-navi.close { opacity: 0; display: none;} #fixBtn-navi {position: fixed; width: auto; bottom: 20px; right:15px;} #fixBtn-navi.Btn-navi .menuBtn { display: block; background-color:#a5041b; border-radius: 10px; padding:10px 0px 0px;} #fixBtn-navi.Btn-navi .menuBtn .menu-icon {margin-top: -6px;} #fixBtn-navi .menu-icon,#fixBtn-navi .menu-icon:before,#fixBtn-navi .menu-icon:after {background-color: #ffffff;} #fixBtn-navi .menu-icon:before{margin-top: -7px;} #fixBtn-navi .menu-icon:after {margin-top: 5px;} #fixBtn-navi.close .menu-icon:before,#fixBtn-navi.close .menu-icon:after {margin-top: 0;} #fixBtn-navi.close .menu-icon {background: transparent;} #fixBtn-navi .name { color: #ffffff; display: block; position: relative; left:0px; bottom: -17px;} #fixBtn-navi .name:before { display: inline; content: 'MENU';} #fixBtn-navi.close .name:before { display: inline; content: 'CLOSE';} #fixBtn-navi.close .name { color: #ffffff;} #cavor.Btn-navi {width: 100%; height: 100%; position: fixed; top:0px; left: -100%; transition:0s; z-index: 999;} #cavor.Btn-navi .menuBtn {display:block; width: 100%; height: 100%; background:rgba(255,255,255,0.6); } #cavor.close { left: 0px; } .navi { background-color: #fff; /*メニュー背景色*/ box-sizing: border-box; height: 100%; padding: 10px 40px; /*メニュー内部上下左右余白*/ position: fixed; left: -100%; /*メニュー横幅①と合わせる*/ top: 0; transition: .5s; /*0.3s は変化するのにかかる時間*/ width: 100%; /*メニュー横幅①*/ z-index: 1000; } .Btn-navi:hover + .navi-background { opacity: 0.5; /*黒背景部分透過度*/ z-index: 999; } /*.navi-background {width: 100%; height: 100%; position: fixed; top: 0px; left: 0%; transition: 0s; z-index: 999;}*/ .navi-background a.background-btn{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.6);} .navi.open { left: 0; display: block;} .navi-background {height: calc(100vh); z-index: 999; display: none; position: fixed; width: 100%; top: 0; left:0; } .navi-background.open {display: block; background: rgba(255,255,255,0.6); } .navi.open {opacity: 1; width: 80%; margin-top: 0px; padding-bottom: 10px; padding-top: 40px; padding-left: 10px; padding-right: 10px; text-align: left; background: #efefef; overflow-y: scroll;} .navi.open ul li {padding: 0; font-weight: normal; color: #4d4d4d; line-height: 2em; border: none; font-size: 15px; padding-right: 10px; margin: 0px 0 10px 5px;} .navi.open ul li a {padding: 10px 0; display: block; display: inline;} .navi.open .sub-area02 li, .navi.open .sub-area li {margin: 0; position: relative; padding-left: 10px;} .Btn-navi_first {padding: 5px; background: #816a29; width: 40px; display:none; line-height:1em; z-index:9999; transition: .3s;} .Btn-navi_first .name { vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; } .Btn-navi_first .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;} /*footer .navi ul {display: block; padding: 30px 0px;}*/ footer .navi ul { font-size: 12px; height: 280px; overflow: auto; /* background-color: #FFF; */ padding: 10px 10px; margin-bottom: 15px; /* border: 1px solid #CCC; */ display: block; padding: 30px 0px; } /* #wrap .top-content .news_and_blog-area-list {width: 100%; margin-bottom: 100px;} #wrap .top-content .news_and_blog-area-list:last-child {width: 100%; margin-bottom: -100px;} #wrap .top-content .news_and_blog-area-list .rsswrapper span {width: 100%; display: block; line-height: 2em;} #wrap .top-content .news_and_blog-area-list .rsswrapper h3 {line-height: 2em;} */ #wrap .top-content .news_and_blog-area-list .rsswrapper span {width: 100%; display: block; line-height: 2em;} /* header */ .navi.open .sub-area02,.navi.open .sub-area {margin-left: 20px;} .navi.open .sub-area02 li:before,.navi.open .sub-area li:before {position: absolute; content: '-'; left: 0; display: inline-block;} header #head .wrap {width: 100%; padding-top: 0; text-align: center;} .sasicco-afullo {display: none; width: 25%; margin: 0 20px; /* margin: auto; */} .sasicco-afullo a {position: initial; display: inline; background: #fff;} header #head .wrap h1 {position: initial; display: inline-block; margin: 0 20px 20px 20px; width: 100px;} header nav.is-fixed #head .wrap {display: none; position: relative;} header nav.is-fixed .all-wrap-area {margin-top: 0px;} header nav.is-fixed #head {margin-top: 150px;} .sp-zone .bx-wrapper .sp-bxslider li {max-width: 100%; width: 100% !important;} .sp-zone .bx-wrapper .sp-bxslider li img {max-width: 100%; width: 100% !important;} header .pc-zone li .slidecontent {left: 5%; transform: translate(0%,-50%);} header .pc-zone li .slidecontent p {font-size: 18px;} header #head .wrap .menu ul {display: none;} /*header .title-area .slider,header .title-area .slider li {height: 450px;}*/ header .title-area .slider, header .title-area .slider li {width: 100% !important; height: auto;} header .title-area .slider li {background: none !important; height: auto !important;} header .title-area .sp-zone {background: none !important; display: none;} header .title-area .slider li img {display: block; width: auto; max-width: 100%; height: auto;} header .first-text-area {height: 100% !important;} header .title-area .first-text {top: 20%; width: 30%;} header .title-area .first-text p {font-size: 1vw;} header .title-area .first-text h2 {width: 60%;} header .title-area .first-text img {width: 100%; height: auto;} .top-content .items-list {justify-content: center;} .take-on header #wrap .content .menu-area {display: none;} header #wrap .content .tel .cart {left: -32px;} .sp-groval {margin-bottom: 0px; width: 100%;} .sp-groval ul.menu {/*padding-top: 20px;*/display: none;} .sp-groval li {width: 25%; text-align: center; float: left; padding-top: 10px;} .sp-groval li:nth-child(odd) {} .sp-groval li:nth-child(even) {width: 25%;} .sp-groval li a {padding: 10px 0; display: block; font-size: 13px;} /* footer */ footer .footer-content {/*display: block;*/} footer .footer-content .list ul {/*display: none;*/} footer .footer-content .list:first-child {/*width: 100%;*/width: 30%;} #wrap .top-content {width: 90%; margin: auto;} .top-content .items-list li h3.title {margin: auto; top: 50%;} .top-content .items-list li {width: 43%;} .top-content .news_and_blog-area {/*display: block; width: 100%;*/} .top-content .news_and_blog-area ul {width: 100%; margin-bottom: 100px;} .top-content .news_and_blog-area ul li span {display: block; margin-bottom: 0px;} #blog.page-wrap .title-content {height: auto;} #blog .title-content .content h1 {top: 25%;} #blog.page-wrap .title-content .content {height: auto !important;} #news.page-wrap .title-content {height: auto;} #news .title-content .content h1 {top: 25%;} #news.page-wrap .title-content .content {height: auto !important;} #blog #wrap.page-content h1, #news #wrap.page-content h1 {display: none;} /* product */ #page_product_list .page-wrap .wrap-content h2 {display: none;} .page-wrap .title-content {height: auto; background-size: 100% !important;} .page-wrap .wrap-content .content {margin-bottom: 100px;} .page-wrap .wrap-content .content .side-content {display: none !important;} .page-wrap .wrap-content .content .main-content {display: block; width: 100%; float: none;} .page-wrap .wrap-content .content .main-content .cat-tab {margin-bottom: 10px;display: flex; width: 95%; flex-wrap: wrap; justify-content: flex-start;} .page-wrap .wrap-content .content .main-content .cat-tab li {width: 48%; margin-left: 2%; border-right: none; border-bottom: 1px solid #efefef; padding-bottom: 0px;} #product.page-wrap .wrap-content .content ul.list {width: 105%;} #product.page-wrap .wrap-content .content ul.list li {width: 45%;} #product.page-wrap .wrap-content .content ul.list li:nth-child(3n) {margin-right: 5%;} #product.page-wrap .single {margin-top: 0px;} #product.page-wrap .single .content .single-content {display: block;} #product.page-wrap .single .content .single-content .photo-area {width: 100%; margin-bottom: 30px;} #product.page-wrap .single .content .single-content .text-area {width: 100%;} /* #product.page-wrap .single .content .single-content .photo-area .bx-pager {justify-content: center;} #product.page-wrap .single .content .single-content .photo-area .bx-pager li {width: auto; margin: 5px;} #product.page-wrap .single .content .single-content .photo-area .bx-pager a {width: 11px; height: 11px; text-align: center; display: block; background-color: #d0d0d0; border-radius: 50%; text-indent: 100%; overflow: hidden;} #product.page-wrap .single .content .single-content .photo-area .bx-pager a {} #product.page-wrap .single .content .single-content .photo-area .bx-pager a.active {background: #333;} #product.page-wrap .single .content .single-content .photo-area .bx-pager a img {display: none;} */ #product.page-wrap .single .content .single-content .photo-area .bx-pager li {width: 8%;} #brand-concept #wrap .top-content {margin-top: 30px;} #brand-concept #wrap .top-content p, #about .fadein.scrollin:first-child {margin-top: 0;} /* news */ #wrap.news {margin: 0 5%; width: 90%;} #wrap.news ul li span {display: block;} #wrap.page-content .single-content h1 {line-height: 1.7em;} #wrap.page-content h1 {font-size: 20px; margin-bottom: 60px;} #spec_care #wrap .top-content h1 span {line-height: 1em;} #wrap .top-content p img {max-width: 100%; height: auto; font-size: 13px;} #wrap .top-content p {/*margin-bottom: 30px; margin-top: 30px; font-weight: bold;*/ font-size: 11px; line-height: 1.9em;} .single-content .content .ymd {text-align: left;} /* about */ #wrap .top-content {margin-bottom: 100px; margin-top: 60px;} .about .top-content .company-list li span {} .about #wrap .top-content h2 {margin-bottom: 30px; font-size: 18px;} .about #wrap .top-content .list-content {display: block;} .about #wrap .top-content .list-content .list {display: block; width: 100%; margin-bottom: 30px;} .about #wrap .top-content .list-content .list .photo {width: 100%; margin-bottom: 10px;} .about #wrap .top-content .list-content .txt {width: 100%;} .about #wrap .top-content .company-list li span {display: block;} .about #wrap .top-content .company-list {width: 100%;} #about .title-content .content h1 {font-size: 20px;} #product .title-content .content h1,#about .title-content .content h1,#brand-concept .title-content .content h1 {top: 43%;} #earth-ring .title-content .content h1,#imperium-necklace .title-content .content h1,#brand-concept .title-content .content h1 {top: 43%;} .page-wrap.collections .wrap-content h2,.page-wrap.collections .wrap-content h2,#product.page-wrap .wrap-content h2 /*{display: none;}*/ .ec-productRole .ec-productRole__title .ec-headingTitle {margin-top: 30px !important;} .page-wrap.collections .wrap-content .content .main-content,.page-wrap.collections .wrap-content .content .main-content,#product.page-wrap .wrap-content .content .main-content {padding-top: 0;} /* お問い合わせ */ #wrap .top-content .mw_wp_form.mw_wp_form_input dt {margin-bottom: 15px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt span {font-size: 10px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt {padding-left: 18%;} #wrap .top-content .mw_wp_form.mw_wp_form_input dl:nth-child(4) dt {padding-left: 0;} .page-wrap.items01 .title-content .items01 {display: block;} .page-wrap.items01 .title-content .items02 {display: none;} .page-wrap.items01 .title-content .items03 {display: none;} .page-wrap.items01 .title-content .items04 {display: none;} .page-wrap.items02 .title-content .items01 {display: none;} .page-wrap.items02 .title-content .items02 {display: block;} .page-wrap.items02 .title-content .items03 {display: none;} .page-wrap.items02 .title-content .items04 {display: none;} .page-wrap.items03 .title-content .items01 {display: none;} .page-wrap.items03 .title-content .items02 {display: none;} .page-wrap.items03 .title-content .items03 {display: block;} .page-wrap.items03 .title-content .items04 {display: none;} .page-wrap.items04 .title-content .items01 {display: none;} .page-wrap.items04 .title-content .items02 {display: none;} .page-wrap.items04 .title-content .items03 {display: none;} .page-wrap.items04 .title-content .items04 {display: block;} .page-wrap.grossy .title-content .collections01 {display: block;} .page-wrap.grossy .title-content .collections02 {display: none;} .page-wrap.grossy .title-content .collections03 {display: none;} .page-wrap.graceful .title-content .collections01 {display: none;} .page-wrap.graceful .title-content .collections02 {display: block;} .page-wrap.graceful .title-content .collections03 {display: none;} .page-wrap.frotune .title-content .collections01 {display: none;} .page-wrap.frotune .title-content .collections02 {display: none;} .page-wrap.frotune .title-content .collections03 {display: block;} #spec_care #wrap.attencion {width: 900px;} #spec_care #wrap .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #spec_care #wrap .top-content h1 span {font-size: 12px; display: block; margin-top: 10px;} #spec_care .wrapcontent .content {margin-bottom: 60px; line-height: 2em; font-size: 13px;} #spec_care .wrapcontent .content a.contact-link {text-decoration: underline; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #spec_care .wrapcontent .content a.contact-link:hover {opacity: 0.6;} #spec_care .wrapcontent .content h3 {font-size: 14px; margin-bottom: 10px; /*font-weight: bold;*/} #spec_care .wrapcontent .content span.text01 {font-size: 12px;} #after_care #wrap.attencion {width: 900px;} #after_care #wrap .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #after_care #wrap .top-content h1 span {font-size: 12px; display: block; margin-top: 10px;} #after_care .wrapcontent .content {margin-bottom: 60px; line-height: 2em; font-size: 13px;} #after_care .wrapcontent .content a.contact-link {text-decoration: underline; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #after_care .wrapcontent .content a.contact-link:hover {opacity: 0.6;} #after_care .wrapcontent .content h3 {font-size: 14px; margin-bottom: 10px; /*font-weight: bold;*/} #after_care .wrapcontent .content span.text01 {font-size: 12px;} #attention #wrap.attencion h1,#spec_care #wrap.attencion h1,#after_care #wrap.attencion h1 {line-height: 1.5em;} #attention #wrap.attencion,#spec_care #wrap.attencion,#after_care #wrap.attencion {width: 90%; margin: auto;} .title-content .content h1 {font-size: 14px !important;} header #wrap .content .tel {/*display: none;*/ top: 20px;} header #wrap .content .menu {/*display: none;*/} } #wrap .top-content .content-area.top-recommended .content { margin-bottom: 180px; } .slick-initialized .slick-slide img { width: 100%; height: auto; } /*-----------------------*/ /* max-width: 640px */ /*-----------------------*/ @media only screen and (max-width: 700px) { .cart.sp-zone {display: block;} .popup-link-btn .sp-zone { /*display: none;*/ display: block; width: 49.5%; position: fixed; text-align: center; right: 0; padding: 0; bottom: -2px; border-radius: 10px 10px 0 0; padding: 10px 0; font-size: 12px; font-weight: bold; line-height: 1.2em; background: #92918f; color: #fff; border: 1px solid #fff; } .popup-link-btn02 .sp-zone { /*display: none;*/ display: block; width: 49.5%; position: fixed; text-align: center; left: 0; padding: 0; bottom: -2px; border-radius: 10px 10px 0 0; padding: 10px 0; font-size: 12px; font-weight: bold; line-height: 1.2em; background: #92918f; color: #fff; border: 1px solid #fff; } .popup-link-btn .pc-zone {display: none;} .popup-link-btn .sp-zone {/*display: none;*/ display: block;} .cart.sp-zone,.sp-groval {display: block;} #wrap .top-content-first {margin-top: -100px !important;} header #wrap { position: fixed; top: 0; z-index: 999; left: 0; margin: 0; margin-top: 0 !important; padding-top: 0px; width: 100% !important; background: #fff; border-bottom: 1px solid #efefef; } header .title-zone { margin-top: 65px; } .cart.sp-zone { right: 5%; left: auto; width: 30px; top: 2.4%; z-index: 999; display: block; position: fixed; } .cart.sp-zone img {width: 100%; height: auto;} .ec-layoutRole__contents {margin-top: 0px;} .Btn-navi.close {left: 65%; background: none; } .Btn-navi.close .name {display: none;} .sp-zone {display: block;} .pc-zone {display: none;} .ssp-zone {display: block;} header .title-area .slider li {} header .title-area .slider .sp-zone {display: none;} header .title-area .slider .pc-zone {display: block;} header .title-zone .first-text-area {height: 600px;} header .title-area .sp-zone {display: block; background: auto;} .ec-shelfGrid .ec-shelfGrid__item {width: 50% !important;} .front_page {/*margin-bottom: 100px;*/} .sp-groval ul.menu {margin-top: 0;} .front_page .sp-groval ul.menu {display: block;} #wrap {width: 100%; margin: auto;} #wrap.top {margin: -60px auto auto auto;} #wrap .top-content h2 {} #wrap .top-content h2.title-con img {width: 80%;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt {float: none; width: 74%; padding-left: 26%; margin-bottom: 5px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt span {margin-left: 0;} #wrap .top-content .mw_wp_form.mw_wp_form_input dd {float: none; width: 100%;} #wrap .top-content .mw_wp_form.mw_wp_form_input dd input {padding: 2%; width: 96%;} .mw_wp_form.mw_wp_form_input button, .mw_wp_form.mw_wp_form_input input, .mw_wp_form.mw_wp_form_input optgroup, .mw_wp_form.mw_wp_form_input select, .mw_wp_form.mw_wp_form_input textarea {width: 100%;} .contact-btn {bottom: 0 !important; top: auto; width: 100%; left: 0; border: none; border-top: 1px solid #555;} .mw_wp_form.mw_wp_form_input textarea {padding: 2%; width: 96%;} .contact-btn:hover {background: #333; color: #fff;} #wrap .top-content.contact-content {width: 92%; margin: auto auto 100px auto;} .fadeinout {opacity: 1 !important; transform: translate(0, 0px);} .fadeinout.scrollin {opacity: 1 !important; transform: translate(0, 0px);} header #wrap {} header #wrap .content h1 {margin: 25px auto 20px auto;} header #wrap .left {float: none; width: 100%; text-align: center;} header #wrap .left .title-sub-text {font-size: 3vw;} header #wrap.page .page-title {width: 80%; margin: auto;} header #wrap.page .page-title img {width: 100%; height: auto; margin: auto;} header #wrap {margin-top: 15px;} header #wrap h1 {font-size: 15px; margin-bottom:0;} header #wrap h1 span {font-size: 13px;} header #wrap .left .title-sub-text { font-size: 10px; } header #wrap .title-area {position: relative;} header #wrap .title-area:before { content: ''; display: block; padding-top: 20%; } header #wrap .title-area:after { content: ''; display: block; padding-bottom: 20%; } footer #wrap p {font-size: 13px;} footer #wrap p.txt01 {font-size: 11px;} footer #wrap h1 {width: 150px; margin: auto auto 30px auto;} footer #wrap h1 img {width: 100%; height: auto;} footer #wrap .copy {font-size: 18px;} .ec-layoutRole__contents {margin-bottom: 0px; margin-top: 0;} #wrap .top-content .content-area.top-recommended .content { margin-bottom: 100px; } .ec-productRole .ec-productRole__title .ec-headingTitle {margin-top: 30px; display: inline-block;} #wrap .top-content .content-area.important {opacity: 1 !important;} .product_page .page-wrap .wrap-content {width: 100%; margin: auto;} .ec-grid2 .ec-grid2__cell {width: 100%;} .ec-productRole .ec-productRole__profile {width: 100%;} #product.page-wrap .single .content .single-content {margin-top: 0px;} #brand-concept #wrap .top-content .list-content .list {display: block;} /*btn-navi*/ .Btn-navi {right: 15px; top: 1.6%; position: fixed; border: 2px solid #eee; border-radius: 5px; width: 40px; background:#fff; display:block; line-height:1em; z-index:9999; transition: .3s;} .Btn-navi .name {font-weight: bold; position: relative; bottom: -25px; vertical-align:middle; text-align:center; color:#333; font-size:7.3px; line-height: 1em; } /*.Btn-navi .menuBtn {display: inline-block; position: relative; width: 28px; height:30px;}*/ .Btn-navi .menuBtn { display: block; position: relative; width: 37px; height: 40px; padding-top: 5px; } .menu-icon {display: block; position: absolute; top: 36%; left: 45%; width: 26px; height: 2px; margin: -1px 0 0 -12px; background: #333; transition: .2s;} .menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 75%; left: 0; width: 26px; height: 2px; background: #333; transition: .3s;} .menu-icon:before {margin-top: -9px;} .menu-icon:after {margin-top: 5px;} .menuBtn:hover .menu-icon:before {margin-top: -10px;} .menuBtn:hover .menu-icon:after {margin-top: 6px;} .Btn-navi.close .name { color:#ffffff; overflow: hidden; left: 0px; width: 100%; font-size: 7.3px; line-height: 10px; text-align: center; font-weight: bold; height: 8px;} .Btn-navi.close .name:before {display: block; content: 'CLOSE'; overflow: hidden; margin-right: 20px: } .Btn-navi.close .menu-icon:before,.Btn-navi.close .menu-icon:after {background: #333;} .Btn-navi.close .menuBtn .menu-icon {background: transparent;} .Btn-navi.close .menuBtn .menu-icon:before, .Btn-navi.close .menuBtn .menu-icon:after {margin-top: 0;} .Btn-navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} .Btn-navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);} #mainhead .Btn-navi{ position: absolute; left:5px; top:5px; } #mainhead .Btn-navi.close { opacity: 0; display: none;} #fixBtn-navi {position: fixed; width: auto; bottom: 20px; right:15px;} #fixBtn-navi.Btn-navi .menuBtn { display: block; background-color:#a5041b; border-radius: 10px; padding:10px 0px 0px;} #fixBtn-navi.Btn-navi .menuBtn .menu-icon {margin-top: -6px;} #fixBtn-navi .menu-icon,#fixBtn-navi .menu-icon:before,#fixBtn-navi .menu-icon:after {background-color: #ffffff;} #fixBtn-navi .menu-icon:before{margin-top: -7px;} #fixBtn-navi .menu-icon:after {margin-top: 5px;} #fixBtn-navi.close .menu-icon:before,#fixBtn-navi.close .menu-icon:after {margin-top: 0;} #fixBtn-navi.close .menu-icon {background: transparent;} #fixBtn-navi .name { color: #ffffff; display: block; position: relative; left:0px; bottom: -17px;} #fixBtn-navi .name:before { display: inline; content: 'MENU';} #fixBtn-navi.close .name:before { display: inline; content: 'CLOSE';} #fixBtn-navi.close .name { color: #ffffff;} #cavor.Btn-navi {width: 100%; height: 100%; position: fixed; top:0px; left: -100%; transition:0s; z-index: 999;} #cavor.Btn-navi .menuBtn {display:block; width: 100%; height: 100%; background:rgba(255,255,255,0.6); } #cavor.close { left: 0px; } .navi { background-color: #fff; /*メニュー背景色*/ box-sizing: border-box; height: 100%; padding: 10px 40px; /*メニュー内部上下左右余白*/ position: fixed; left: -100%; /*メニュー横幅①と合わせる*/ top: 0; transition: .5s; /*0.3s は変化するのにかかる時間*/ width: 100%; /*メニュー横幅①*/ z-index: 1000; } .Btn-navi:hover + .navi-background { opacity: 0.5; /*黒背景部分透過度*/ z-index: 999; } /*.navi-background {width: 100%; height: 100%; position: fixed; top: 0px; left: 0%; transition: 0s; z-index: 999;}*/ .navi-background a.background-btn{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.6);} .navi.open { left: 0; display: block;} .navi-background {height: calc(100vh); z-index: 999; display: none; position: fixed; width: 100%; top: 0; left:0; } .navi-background.open {display: block; background: rgba(255,255,255,0.6); } .navi.open {opacity: 1; width: 80%; margin-top: 0px; padding-bottom: 10px; padding-top: 40px; padding-left: 10px; padding-right: 10px; text-align: left; background: #efefef; overflow-y: scroll;} .navi.open ul li {padding: 0; font-weight: normal; color: #4d4d4d; line-height: 2em; border: none; font-size: 15px; padding-right: 10px; margin: 0px 0 5px 5px;} .navi.open ul li a {padding: 10px 0; display: block; display: inline;} .navi.open .sub-area02 li, .navi.open .sub-area li {margin: 0; position: relative; padding-left: 10px;} .Btn-navi_first {padding: 5px; background: #816a29; width: 40px; display:none; line-height:1em; z-index:9999; transition: .3s;} .Btn-navi_first .name { vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; } .Btn-navi_first .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;} /*footer .navi ul {display: block; padding: 30px 0px;}*/ footer .navi ul { font-size: 12px; height: 280px; overflow: auto; /* background-color: #FFF; */ padding: 10px 10px; margin-bottom: 15px; /* border: 1px solid #CCC; */ display: block; padding: 30px 0px; } #wrap .top-content .news_and_blog-area-list {width: 100%; margin-bottom: 60px;} #wrap .top-content .news_and_blog-area-list:last-child {width: 100%; /*margin-bottom: -100px;*/} #wrap .top-content .news_and_blog-area-list .rsswrapper span {width: 100%; display: block; line-height: 2em;} #wrap .top-content .news_and_blog-area-list .rsswrapper h3 {line-height: 2em;} /* header */ .navi.open h2 {font-size: 15px; margin-left: -20px; margin-bottom: 15px;} .navi.open ul {margin-left: 20px;} .navi.open .sub-area02,.navi.open .sub-area {margin-left: 20px;} .navi.open .sub-area02 li:before,.navi.open .sub-area li:before {position: absolute; content: '-'; left: 0; display: inline-block;} header #head .wrap {width: 100%; padding-top: 0; text-align: center;} .sasicco-afullo {display: none; width: 25%; margin: 0 20px; /* margin: auto; */} .sasicco-afullo a {position: initial; display: inline; background: #fff;} header #head .wrap h1 {position: initial; display: inline-block; margin: 0 20px 20px 20px; width: 100px;} header nav.is-fixed #head .wrap {display: none; position: relative;} header nav.is-fixed .all-wrap-area {margin-top: 0px;} header nav.is-fixed #head {margin-top: 150px;} .sp-zone .bx-wrapper .sp-bxslider li {max-width: 100%; width: 100% !important;} .sp-zone .bx-wrapper .sp-bxslider li img {max-width: 100%; width: 100% !important;} header .pc-zone li .slidecontent {left: 5%; transform: translate(0%,-50%);} header .pc-zone li .slidecontent p {font-size: 18px;} header #head .wrap .menu ul {display: none;} header .sp-navi {display: block;} /*header .title-area .slider,header .title-area .slider li {height: 450px;}*/ header .title-area .slider, header .title-area .slider li {width: 100% !important; height: auto;} header .title-area .slider li {background: none !important;} header .first-text-area {height: 400px;} header .title-area .first-text {top: 20px;} .sp-groval {margin-bottom: 0px; width: 100%;} .sp-groval li {width: 25%; text-align: center; float: left; } .sp-groval li:nth-child(odd) {} .sp-groval li:nth-child(even) {width: 25%;} .sp-groval li a {padding: 15px 0; display: block; font-size: 13px;} .footer-sp-groval {margin-top: 150px;} /* footer */ footer .footer-content {display: block;} footer .footer-content .list ul {display: none;} footer .footer-content .list:first-child {width: 100%;} #wrap .top-content {width: 90%; margin: auto;} .top-content .items-list li h3.title {margin: auto; top: 50%;} .top-content .items-list li {width: 43%;} .top-content .news_and_blog-area {display: block; width: 100%;} .top-content .news_and_blog-area ul {width: 100%; margin-bottom: 100px;} .top-content .news_and_blog-area ul li span {display: block; margin-bottom: 0px;} #blog.page-wrap .title-content {height: auto;} #blog .title-content .content h1 {top: 25%;} #blog.page-wrap .title-content .content {height: auto !important;} #news.page-wrap .title-content {height: auto;} #news .title-content .content h1 {top: 25%;} #news.page-wrap .title-content .content {height: auto !important;} #blog #wrap.page-content h1, #news #wrap.page-content h1 {display: none;} /* product */ #page_product_list .page-wrap .wrap-content h2 {display: none;} .page-wrap .title-content {height: auto; background-size: 100% !important;} .page-wrap .wrap-content .content {margin-bottom: 100px;} .page-wrap .wrap-content .content.content-first {margin-bottom: 60px;} .page-wrap .wrap-content .content .side-content {display: none !important;} .page-wrap .wrap-content .content .main-content {display: block; width: 100%; float: none;} .page-wrap .wrap-content .content .main-content .cat-tab {margin-bottom: 10px;display: flex; width: 95%; flex-wrap: wrap; justify-content: flex-start;} .page-wrap .wrap-content .content .main-content .cat-tab li {width: 48%; margin-left: 2%; border-right: none; border-bottom: 1px solid #efefef; padding-bottom: 0px;} #product.page-wrap .wrap-content .content ul.list {width: 105%;} #product.page-wrap .wrap-content .content ul.list li {width: 45%;} #product.page-wrap .wrap-content .content ul.list li:nth-child(3n) {margin-right: 5%;} #product.page-wrap .single {margin-top: 0px;} #product.page-wrap .single .content .single-content {display: block;} #product.page-wrap .single .content .single-content .photo-area {width: 100%; margin-bottom: 30px;} #product.page-wrap .single .content .single-content .text-area {width: 100%;} /* #product.page-wrap .single .content .single-content .photo-area .bx-pager {justify-content: center;} #product.page-wrap .single .content .single-content .photo-area .bx-pager li {width: auto; margin: 5px;} #product.page-wrap .single .content .single-content .photo-area .bx-pager a {width: 11px; height: 11px; text-align: center; display: block; background-color: #d0d0d0; border-radius: 50%; text-indent: 100%; overflow: hidden;} #product.page-wrap .single .content .single-content .photo-area .bx-pager a {} #product.page-wrap .single .content .single-content .photo-area .bx-pager a.active {background: #333;} #product.page-wrap .single .content .single-content .photo-area .bx-pager a img {display: none;} */ #product.page-wrap .single .content .single-content .photo-area .bx-pager li {width: 8%;} #brand-concept #wrap .top-content {margin-top: 30px;} #brand-concept #wrap .top-content p, #about .fadein.scrollin:first-child {margin-top: 0;} /* news */ #wrap.news {margin: 0 5%; width: 90%;} #wrap.news ul li span {display: block;} #wrap.page-content .single-content h1 {line-height: 1.7em;} #wrap.page-content h1 {font-size: 20px; margin-bottom: 60px;} #spec_care #wrap .top-content h1 span {line-height: 1em;} #wrap .top-content p img {max-width: 100%; height: auto;} #wrap .top-content p {/*margin-bottom: 30px; margin-top: 30px; font-weight: bold;*/ font-size: 18px; line-height: 1.9em;} .single-content .content .ymd {text-align: left;} /* about */ #wrap .top-content {margin-bottom: 100px; margin-top: 60px;} .about .top-content .company-list li span {} .about #wrap .top-content h2 {margin-bottom: 30px; font-size: 18px;} .about #wrap .top-content .list-content {display: block;} .about #wrap .top-content .list-content .list {display: block; width: 100%; margin-bottom: 30px;} .about #wrap .top-content .list-content .list .photo {width: 100%; margin-bottom: 10px;} .about #wrap .top-content .list-content .txt {width: 100%;} .about #wrap .top-content .company-list li span {display: block;} .about #wrap .top-content .company-list {width: 100%;} #about .title-content .content h1 {font-size: 20px;} #product .title-content .content h1,#about .title-content .content h1,#brand-concept .title-content .content h1 {top: 43%;} #earth-ring .title-content .content h1,#imperium-necklace .title-content .content h1,#brand-concept .title-content .content h1 {top: 43%;} .page-wrap.collections .wrap-content h2,.page-wrap.collections .wrap-content h2,#product.page-wrap .wrap-content h2 /*{display: none;}*/ .ec-productRole .ec-productRole__title .ec-headingTitle {margin-top: 30px !important;} .page-wrap.collections .wrap-content .content .main-content,.page-wrap.collections .wrap-content .content .main-content,#product.page-wrap .wrap-content .content .main-content {padding-top: 0;} /* お問い合わせ */ #wrap .top-content .mw_wp_form.mw_wp_form_input dt {margin-bottom: 15px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt span {font-size: 10px;} #wrap .top-content .mw_wp_form.mw_wp_form_input dt {padding-left: 18%;} #wrap .top-content .mw_wp_form.mw_wp_form_input dl:nth-child(4) dt {padding-left: 0;} .page-wrap.items01 .title-content .items01 {display: block;} .page-wrap.items01 .title-content .items02 {display: none;} .page-wrap.items01 .title-content .items03 {display: none;} .page-wrap.items01 .title-content .items04 {display: none;} .page-wrap.items02 .title-content .items01 {display: none;} .page-wrap.items02 .title-content .items02 {display: block;} .page-wrap.items02 .title-content .items03 {display: none;} .page-wrap.items02 .title-content .items04 {display: none;} .page-wrap.items03 .title-content .items01 {display: none;} .page-wrap.items03 .title-content .items02 {display: none;} .page-wrap.items03 .title-content .items03 {display: block;} .page-wrap.items03 .title-content .items04 {display: none;} .page-wrap.items04 .title-content .items01 {display: none;} .page-wrap.items04 .title-content .items02 {display: none;} .page-wrap.items04 .title-content .items03 {display: none;} .page-wrap.items04 .title-content .items04 {display: block;} .page-wrap.grossy .title-content .collections01 {display: block;} .page-wrap.grossy .title-content .collections02 {display: none;} .page-wrap.grossy .title-content .collections03 {display: none;} .page-wrap.graceful .title-content .collections01 {display: none;} .page-wrap.graceful .title-content .collections02 {display: block;} .page-wrap.graceful .title-content .collections03 {display: none;} .page-wrap.frotune .title-content .collections01 {display: none;} .page-wrap.frotune .title-content .collections02 {display: none;} .page-wrap.frotune .title-content .collections03 {display: block;} #spec_care #wrap.attencion {width: 900px;} #spec_care #wrap .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #spec_care #wrap .top-content h1 span {font-size: 12px; display: block; margin-top: 10px;} #spec_care .wrapcontent .content {margin-bottom: 60px; line-height: 2em; font-size: 13px;} #spec_care .wrapcontent .content a.contact-link {text-decoration: underline; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #spec_care .wrapcontent .content a.contact-link:hover {opacity: 0.6;} #spec_care .wrapcontent .content h3 {font-size: 14px; margin-bottom: 10px; /*font-weight: bold;*/} #spec_care .wrapcontent .content span.text01 {font-size: 12px;} #after_care #wrap.attencion {width: 900px;} #after_care #wrap .top-content h1 {text-align: center; font-size: 32px; /*font-weight: bold;*/ margin-bottom: 120px;} #after_care #wrap .top-content h1 span {font-size: 12px; display: block; margin-top: 10px;} #after_care .wrapcontent .content {margin-bottom: 60px; line-height: 2em; font-size: 13px;} #after_care .wrapcontent .content a.contact-link {text-decoration: underline; --webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #after_care .wrapcontent .content a.contact-link:hover {opacity: 0.6;} #after_care .wrapcontent .content h3 {font-size: 14px; margin-bottom: 10px; /*font-weight: bold;*/} #after_care .wrapcontent .content span.text01 {font-size: 12px;} #attention #wrap.attencion h1,#spec_care #wrap.attencion h1,#after_care #wrap.attencion h1 {line-height: 1.5em;} #attention #wrap.attencion,#spec_care #wrap.attencion,#after_care #wrap.attencion {width: 90%; margin: auto;} .title-content .content h1 {font-size: 14px !important;} header #wrap .content .tel {display: none;} header #wrap .content .menu {display: none;} .ssp-zone {display: none;} header .title-area .slider .sp-zone {display: block;} header .title-area .slider .pc-zone {display: none;} .sp-groval {margin-bottom: 0px; width: 100%; border-top: 1px solid #efefef;} .sp-groval li {width: 50%; text-align: center; float: left; border-bottom: 1px solid #efefef; padding: 0;} .sp-groval li:nth-child(odd) {border-right: 1px solid #efefef;} .sp-groval li:nth-child(even) {width: calc(50% - 1px);} /* header */ .take-on header #wrap .content .menu-area {display: none;} header #wrap .content h1 {margin: 15px auto; width: 40%;} header .title-area .first-text {width: 90%; top: 25%;} header .title-area .first-text h2 {width: 60%;} header .title-area p.header-fadein {font-size: 3.5vw;} header .title-area .slider,header .title-area .slider li {height: 450px;} header .first-text-area {height: 100%;} header .title-area .slider li:nth-child(1) {background: none; height: auto;} header .title-area .slider li:nth-child(2) {background: none; height: auto;} header .title-area .slider li:nth-child(3) {background: none; height: auto;} header .title-area .slider li:nth-child(4) {background: none; height: auto;} header .title-area .slider li:nth-child(5) {background: none; height: auto;} header .title-area .slider li:nth-child(6) {background: none; height: auto;} header .title-area .slider li:nth-child(7) {background: none; height: auto;} header .title-area .slider li:nth-child(8) {background: none; height: auto;} header .title-area .slider li:nth-child(9) {background: none; height: auto;} header .title-area .slider li img {width: 100%; height: auto;} .product_page .title-content .content {} /* index */ #wrap .top-content {width: 100%;} #about.page-wrap .title-content, #brand-concept.page-wrap .title-content {height: auto;} .page-wrap .title-content .content {height: auto; width: 100%;} .page-wrap .title-content .content img {height: auto; width: 100%;} #wrap .top-content h2 {font-size: 18px;} #wrap {margin: 0 5%; width: 90%;} .page-wrap .wrap-content {margin-top: 60px;} #wrap .top-content.contact-content {width: 100%;} #wrap .top-content .content-area {margin-bottom: 100px;} #wrap .top-content .content-area p {font-size: 13px;} #wrap .top-content .slick-initialized li.slick-slide {} .top-content .collections-list {width: 100%; display: block;} .top-content .collections-list > li {width: 100%; margin-bottom: 5%;} .top-content .items-list {width: 100%; display: block;} .top-content .items-list > li {width: 100%; margin:0 0 5% 0;} #wrap .top-content .content-area p {font-size: 13px; text-align: center;} #wrap .top-content .content-area p span {display: block; margin-right: 0;} #wrap .top-content .content-area .news_and_blog-area p {font-size: 14px;} .top-content .items-list li h3.title {margin: auto; top: 0; bottom: 0; font-size: 16px;} .title-content .content img {width: 100%; height: auto;} .title-content .content {width: 100%; height: auto;} .title-content {height: auto;} } @import "../mixins/variables"; @import "../mixins/clearfix"; @import "../mixins/media"; @mixin row{ display: block; margin: 0; @include media_desktop { display: flex; } } @mixin makeSmColumn($columns){ position: relative; min-height: 1px; @media (min-width: $desktop) { width: percentage(($columns/ 12)); } @include media_desktop{ } } /* グリッド 画面を12分割し、グリッドレイアウトに対応するためのスタイルです。 sg-wrapper:
Styleguide 5.1 */ /* 2分割グリッド 画面 ２分割の　グリッドです。 Bootstrap の col-sm-6 相当のグリッドを提供します。 Markup: .ec-grid2 .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell sg-wrapper:
Styleguide 5.1.1 */ .ec-grid2{ display: -ms-flexbox; display: flex; @media only screen and (max-width: 700px) { display: block; } @include row; & &__cell{ @include makeSmColumn(6); } & &__cell2{ @include makeSmColumn(12); } } /* 3分割グリッド 画面　３分割の　グリッドです。 Markup: .ec-grid3 .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell Styleguide 5.1.2 */ .ec-grid3{ @include row; & &__cell{ @include makeSmColumn(4); } & &__cell2 { @include makeSmColumn(8); } & &__cell3 { @include makeSmColumn(12); } } /* 4分割グリッド 画面　４分割の　グリッドです。 Markup: .ec-grid4 .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell Styleguide 5.1.3 */ .ec-grid4{ @include row; & &__cell{ @include makeSmColumn(3); } } /* 6分割グリッド 2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。 Markup: .ec-grid6 .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell .ec-grid6 .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2 .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2 .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2 .ec-grid6 .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3 .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3 Styleguide 5.1.4 */ .ec-grid6{ @include row; & &__cell{ @include makeSmColumn(2); } & &__cell2{ @include makeSmColumn(4); } & &__cell3{ @include makeSmColumn(6); } } /* 中央寄せグリッド 10/12 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の１０グリッドです ex [ご利用規約ページ　本文](http://demo3.ec-cube.net/help/agreement) Markup: .ec-off1Grid .ec-off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Styleguide 5.1.5 */ .ec-off1Grid{ margin: 0; @include media_desktop { @include row; } & &__cell{ margin: 0; @include media_desktop { @include makeSmColumn(10); margin-left: percentage((1 / 12)); } } } /* 中央寄せグリッド 8/12 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の８グリッドです Markup: .ec-off2Grid .ec-off2Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Styleguide 5.1.6 */ .ec-off2Grid{ @include row; & &__cell{ margin: 0; @include media_desktop { @include makeSmColumn(8); margin-left: percentage((2 / 12)); } } } /* 中央寄せグリッド 6/12 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の６グリッドです Markup: .ec-off3Grid .ec-off3Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Styleguide 5.1.7 */ .ec-off3Grid{ @include row; & &__cell{ margin: 0; @include media_desktop { @include makeSmColumn(6); margin-left: percentage((3 / 12)); } } } /* 中央寄せグリッド 4/12 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の４グリッドです Markup: .ec-off4Grid .ec-off4Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Styleguide 5.1.8 */ .ec-off4Grid{ @include row; & &__cell{ margin: 0; @include media_desktop { @include makeSmColumn(4); margin-left: percentage((4 / 12)); } } } /* グリッドオプション グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。 sg-wrapper:
Styleguide 5.1.9 */ /* グリッドセルの左寄せ .ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。 Markup: .ec-grid4.ec-grid--left .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell Styleguide 5.1.10 */ .ec-grid--left { justify-content: flex-start; } /* グリッドセルの右寄せ .ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。 Markup: .ec-grid4.ec-grid--right .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell Styleguide 5.1.11 */ .ec-grid--right { justify-content: flex-end; } /* グリッドセルの中央寄せ .ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。 Markup: .ec-grid4.ec-grid--center .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell Styleguide 5.1.12 */ .ec-grid--center { justify-content: center } /*-----------------------*/ /* max-width: 480px */ /*-----------------------*/ @media only screen and (max-width: 480px) { } @media only screen and (max-width: 320px) { }