@charset "UTF-8";
/* 
CSS Document 
ページ共通CSS
ヘッダ, フッタ, サイド
*/

@font-face {
    font-family: 'LatoHairline';
    src: url('../fonts/lato-hairline-webfont.eot');
    src: url('../fonts/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-hairline-webfont.woff2') format('woff2'),
         url('../fonts/lato-hairline-webfont.woff') format('woff'),
         url('../fonts/lato-hairline-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LatoThin';
    src: url('../fonts/lato-thin-webfont.eot');
    src: url('../fonts/lato-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-thin-webfont.woff2') format('woff2'),
         url('../fonts/lato-thin-webfont.woff') format('woff'),
         url('../fonts/lato-thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	/*ゴシック*/
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3",'ヒラギノ角ゴ W3','Hiragino Sans',"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	color:#fff;
	font-size:14px;
	line-height:1.5;
	letter-spacing: 0.05em;
	-webkit-text-size-adjust: 100%;
	background:#000;
	}

i {
	width:1em;
	display:inline-block;
	vertical-align: middle;
	margin-top: -0.2em;
}

/*.modaal-noscroll {
	overflow: hidden;
	height:100vh;
}
.modaal-noscroll #wrapper {
	overflow: hidden;
	width:100vw;
	height:100vh;
}*/
	
/*================================
リンク
================================*/
a {
	color:#fff;
	text-decoration: underline;
	}
	
a:hover {
	text-decoration: none;
	}

a.noline {
	text-decoration: none;
}

/*ホバーボックス*/
.hoverBox {
	display:block;
	position: relative;
	text-align: center;
}
.hoverBox figure {
	background:#000;
}
.hoverBox figure img {
	transition:opacity 0.3s linear;
}
.hoverBox .inner {
	position: absolute;
	z-index: 1;
	width:100%;
	top:50%;
	left:0;
	opacity: 0;
	transform:translateY(0);
	transition: 0.3s ease-in-out;
}

.hoverBox:hover .inner {
	opacity: 1;
	transform:translateY(-50%);
}
.hoverBox:hover figure img {
	opacity: 0.4;
}

/*矢印ボタン*/
.arrowButton {
	text-decoration: none;
	display:inline-block;
	overflow: visible;
}
.arrowButton i {
	display:inline-block;;
	width:2em;
	height:0.8em;
	border-bottom:1px solid #fff;
	margin-right: 1em;
	position: relative;
	transform:translateX(0);
	transition: transform 0.3s ease-in-out;
}
.arrowButton i::after {
	content:"";
	display:block;
	width:1px;
	height:100%;
	background:#fff;
	position: absolute;
	right:0;
	bottom:0;
	transform-origin: bottom right;
	transform:rotate(-55deg);
}
.arrowButton:hover i {transform:translateX(0.5em);}

.arrowButton.trg i::before,
.arrowButton.trg i::after {display:none;}
.arrowButton.trg i {
	margin-left:2em;
	width:0.6em;
	height:0.6em;
	border:none;
	border-top:1px solid #000;
	border-right:1px solid #000;
	transform:translateY(0.2em) rotate(45deg);
}
.arrowButton.trg i.first  {
	margin-right:1em;
	margin-left:0;
}
.arrowButton.trg.bottom i {
	transform:translateY(-0.1em) rotate(135deg);
}
.arrowButton.trg.full {
	display: block;
	position: relative;
}
.arrowButton.trg.full i {
	position: absolute;
	right:0;
	transform:translateY(-0.15em) rotate(45deg);
}

.boxButton {
	cursor: pointer;
	font-size:inherit;
	text-align: center;
	display:block;
	padding:1.2em 1em;
	line-height: 1;
	border:1px solid #fff;
	text-decoration: none;
	width:100%;
	max-width:243px;
	margin: 80px auto 0;
	transition:all 0.3s linear;
	background: #000;
  color:#fff !important;
}

.boxButton.lato {
	padding:1.5em 1em 1.2em;
}

.boxButton:hover {
	background:#fff;
	color:#000 !important;
  border-color:#000;
}

.boxButton.wht {
	background:#fff;
	border-color:#000 !important;
  color:#000 !important
}
.boxButton.wht:hover {
	background:#000;
	color:#fff !important;
}

.boxButton.pink {
	background:#d29ca5;
	border-color:#d29ca5;
  color:#fff !important;
}
.boxButton.pink:hover {
	background-color:#fff;
	color:#c56475 !important;
}

.closeButton {
	display:block;
	width:15px;
	height:15px;
	position: relative;
	cursor: pointer;
}
.closeButton::before,
.closeButton::after {
	display:block;
	content:"";
	width:100%;
	height:1px;
	background:#fff;
	position: absolute;
	top:50%;
}
.closeButton::before {
	transform:rotate(45deg);
}
.closeButton::after {
	transform:rotate(-45deg);
}

.closeButton.black::before,
.closeButton.black::after {
	background:#000;
}


/*並列矢印ボタンリスト*/
.arrowButtonList {
	display:flex;
	justify-content: space-between;
}
.arrowButtonList li {
	width:47%;
}
.arrowButtonList li a {
	display:block;
	border-bottom:1px solid #e5e5e5;
	padding: 0.8em 0 0.8em 0;
	text-decoration: none;
	position: relative;
	overflow: visible;
}
.arrowButtonList li a span {
	display:block;
	font-size:0.92em;
}
.arrowButtonList li a::after {
	content:"";
	width:0.6em;
	height:0.6em;
	border:1px solid #000;
	border-bottom-color:transparent;
	border-left-color:transparent;
	position: absolute;
	right:0;
	top:50%;
	transform:translateY(-50%) rotate(45deg);
}

.arrowButtonList li a::before {
	content:"";
	display:block;
	position: absolute;
	background: #ddd;
	left:0;
	bottom:0;
	height:1px;
	width:0;
	transition: width 0.3s ease-in-out;
}
.arrowButtonList li a:hover::before {
	width:100%;
}

/*================================
アコーディオン
================================*/
.achordion {
	display:block;
	text-decoration: none;
	padding-right:2em;
	position: relative;
}
.achordion i {
	display:block;
	width:0.8em;
	height:0.8em;
	position: absolute;
	right:0;
	top:calc(50% + 0.1em);
	transform: translateY(-50%);
}
.achordion i::before,
.achordion i::after {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background: #000;
	position: absolute;
	top:50%;
}
.achordion i::after {
	transform:rotate(90deg);
}

.achordion + * {display:none;}

.achordion.open i::after {
	display:none;
}

/*================================
矢印アイコン
================================*/
i.arrow {
	display:inline-block;
	margin-left: 0.5em;
	width:0.5em;
	height:0.5em;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	transform:rotate(45deg);
}
i.arrow.bottom {
	transform:rotate(135deg);
}

i.arrow.blk {
	border-color:#000;
}


/*================================
見出し
================================*/

.secTit {
	font-size: 40px;
	text-align: center;
	line-height: 1.2em;
	margin-bottom: 50px;
	/*font-weight: bold !important;*/
}
.secTit .sub {
	font-size: 14px;
	line-height: 1;
	margin-left: 2em;
}

.secTit02 {
	font-size: 20px;
	text-align: center;
	margin-bottom: 30px;
}

.lato {
	/*
	font-family: 'Lato', 'Roboto', sans-serif;
	font-weight: 100 !important;
	*/
	font-family:'HelveticaNeueLTStd-Lt', 'LatoThin', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",'ヒラギノ角ゴ W3','Hiragino Sans', "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
}

/*================================
テキスト
================================*/
.note {
	font-size:12px;
	margin-top: 0.5em;
}
.note a {color:inherit;}

.pink {color:#c56475}

.checked::before {
	content:"";
	width:0.8em;
	height:0.5em;
	border-left:1px solid #c56475;
	border-bottom:1px solid #c56475;
	display:inline-block;
	margin-right:0.3em;
	transform:rotate(-45deg);
	transform-origin: left bottom;
}

/*================================
ボックス
================================*/
.addNew {
	position: relative;
}
.addNew::after {
	content:"NEW";
	font-size: 10px;
	padding:0.7em 1em 0.5em;
	line-height: 1;
	border:1px solid #fff;
	position: absolute;
	z-index: 1;
	top:20px;
	right:20px;
	display:block;
}

/*================================
グローバルナビ
================================*/
header .main .dropdown {
	position: fixed;
	left:0;
	z-index: 1000;
	display:none;
	padding-top:33px;
	width:100%;
	color:#000;
	opacity: 0;
	transition:opacity 0.3s linear;
	margin-top:-7px;
}
header .main #usernav .dropdown {
	padding-top:35px;
}
.scrolled header .main .dropdown {padding-top:29px;}
.scrolled header .main #usernav .dropdown {padding-top:32px;}
.scrolled header .main #usernav li.cart .dropdown {padding-top:31px;}
header .main .dropdown a:not(.boxButton) {color:#000 !important;}
header .main .dropdown .inner {
	background:#fff;
	padding:40px 30px;
}
header .main li:not(.language) .dropdown .inner {
	border-bottom:1px solid #dcdcdc;
}


header .main .dropdown .scrollArea {
	max-height:90vh;
	overflow: auto;
}

header .main li.ready .dropdown {
	display:block;
}
header .main li.ready.on .dropdown {
	opacity: 1;
}

/*fllowus*/
#gnav .followus .dropdown {
	text-align: center;
	
}
#gnav .followus .dropdown .inner {
	padding-top: 25px;
	padding-bottom: 25px;
}
#gnav .followus .dropdown a {margin: 0 20px;}
#gnav .followus .dropdown a i {
	width:1.5em;
	vertical-align: middle;
}
#gnav .followus .dropdown a i img {
	vertical-align: middle;
}

/*store & about*/
#gnav .about .dropdown .inner > div,
#gnav .stores .dropdown .inner > div {
	display:flex;
	justify-content: center;
	width:800px;
	margin-left: auto;
	margin-right: auto;
}
#gnav .about .dropdown .inner,
#gnav .stores .dropdown .inner {
	padding-top: 20px;
	padding-bottom: 20px;
}

#gnav .about .dropdown .inner a,
#gnav .stores .dropdown .inner a {
	font-size: 20px;
}
#gnav .about .dropdown .inner a:nth-child(n+2),
#gnav .stores .dropdown .inner a:nth-child(n+2) {
	margin-left: 20%;
}

/*products*/
#gnav .products .dropdown .constBox {
	max-width:1180px;
	display:flex;
	flex-wrap: wrap;
}
#gnav .products .dropdown .constBox > .left {
	width:65%;
}
#gnav .products .dropdown .constBox > .right {
	width:33%;
	margin-left: auto;
}

#gnav .products .dropdown .block:not(:first-child) {margin-top: 40px;}
#gnav .products .dropdown .block .tit {font-size: 26px;}
#gnav .products .dropdown .block figure,
#gnav .products .dropdown .block p.name,
#gnav .products .dropdown .block p.ja {text-align: center;}
#gnav .products .dropdown .block p.name {
	font-size: 18px;
	margin-top: 1em;
	line-height: 1.4;
}

#gnav .products .dropdown .block p.ja {
	text-align: center;	
	font-size: 13px;
}

#gnav .products .dropdown .block ul {
	display:flex;
	justify-content: space-around;
	margin-top: 15px;
}

#gnav .products .dropdown .constBox > .right .block ul {
	flex-wrap: wrap;
	justify-content: flex-start;
}
#gnav .products .dropdown .constBox > .right .block ul li {
	width:49.5%;
}
#gnav .products .dropdown .constBox > .right .block ul li:nth-of-type(2n) {
	margin-left: auto;
}
#gnav .products .dropdown .constBox > .right .block ul li:nth-of-type(n+3) {
	margin-top: 20px;
}

#gnav .products .dropdown .right .block p.name {font-size: 15px;}

#gnav .products .dropdown .left .block figure,
#gnav .products .dropdown .right .block.compact figure {
	max-width:150px;
	margin-left: auto;
	margin-right: auto;
}

#gnav .products .dropdown .right .block.gift ul li {
	width:100%;
}


/*search*/
#usernav .search .dropdown .inner form {
	max-width:1000px;
	margin-left: auto;
	margin-right: auto;
}
#usernav .search .dropdown .inner form input[type=text] {
	font-size: 13px;
	border:none;
	border-bottom:1px solid #000;
	padding:1em 0;
	width:100%;
	border-radius: 0;
}
#usernav .search .dropdown .inner form .cate {
	margin-top: 30px;
	display:flex;
	justify-content: flex-end;
	align-items: center;
}
#usernav .search .dropdown .inner form .cate > div {
	margin-left: 30px;
	position: relative;
}
#usernav .search .dropdown .inner form .cate select {
	-webkit-appearance: none;
	border:none;
	background: none;
	padding:1.2em 0;
	border-radius: 0;
	border-bottom:1px solid #000;
	min-width:279px;
}
#usernav .search .dropdown .inner form .cate i.arrow {
	position: absolute;
	right:0;
	top:50%;
	pointer-events: none;
}

/*language*/
#usernav .language .dropdown {
	width:200px;
	left:auto;
	right:10px;
	font-size: 12px;
	text-align: center;
}
#usernav .language .dropdown .inner {padding: 20px;}
#usernav .language .dropdown .inner li {margin-top: 1em;}
#usernav .language .dropdown .inner li a {text-decoration: none;}

/*cart*/
#usernav .cart .dropdown {
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3",'ヒラギノ角ゴ W3','Hiragino Sans',"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
}
#usernav .cart .dropdown {
	width:560px;
	left:auto;
	right:0;
	font-size: 16px;
	text-align: center;
}
#usernav .cart .dropdown .inner,
#usernav .cart .dropdown .cartInner{
	border:1px solid #dcdcdc;
	border-top:none;
}

#usernav .cart .dropdown .inner .btnCol2 {
	align-items: center;
	margin-top: 30px;
	font-size: 14px;
}
#usernav .cart .dropdown .inner .btnCol2 .boxButton {
	min-width:0;
	margin: 0;
}
#usernav .cart .dropdown .inner .btnCol2 li:last-child a {text-decoration: none;}
#usernav .cart .dropdown .inner .btnCol2 li:last-child a::before {
	content:"";
	display:inline-block;
	border:4px solid #d29ca5;
	border-left-color:transparent;
	border-bottom-color:transparent;
	transform: translateY(-0.1em) scaleY(0.8) rotate(45deg);
	margin-right: 1em;
}

/*
#usernav .cart .dropdown {
	display:block;
	opacity: 1;
}
*/
#usernav .cart .dropdown .cartInner {
	background: #fff;
	padding-bottom: 30px;
}
#usernav .cart .dropdown .cartInner .info01 {
	background: #e5e5e5;
	text-align: center;
	font-size: 14px;
	padding: 0.8em 0 0.5em;
}
#usernav .cart .dropdown .cartInner .info02 {
	color:#c56475;
	text-align: center;
	font-size: 17px;
	margin-top: 1em;
}
#usernav .cart .dropdown .cartInner .cartContainer {
	overflow: auto;
	max-height:360px;
	padding: 0 30px;
	margin-top: 20px;
}
#usernav .cart .dropdown .cartInner .cartContainer li {
	display: flex;
	align-items:center;
	padding:15px 0;
}
#usernav .cart .dropdown .cartInner .cartContainer li:nth-of-type(n+2) {
	border-top:1px solid #e5e5e5;
}
#usernav .cart .dropdown .cartInner .cartContainer li figure {
	width:130px;
}
#usernav .cart .dropdown .cartInner .cartContainer li div.det {
	flex:1;
	text-align: left;
	padding-left: 1em;
}
#usernav .cart .dropdown .cartInner .cartContainer li div.amount {
	width:65px;
	font-size: 15px;
}
#usernav .cart .dropdown .cartInner .cartContainer li div.price {
	width:90px;
	text-align: right;
	font-size: 15px;
}
#usernav .cart .dropdown .cartInner .cartContainer li p.nm {font-size: 14px;}
#usernav .cart .dropdown .cartInner .cartContainer li p.sub {font-size: 13px;margin-top: 1em;}
#usernav .cart .dropdown .cartInner .cartContainer li a.deleteButton {font-size: 13px;color:#999 !important;}

#usernav .cart .dropdown .cartInner .boxButton {margin-top: 30px;font-size: 14px;}

#usernav .cart .dropdown .cartInner .bottomInfo {
	display:flex;
	justify-content: space-between;
	font-size: 13px;
	margin-top: 1em;
	padding: 0 30px;
}
#usernav .cart .dropdown .cartInner .bottomInfo .totalPrc span {
	font-size: 16px;
}

#usernav li a {
	position: relative;
}
#usernav li a.badge::after {
	content:"";
	display:block;
	width:7px;
	height:7px;
	border-radius: 100px;
	background: #d29ca5;
	position: absolute;
	top:-3px;
	right:-4px;
}


/*================================
共通
================================*/
#wrapper,
header {min-width:1100px;}

header + main.common {
	margin-top:20px;
}


/*pagetop*/
#pagetopButton {
	width:40px;
	height:40px;
	border:1px solid #fff;
	border-radius:100px;
	display:flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	transform:translateY(-50%);
	background: #000;
	transition: opacity 0.3s linear;
	opacity: 0;
	position: fixed;
	bottom:10%;
	right:4%;
}

.scrolled #pagetopButton {
	opacity:1;
}
.scrolled #pagetopButton.const {
	opacity:1;
	position: absolute;
	bottom:auto;
	top:0;
	right:4%;
}



#pagetopButton::after {
	content:"";
	border:3px solid #fff;
	border-left-color:transparent;
	border-bottom-color:transparent;
	transform:rotate(-45deg);
}

/*emergencyInfo*/
#emergencyInfo {
	background:#000;
	text-align: center;
	line-height: 1;
	position: relative;
	color:#fff;
}
#emergencyInfo a {
	color:#fff;
}

/*brandInfo*/
.brandInfo {
	text-align: center;
	line-height: 1;
	color:#000;
	background:#fff;
	position: relative;
}

#emergencyInfo,
.brandInfo {
	display:none;
}


#emergencyInfo .inner,
.brandInfo .inner {
	padding: 1em 3em 1em 1em;
}

#emergencyInfo .closeButton,
.brandInfo .closeButton {
	position: absolute;
	top:50%;
	right:1em;
	transform:translateY(-50%);
}

/*header*/
header {
	position: fixed;
	z-index: 1000;
	background:#000;
	width:100%;
	left:0;
	top:0;
}

body.page-cart #wrapper,
body.page-method #wrapper,
body.page-estimate #wrapper,
body.page-order #wrapper {padding-top:0 !important;}
body.page-cart header,
body.page-method header,
body.page-estimate header,
body.page-order header {position: static;}

header .main {
	display: flex;
	justify-content:space-between;
	align-items: center;
	padding: 20px;
}
header .main .logo {
	max-width:190px;
	width:18%;
}
header .main .logo:last-child {margin-left: auto;margin-right: auto;}

header .main .logo img {
	max-height:100px;
	transition: all 1s ease-in-out;
	vertical-align: middle;
}
.scrolled header .main .logo img {
	max-height:25px;
}

header .main #gnav {
	width:53%;
	min-width:590px;
}
header .main #gnav > ul {
	display:flex;
	justify-content: space-between;
	align-items:center;
}
header .main #gnav > ul > li a {
	color:#fff;
	text-decoration: none;
}

header .main #usernav {
	width:210px;
}
header .main #usernav > ul {
	display:flex;
	justify-content: space-between;
	align-items:center;
}
header .main #usernav > ul > li > a {
	display:block;
	width:1.2em;
	line-height: 1;
}
header .main #usernav > ul > li > a img {vertical-align: middle;}
header .main #usernav > ul > li > a.langButton {
	width:auto;
	line-height: 1;
	font-size: 10px;
	text-decoration: none;
	color:#fff;
}


/*footer*/
footer {
	color:#fff;
	margin-top: 100px;
	position: relative;
}

footer .inner > * {
	padding:30px 0;
	border-top:1px solid #313131;
	
}
footer .onlinebenefit ul {
	margin-top: 30px;
	display: flex;
	justify-content: space-around;
}
footer .onlinebenefit .constBox > .tit {
	font-size: 16px;
	text-align: center;
}
footer .onlinebenefit ul li .tit {
	font-size: 15px;
}
footer .onlinebenefit ul li .tit i {
	width:auto;
	margin-right: 0.8em;
	margin-top: 0;
}
footer .onlinebenefit ul li .tit i img {
	height:1.5em;
}
footer .onlinebenefit ul li p {
	font-size: 12px;
	color:#959595;
	margin-top: 1em;
}

footer .melmaga .constBox {
	display:flex;
	align-items: center;
}
footer .melmaga .constBox .head {
	width:35%;
	text-align: center;
}
footer .melmaga .constBox .head .tit {font-size: 26px;}
footer .melmaga .constBox .head .tit span {font-size: 13px;display:block;}
footer .melmaga .fieldArea form {
	display:flex;
}
footer .melmaga .fieldArea form div {
	background:#fff;
	padding:1em;
	width:445px;
}
footer .melmaga .fieldArea form div input {
	border:none;
	padding:0;
	width:100%;
}
footer .melmaga .fieldArea form button {
	margin:0;
	min-width: 0;
	border:1px solid #fff;
	padding:0;
	width:100px;
	color:#fff;
	background: #121212;
}

footer .linkArea {
	padding-top:0;
	padding-bottom: 0;
}
footer .linkArea > .constBox {
	display:flex;
	font-size: 12px;
	max-width: 1230px;
}
footer .linkArea > .constBox > * {width:50%;padding:30px;}
footer .linkArea > .constBox > .left {border-right:1px solid #313131;}
footer .linkArea > .constBox > .left li {
	display:inline-block;
	width:28%;
	vertical-align: top;
	margin-bottom: 1em;
}
footer .linkArea > .constBox > .left li:nth-of-type(3n+1) {
	width:40%;
}
footer .linkArea > .constBox > .left li a {
	color:#959595;
	text-decoration: none;
}
footer .linkArea > .constBox > .left li a:hover {
	text-decoration: underline;
}
footer .linkArea > .constBox > .left:last-child {width:auto;flex:1;text-align: center;padding:60px 30px;border-right:none;}
footer .linkArea > .constBox > .left:last-child li {
	width:auto !important;
	margin: 0 2em;
}
footer .linkArea > .constBox > .right {
	display:flex;
	justify-content:flex-end;
	align-items: center;
	font-size: 12px;
	line-height: 1;
}
footer .linkArea > .constBox > .right > a {
	margin-left: 2.8em;
	overflow: visible;
}
footer .linkArea > .constBox > .right > a i {
	width:1.7em;
}

footer #copy {
	text-align: center;
	font-size: 10px;
	padding: 1em 0;
	line-height: 1;
}
footer #copy span {font-size: 1.5em;vertical-align: middle;}


/*container*/
#container {
	min-height:600px;
}

.constBox {
	max-width:1180px;
	margin-left:auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.constBox > .container {width:auto;}
.constBox.large {max-width:1300px;}
.w900 {max-width:900px;margin-left:auto;margin-right:auto;}
.w700 {max-width:700px;margin-left:auto;margin-right:auto;}

.sec {
	padding-top: 100px;
}

#sidebarLayout {
	display:flex;
	justify-content: space-between;
}
#sidebarLayout #sidebar {
	width:200px;
}
#sidebarLayout #sidebar.fix {
	position: fixed;
	top:100px;
}
#sidebarLayout.bottom #sidebar.fix {
	position:static !important;
}
#sidebarLayout.bottom {
	align-items:flex-end;
}
#sidebarLayout #mainColumn {
	padding-left: 40px;
	width:940px;
	margin-left: auto;
}

#sidebar > *:nth-child(n+2) {
	margin-top:40px;
}

#sidebar nav ul li {line-height: 1.4em;}
#sidebar nav ul li:nth-of-type(n+2) {
	margin-top: 1.5em;
}

#sidebar nav ul li li {
	padding-left:1em !important;
	margin-top: 1em !important;
}
#sidebar nav ul li li:first-child {
	margin-top: 1em !important;
}

#sidebar nav ul li a {text-decoration: none;}

#sidebar nav ul li a.current,
#sidebar nav ul li a.stay {
	text-decoration: underline;
}
#sidebar nav ul li a.current i,
#sidebar nav ul li a.stay i {
	display:none;
}

#sidebar a.arrowButton.boxButton {
	width:100%;
	background: #d29ca5;
	margin-top: 0;
	position: relative;
	line-height: 1;
	color:#fff !important;
	border:none !important;
}
#sidebar a.arrowButton.boxButton i {
	border-color:#fff;
	position: absolute;
	right:0;
	top:50%;
	transform:rotate(45deg);
}


/*slider*/
.slick-dots {
	position: absolute;
	bottom:0;
	z-index:1;
	padding:10px 0;
}
.slick-dots li {width:40px;}
.slick-dots li button::after,
.slick-dots li button::before {display:none;}
.slick-dots li button {
	width:3px;
	height:3px;
	padding:4px;
	border-radius:100px;
	background:#fff !important;
}
.slick-dots li.slick-active button {
	background:#535353 !important;
}

.commonSlide .slick-prev::before, .commonSlide .slick-next::before {display:none;}
.commonSlide .slick-prev, .commonSlide .slick-next {
	width:8vw;
	height:8vw;
	max-width:50px;
	max-height:50px;
	padding:0;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	z-index: 1;
	top:calc(50% - 20px);
}

.commonSlide .slick-prev {
	left:20px;
	transform:translateY(-50%) rotate(-135deg);
}
.commonSlide .slick-next {
	right:20px;
	transform:translateY(-50%) rotate(45deg);
}


.squareSlider ul li.slick-slide {text-align: center;padding:0 20px;/*max-width: 400px;*/font-size: 16.5px;}
.squareSlider ul li img {
	display: inline-block;
}
.squareSlider ul .slick-dots {position: static;}

.squareSlider ul li.slick-slide figure img {max-width:none;width:100%;}

.videoWrapper {
	position: relative;
	padding-top: 100%;
}
.videoWrapper iframe {
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.videoWrapper.rect {
	position: relative;
	padding-top: 56.25%;
}

.col5Products {
	display:flex;
	justify-content: flex-start !important;;
}
.col5Products li {
	padding:20px 15px;
	width:20%;
}
.col5Products li a {
	color:#000;
	text-decoration: none;
}
.col5Products li figure {
	width:80%;
	margin: 0 auto;
}

.col5Products li .num {font-size: 16px;margin-bottom: 2em;display:inline-block;/*color:#fff;background: #000;line-height: 1;padding: 0.3em 0.5em;*/}
.col5Products li .name {font-size: 15px;margin-top: 2em;line-height: 1.4;}
.col5Products li .sub {font-size: 13px;color:#333;margin-top: 1em;line-height: 1.4;}
.col5Products li .price {font-size: 15px;margin-top: 1em;line-height: 1;}

.col5Products .slick-arrow {border-color:#000 !important;}
.col5Products .slick-disabled {display:none !important;}



/*================================
layout
================================*/

/*ranking*/
.rankingLayout1 {
	display:flex;
	text-align: center;
	color:#000;
	height:600px;
}
.rankingLayout1 > * {
	width:50%;
	background:#fff;
}
.rankingLayout1 a {color:#000;text-decoration: none;}
.rankingLayout1 .outer {
	padding:20px;
	width:100%;
}
.rankingLayout1 .outer .inner {text-align: left;margin: 0 auto;}
.rankingLayout1 .outer img {max-height:100%;}
.rankingLayout1 .rank1 .inner {max-width:90%;font-size: 18px;}
.rankingLayout1 .less > div:nth-of-type(1) .inner {max-width:90%;font-size: 16px}
.rankingLayout1 .less > div:nth-of-type(1) .inner p.name {max-width:80%;font-size: 16px}
.rankingLayout1 .less > div:nth-of-type(n+2) .inner {max-width:90%;font-size: 14px}


.rankingLayout1 .rank1 {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right:1px solid #000;
}
.rankingLayout1 .less {
	display:flex;
	align-items: center;
	flex-wrap: wrap;
}

.rankingLayout1 .less > div:nth-of-type(1) {
	width:100%;
	border-bottom:1px solid #000;
}
.rankingLayout1 .less > div:nth-of-type(n+2) {
	width:33.3%;
	height: 255px;
}

.rankingLayout1 .rank1 img {max-width:70%;}
.rankingLayout1 .less > div:nth-of-type(1) img {max-width:50%;}
.rankingLayout1 .less > div:nth-of-type(n+2) img {max-width:80%;}

.rankingLayout1 .less > div:nth-of-type(n+2) {
	border-right:1px solid #000;
}
.rankingLayout1 .less > div:last-child {border:none;}

/*information*/
.informationList li {
	display:flex;
	align-items:center;
}
.informationList li:nth-of-type(n+2) {
	margin-top: 2em;
}
.informationList li > *:nth-child(n+2) {margin-left: 20px;}
.informationList li > *:last-child {flex:1;}
.informationList li .date {
	font-size: 13px;
}
.informationList li .cate {
	font-size: 12px;
	line-height: 1;
	border:1px solid #fff;
	padding: 0.5em 1em;
}


/*================================
modal inline
================================*/
.modalBase {display:none;}

.modaal-content-container p.txt {font-size: 18px;}

.modaal-content-container .btnCol2  {
  display:flex;
  justify-content: center;
  margin-top: 45px;
}
.modaal-content-container .btnCol2 > * {
  width:48%;
}
.modaal-content-container .btnCol2 .boxButton {margin: 0 20px;}

.modalInner {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	max-height:65vh;
}

.modalInner + .modalInner {margin-top: 20px;}

.modalInner .modalHead.type02 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0.5em 0 0.5em;
	background:#000;
	color:#fff;
}

.modalInner .modalHead.type02 + * {padding-top:20px !important;display:block;}

.modalInner .modalHead .tit {
  font-size: 18px;
  text-align: center;
}
.modalInner .modalBody .tit {
  font-size: 16px;
  margin-top: 1.5em;
}
.modalInner .modalBody .tit + p.text {
  margin-top: 0.5em;
}
.modalInner .modalBody p.text {
  font-size:14px;
  margin-top: 1em;
}
.modalInner .modalBody p.text.fs16 {
	font-size: 16px;
}

/*ボタン縦並び*/
.modalInner .btnRow {
	text-align: center;
}
.modalInner .btnRow .boxButton {
	margin-top:0;
	max-width: 300px;
}
.modalInner .btnRow .boxButton:nth-of-type(n+2) {
	margin-top:10px;
}

/*================================
modalpage iframe
================================*/
#modalpage {
	background: #fff;
	color:#000;
	padding: 35px 25px;
}

#modalpage #wrapper {
	max-width:800px;
  min-width:0;
	margin-left: auto;
	margin-right: auto;
}

#modalpage h1 {
	text-align: center;
	font-size: 18px;
	line-height: 1.4em;
	margin-bottom: 2em;
}
#modalpage h1 .sub {
	font-size: 13px;
}

#modalpage p + p {margin-top: 1em;}

/*================================
modal select
================================*/
.floatingVeil {
	position: fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 1000;
}
.modalSelect.modalBase {
	z-index: 1001;
	position: absolute;
	top:0;
	left:0;
	display:block;
	font-size: 13px;
	padding:1.2em 0;
	border:1px solid #000;
	background: #fff;
}
.modalSelect.modalBase .modalInner {
	padding:0 10px;
	max-height:450px;
	overflow: auto;
}
.modalSelect.modalBase li {
	padding:1em 0;
	border-top:1px solid #000;
	cursor:pointer;
}
.modalSelect.modalBase li:first-child {border:none;padding-top: 0;}
.modalSelect.modalBase li:last-child {padding-bottom: 0;}



/*================================
カスタムフォーム
================================*/
.customForm input[type=text] {
	font-size: 13px;
	border:none;
	border-bottom:1px solid #000;
	border-radius: 0;
	padding:1em 0;
	width:100%;
}

.customForm .checkboxField input[type=checkbox] {
	display:none;
}
.customForm .checkboxField i {
	display:inline-block;
	width:1em;
	height:1em;
	border:1px solid #000;
	vertical-align: middle;
	margin-right: 0.5em;
	position: relative;
}
.customForm .checkboxField input[type=checkbox]:checked + i::after {
	content:"";
	display:block;
	width:0.5em;
	height:0.3em;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	position: absolute;
	top:50%;
	left: 50%;
	transform:translate(-50%, -65%) rotate(-45deg);
}

.customForm .cate {
	margin-top: 30px;
	display:flex;
	justify-content: flex-end;
	align-items: center;
}
.customForm .cate > div {
	margin-left: 15px;
}

.customForm .selectWrapper select {
	-webkit-appearance: none;
	border:none;
	background: none;
	padding:1.2em 0;
	border-radius: 0;
	border-bottom:1px solid #000;
	min-width:170px;
	color:#999999;
}
.customForm .selectWrapper {
  position: relative;
	cursor: pointer;
}
.customForm .selectWrapper i.arrow {
	position: absolute;
	right:0;
	top:50%;
	pointer-events: none;
}

.customForm .selectWrapper.type02 select {
	border:1px solid #000;
  min-width:170px;
  width:100%;
	padding:0.8em 1em;
	font-size: 13px;
}
.customForm .selectWrapper.type02 i.arrow {
  top:3px;
  width:45px;
  border:none;
  border-left:1px solid #000;
  transform:none;
  height:calc(100% - 1px);
}
.customForm .selectWrapper.type02 i.arrow::before {
  content:"";
  display:block;
  border:0.2em solid #000;
  border-left-color:transparent;
  border-bottom-color:transparent;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(135deg);
}

#bestColorRankingArea {
	display:flex;
	background:#fff;
	color:#000;
}
#bestColorRankingArea > div {
	flex:1;
}
#bestColorRankingArea > div:not(:last-child) {border-right:1px solid #000;}

#bestColorRankingArea > div > .tit {
	font-size: 26px;
	text-align: center;
	padding:2em 0;
}
#bestColorRankingArea ul {padding:0 8%;}
#bestColorRankingArea ul li {
	padding:20px 9%;
}
#bestColorRankingArea ul li:nth-of-type(n+2) {border-top:1px solid #e5e5e5;}
#bestColorRankingArea ul li a {
	color:#000;
	text-decoration: none;
}
#bestColorRankingArea ul li figure {
	width:80%;
	margin: 0 auto;
}

#bestColorRankingArea ul li .num {font-size: 16px;margin-bottom: 2em;}
#bestColorRankingArea ul li .name {font-size: 15px;margin-top: 2em;}
#bestColorRankingArea ul li .sub {font-size: 13px;color:#333;}

/*注文確定　ローディング アイコン*/
.ui-dialog .ui-dialog-content {
	padding:1.5em 0.5em 0.5em;
	text-align: center;
}