@charset "UTF-8";
/* CSS Document */
:root {
	--theme01 : #E6E3DF;
	--theme02 : #EBE8E4;
	--theme03 : #F4F2EF;
	--theme04 : #F9F8F7;
	--theme05: #a1845f;
	--sub01 : #464646;
	--sub02 : #6A6A6A;
	--sub03 : #AAA;
	--sub04 : #808080;
	--red: #EB4D4D;
	--blue: #4D53EB;
}
body,html {
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Verdana, Meiryo, sans-serif;
	font-weight: 500;
	color: #222;
	background: var(--theme03);
}
a {
	color: #222;
	word-break: break-all;
}
p {
	text-align: justify;
}
.scrollbar-none {
	-ms-overflow-style: none;
	scrollbar-width: none; 
}
.scrollbar-none::-webkit-scrollbar {
	display:none;
}
/*img --------------------------------*/
.pic-fit {
	overflow: hidden;
	position: relative;
}
.pic-fit img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*loading --------------------------------*/
.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #fff;
}
.loading-logo {
	width: 264px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loading-logo svg {
  backface-visibility: hidden;
  transform: translateZ(0);
}
/*loading page --------------------------------*/
.loading-logo .loading-page {
	font-size: 2.5rem;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    letter-spacing: .05em;
}
.loading-logo .loading-page span {
	opacity: 0;
}
.loading-logo .loading-page span:first-of-type {
	animation: dot 2s infinite;
}
.loading-logo .loading-page span:nth-of-type(2) {
	animation: dot 2s 500ms infinite;	
}
.loading-logo .loading-page span:nth-of-type(3) {
	animation: dot 2s 1s infinite;	
}
@keyframes dot {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@media screen and (min-width:768px) {
	.loading-logo {
		width:350px;
	}
}
@media screen and (min-width:1500px) {
	.loading-logo {
		width:500px;
	}
}
/*svg animation --------------------------------*/
.loading .st0 {
	fill: none;
	stroke: #fff;
	stroke-width: 17.5417;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}
/*header site logo --------------------------------*/
.site-logo-header {
    width: 144px;
	position: fixed;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
}
header nav .site-logo {
	display: none;
}
[class^="site-logo"] a {
	display: block;
}
/*sns --------------------------------*/
.sns {
	display: flex;
	justify-content: center;
}
.sns li {
	margin: 0 15px;
}
header .sns li {
	font-size: 2.6rem;
}
footer .sns li {
	font-size: 3rem;
}
/*login --------------------------------*/
.login-nav-btn,
.login-nav.pulldown li a {
	padding: 15px 20px;
	font-size: 1.6rem;
	font-weight: 700;
	display: flex;
	align-items: baseline;
}
.login-nav-btn {
	display: none;
}
.login-nav-btn,
.login-nav.pulldown {
	margin-bottom: 15px;
	border-bottom: 1px solid #222;
}
[class^="login-nav"] .fa-user {
	font-size: 2.6rem;
	margin-right: 8px;
}
.login-nav .member-name {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    max-width: 12rem;
}
.login-nav.pulldown li ul {
	padding-bottom: 10px;
}
.login-nav.pulldown li ul a {
	padding: 10px 20px;
	font-size: 1.5rem;
	color: var(--sub01);
}
.login-nav.pulldown li > a + span + span {
	margin-left: 0;
	width: 100%;
    height: 47px;
	position: absolute;
	top: 0;
}
.login-nav.pulldown li > a + span + span::before {
	top: 30px;
	left: auto;
	right: 20px;
}
.pc-login-nav-btn, .pc-login-nav {
	display: none;
}
/*contact btn --------------------------------*/
.contact-btn {
	padding: 0 20px 20px;
	display: flex;
	justify-content: space-between;
}
.pc-contact-btn {
	display: none;
}
.contact-btn li {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .05em;
	width: 100%;
	line-height: 31px;
	background: #000;
	border: 2px solid #222;
}
.contact-btn a {
	padding: 0 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
}
.contact-btn a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	display: block;
}
.sp--contact-btn {
	position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
}
[class*="page-template-tpl_custom_"] .sp--contact-btn,
.page-template-tpl_cart .sp--contact-btn {
	display: none;
}
.sp--contact-btn .contact-btn {
	padding: 0;
}
.sp--contact-btn .contact-btn li {
	line-height: 50px;
}
.sp--contact-btn .contact-btn a {
	padding: 0 30px;
}
@media screen and (min-width:1060px) {
	.sp--contact-btn {
		display: none;
	}
}
/*header --------------------------------*/
header {
	font-family: 'Roboto',YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Verdana, Meiryo, sans-serif;
}
.nav-jp {
	font-weight: 400;
}
header .cart-btn {
	font-size: 2.6rem;
	position: fixed;
	top: 25px;
	right: 30px;
	z-index: 110;
}
.pc-nav-wrap {
	display: none;
}
/*hamburger menu -------------------------------- */
header nav {
	background: var(--theme02);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	transition: height .5s;
	overflow: scroll;
	z-index: 110;
}
.gnav--inner {
	padding: 80px 20px 30px;
	letter-spacing: .05em;
}
.gnav-inner > div {
	margin-bottom: 50px;
}
.gnav-inner > div:last-of-type {
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #222;
}
#nav-trigger:checked + nav {
	height: 100%;
}
.gnav-ttl {
	margin-bottom: 4px;
	font-size: 1.4rem;
	letter-spacing: .05em;
	color: var(--sub03);
	display: flex;
	align-items: center;
}
.gnav-ttl::before {
	content: "";
	margin-right: 5px;
	width: 15px;
	height: 1px;
	background: var(--sub03);
}
.pulldown li {
	font-size: 2rem;
	font-weight: 300;
}
.pulldown li.nav-jp {
	font-size: 1.8rem;
	font-weight: 500;
}
.pulldown li ul li:last-of-type {
	border-bottom: none;
}
.pulldown li a {
	padding: 10px 20px;
    display: block;
    color: #222;
    letter-spacing: 2px;
}
.pulldown > li  a {
	display: inline-block;
}
.gnav-inner .pulldown > li:last-of-type a {
	padding-bottom: 0;
}
.pulldown li ul  {
	width: 100%;
	display: none;
}
.gnav-inner.pulldown li ul {
	padding: 2px 0;
}
.pulldown li ul a {
	padding: 8px 20px 8px 36px;
	font-size: 1.8rem;
	font-weight: 300;
	color: var(--sub01);
	opacity: 0;
	transition: opacity .3s;
}
.pulldown li > a + span + span.open + ul a {
	opacity: 1;
} 
.pulldown li ul .nav-jp a {
	font-size: 1.6rem;
}
.pulldown li {
	position: relative;
}
.pulldown li > a + span {
	display: none;
}
.pulldown li > a + span + span {
	margin-left: 5px;
	width: 25px;
    height: 25px;
	transition: transform .2s;
	display: inline-block;
	position: relative;
    top: 5px;
}
.pulldown li > a + span + span::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1px solid #222;
	border-bottom: 1px solid #222;
	position: absolute;
	top: calc(50% - 2px);
	left: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
	transition: transform .2s;
}
.pulldown li > a + span.open,
.gnav-inner .pulldown li > a + span + span.open {
	transform: rotate(180deg);
}
.login-nav.pulldown li > a + span + span.open::before {
	transform: translate(-50%,-50%) rotate(225deg);
}
.pulldown li .fa-external-link-alt {
	margin-left: 5px;
	font-size: 1.4rem;
	color: var(--sub02);
	position: relative;
	top: -1px;
}
.nav_btn {
	position: fixed;
	top: 31px;
	left: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 999;
}
.nav_btn span{
	width: 30px;
	height: 1px;
	background: #222;
	margin: 0 0 7px;
	transition: transform .5s, opacity .5s;
}
.nav_btn span:last-of-type {
	margin-bottom: 0;
}
#nav-trigger:checked + nav + .nav_btn span:first-of-type {
	transform: translateY(8px) rotate(45deg);
}
#nav-trigger:checked + nav + .nav_btn span:nth-of-type(2){
	opacity: 0;
}
#nav-trigger:checked + nav + .nav_btn span:last-of-type {
	transform: translateY(-8px) rotate(-45deg);
}
#nav-trigger {
	display: none;
}
@media screen and (min-width:375px) {
	.pulldown li {
		font-size: 2.2rem;
	}
}
@media screen and (min-width:768px) {
	.gnav {
		width: 50%;
	}
	.nav_btn + label {
		position: fixed;
		width: 100%;
		height: 0;
		background: rgba(34,34,34,.4);
		transition: height .5s;
		z-index: 100;
	}
	#nav-trigger:checked + nav + .nav_btn + label {
		height: 100%;
	}
}
@media screen and (min-width:1060px) {
	/*login --------------------------------*/
	.login-nav-btn,
	.login-nav.pulldown {
		padding: 0;
		margin: 0;
		border-bottom: none;
		position: absolute;
		top: 130px;
		left: 33px;
	}
	.pc-login-nav-btn, .pc-login-nav.pulldown {
		display: block;
		padding: 0;
		margin: 0;
		border-bottom: none;
		position: fixed;
		top: 130px;
		left: 33px;
		z-index: 2;
	}
	.pc-login-nav-btn {
		display: none;
	}
	.login-nav.pulldown > li > a + span {
		display: block;
	}
	.login-nav.pulldown li > a + span + span{
		display: none;
	}
	.login-nav.pulldown li ul {
		display: block!important;
		overflow: hidden;
		position: absolute;
		top: 100%;
		opacity: 0;
		z-index: -99;
		transition: opacity .5s;
		height: 0;
	}
	.login-nav.pulldown li:hover ul  {
		opacity: 1;
		z-index: 0;
		height: auto;
		transition: opacity .5s;
	}
	.login-nav.pulldown > li a {
		padding: 0;
	}
	.login-nav-btn,
	.login-nav.pulldown li a {
		font-size: 1.4rem;
	}
	.login-nav.pulldown li a {
		width: 180px;
	}
	.login-nav-btn.pc-login-nav-btn li a {
		width: 100px;
	}
	.login-nav .member-name {
		max-width: 8rem;
	}
	.login-nav.pulldown li > a + span + span {
		height: 26px;
	}
	.login-nav.pulldown li > a + span + span::before {
		top: 15px;
		right: 0;
	}
	.login-nav.pulldown > li > a {
		padding-bottom: 10px;
	}
	.login-nav.pulldown li ul {
		background: rgba(255,255,255,.98);
	}
	.login-nav.pulldown li ul {
		padding: 0;
		max-width: 145px;
	}
	.login-nav.pulldown li ul li {
		padding: 0 0 18px 32px;
	}
	.login-nav.pulldown li ul li:first-of-type {
		padding-top: 20px;
	}
	.login-nav.pulldown li ul a {
		padding: 0;
		font-weight: 500;
		opacity: 1;
	}
	.login-nav.pulldown li ul li:last-of-type a {
		margin-bottom: 0;
	}
	/*contact btn --------------------------------*/
	.contact-btn {
		padding: 0;
		position: absolute;
		top: 35px;
		right: 26px;
		z-index: 1;
	}
	.pc-contact-btn {
		display: flex;
		letter-spacing: .05em;
		padding: 0;
		position: fixed;
		top: 35px;
		right: 26px;
		z-index: 1;
	}
	.contact-btn li {
		width: auto;
		line-height: 45px;
		font-size: 1.5rem;
	}
	.contact-btn a::after {
		margin: -1px 0 0 20px;
	}
	/*header --------------------------------*/
	.site-logo-header {
		width: 214px;
		position: absolute;
		top: 35px;
		z-index: 99;
	}
	header .cart-btn {
		width: 30px;
		top: 85px;
		left: 29px;
	}
	header nav .site-logo,
	.pc-nav-wrap {
	display: block;
	}
	/*hamburger menu -------------------------------- */
	.gnav {
		width: 100%;
	}
	#nav-trigger:checked + nav + .nav_btn + label {
		display: none;
	}
	.gnav--inner {
		padding: 0;
	}
	.gnav-inner-wrap {
		margin: auto;
		max-width: 695px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.gnav-inner {
		padding: 40px 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow: scroll;
	}
	header nav .site-logo {
		width: 100%;
	}
	header nav .site-logo a {
		width: 214px;
		margin: 0 auto 30px;
	}
	.gnav-inner > div,
	.gnav-inner > div:last-of-type {
		margin: 0;
		padding: 0;
	}
	.gnav-inner > div:last-of-type {
		border-bottom: none;
	}
	.gnav-ttl {
		font-size: 2rem;
		margin-bottom: 40px;
	}
	.gnav-ttl::before {
		margin-right: 20px;
		width: 70px;
	}
	.gnav-inner .pulldown > li {
		margin-bottom: 35px;
	}
	.gnav-inner .pulldown > li:last-of-type {
		margin-bottom: 0;
	}
	.pulldown li > a + span + span {
		margin-left: 30px;
	}
	.pulldown li > a + span + span::before {
		width: 13px;
		height: 13px;
	}
	.pulldown li a {
		padding: 0;
		font-size: 2.8rem;
	}
	.pulldown li.nav-jp a{
		font-size: 2.4rem;
	}
	.pulldown li .fa-external-link-alt {
		font-size: 2rem;
		margin-left: 8px;
	}
	.pulldown li:last-of-type a {
		margin-bottom: 0;
	}
	.gnav-inner .pulldown li ul a {
		padding: 0;
		margin: 20px 0 0 16px;
		font-size: 2.4rem;
	}
	.pulldown li ul .nav-jp a {
		font-size: 2.2rem;
	}
	.gnav--inner .sns {
		position: absolute;
		left: 30px;
		bottom: 50px;
		flex-direction: column;
	}
	.gnav--inner .sns li {
		font-size: 3rem;
		margin: 0 0 20px;
	}
	.gnav--inner .sns li:last-of-type {
		margin-bottom: 0;
	}
	/*pc-login-nav --------------------------------*/
	.pc-login-nav > li {
		padding-bottom: 10px;
		width: 132px;
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: 2px;
		display: flex;
		align-items: baseline;
	}
	/*pc-nav-wrap --------------------------------*/
	.pc-nav-wrap {
		margin-bottom: 20px;
		font-size: 5.4rem;
		position: fixed;
		top: 197px;
		left: 30px;
		overflow: scroll;
   	 	height: calc(100vh - 197px);
		opacity: 1;
		z-index: 1;
		transition: opacity .5s .1s, z-index .1s;
	}
	.pc-nav-wrap .pc-nav {
		margin-bottom: 40px;
	}
	.pc-nav-wrap li {
		margin-bottom: 20px;
		font-weight: 300;
	}
	.pc-nav-wrap .sns {
		margin-bottom: 40px;
		justify-content: flex-start;
	}
	.pc-nav-wrap .sns li {
		margin: 0 20px 0 0;
		font-size: 3rem;
	}
	.pc-nav-wrap.move {
		opacity: 0;
		z-index: -99;
		transition: opacity .5s, z-index .1s .5s;
	}
}
/*art --------------------------------*/
.art-bg01 {
	background: var(--theme02);
}
.art-bg02 {
	background: var(--theme04);
}
.art-inner {
	padding: 50px 30px;
	max-width: 1160px;
	margin: auto;
}
[class^="art-ttl"] {
	font-family: 'Roboto', sans-serif;
	font-size: 4rem;
	line-height: 1.2;
	margin-bottom: 26px;
	position: relative;
}
.art-ttl-ja {
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Verdana, Meiryo, sans-serif;
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: 24px;
}
.art-ttl-ja.art-ttl-ja-pic {
	margin-bottom: 44px;
}
[class^="art-ttl"]::before {
	content: "";
	width: 15px;
	height: 1px;
	background: #222;
	position: absolute;
	top: 23px;
	left: -30px;
}
.art-ttl-ja::before {
	top: 16px;
}
[class^="art-ttl"] ~ p {
	font-size: 1.5rem;
	line-height: 2;
	color: var(--sub01);
}
.txt-b {
	font-weight: 700;
	color: #222;
}
@media screen and (min-width:1060px) {
	.art-inner {
/*		padding: 50px 170px;*/
		width: 75%;
	}
	[class^="art-ttl"] {
		padding-left: 70px;
	}
	[class^="art-ttl"]::before {
		width: 50px;
		left: 0;
	}
}
@media screen and (min-width:1220px) {
	.art-inner {
/*		padding: 50px 130px;*/
	}
}
@media screen and (min-width:1500px) {
	.art-inner {
		padding: 75px 0;
	}
	[class^="art-ttl"] {
		font-size: 5.6rem;
		padding-left: 90px;
	}
	.products-nav-other .art-ttl,
	.products-nav .art-ttl,
	.gallery .art-ttl {
		margin-bottom: 44.4px;
	}
	.art-ttl-ja {
		font-size: 3.4rem;
		margin-bottom: 21.5px;
	}
	.art-ttl-ja.art-ttl-ja-pic {
		margin-bottom: 41.5px;
	}
	[class^="art-ttl"]::before {
		width: 70px;
		top: 32px;
	}
	.art-ttl-ja::before {
		top: 25px;
	}
	[class^="art-ttl"] ~ p {
		font-size: 1.6rem;
	}
}
/*btn --------------------------------*/
p[class^="btn-cmn"] {
	font-size: 1.5rem;
	font-weight: 400;
	font-family: 'Roboto', YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Verdana, Meiryo, sans-serif;
	line-height: 40px;
	display: flex;
    justify-content: flex-end;
}
p[class^="btn-cmn-ja"] {
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Verdana, Meiryo, sans-serif;
}
.btn-inner {
	color: #fff;
	padding: 0 57px 0 20px;
    background: #222;
	display: inline-block;
	position: relative;
}
.btn-cmn-ja-c .btn-inner {
	padding: 0 48px 0 20px;
}
.btn-inner::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
}
.btn-cmn-v {
	font-size: 1.8rem;
	letter-spacing: .05em;
	line-height: 33px;
}
.btn-cmn-v::after {
	line-height: 33px;
	top: 54%;
}
.btn-cmn-link a::after, .btn-cmn-ja-link a::after {
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	width: auto;
	height: auto;
	border: none;
	transform: translateY(-50%) rotate(0deg);
}
@media screen and (min-width:768px) {
	[class^="btn-cmn"] {
		font-size: 1.4rem;
	}
	.btn-cmn-ja-c .btn-inner {
		padding: 0 30px 0 20px;
	}
}
@media screen and (min-width:1024px) {
	.btn-cmn-ja-c {
		line-height: 45px;
	}
	.btn-cmn-ja-c .btn-inner {
		padding: 0 48px 0 20px;
	}
	.btn-inner {
		padding: 0 86px 0 20px;
	}
	.btn-cmn-v .btn-inner, .btn-cmn-link .btn-inner {
		padding: 0 57px 0 20px;
	}
}
@media screen and (min-width:1160px) {
	[class^="btn-cmn"] {
		font-size: 1.5rem;
	}
}
/*info --------------------------------*/
.info .art-ttl-ja {
	font-size: 2rem;
	line-height: 1.6;
}
.info .art-txt-wrap {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.8;
	color: var(--sub01);
}
.info .art-txt-wrap a {
	color: var(--sub01);
	text-decoration: underline;
}
@media screen and (min-width:768px) {
	.info .art-inner {
		display: flex;
		justify-content: space-between;
	}
	.info .art-ttl-ja {
		width: 43%;
		max-width: 500px;
	}
	.info .art-txt-wrap {
		width: 50%;
		max-width: 580px;
		padding-top: 9px;
	}
}
@media screen and (min-width:1500px) {
	.info .art-ttl-ja {
		font-size: 3rem;
	}
	.info .art-txt-wrap p {
		font-size: 1.6rem;
	}
}
/*cj-online --------------------------------*/
.home .cj-online{
    background: var(--theme04);;
}
.cj-online-art-item {
	padding-top: 50px;
}
.cj-online-art-item a {
	display: block;
}
.cj-online-art-item .item-ttl {
    padding: 0 30px;
}
.cjo-pic-wrap {
	margin: 0 -30px;
	position: relative;
}
.cjo-pic-wrap figure {
    margin: auto;
    width: 190px;
	height: 240px;
}
.cjo-pic-wrap .btn-cmn-ja-c {
	font-size: 1.4rem;
	position: absolute;
	right: 0;
	bottom: 0;
}
.cjo-pic-wrap [class^="btn-cmn"] {
	position: absolute;
	right: 0;
	bottom: 0;
}
@media screen and (min-width:415px) {
    .cj-online-art-item {
        margin: auto;
        max-width: 360px;
    }
}
@media screen and (min-width:768px) {
    .cj-online-art-item .item-ttl {
        padding: 0;
    }
    .cj-online-art-item {
        max-width: inherit;
    }
}
@media screen and (min-width:1500px) {
	.cjo-pic-wrap .btn-cmn-ja-c {
		font-size: 1.5rem;
	}
}
/*materials btn --------------------------------*/
.m-btn-item a {
	padding: 16px 20px;
	margin-bottom: 25px;
	background: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	border: 2px solid #222;
	display: block;
	position: relative;
}
.m-btn-item a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
}
.m-btn-list .m-btn-item:last-of-type a {
	margin-bottom: 0;
}
@media screen and (min-width:768px) {
	/*cj-online --------------------------------*/
	.cj-online-art-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.cj-online-art-item {
		width: 30.7%;
	}
    .cj-online-art-item:nth-of-type(4) {
        margin-top: 0;
    }
	.cjo-pic-wrap figure {
        width: inherit;
		height: 0;
    	padding-bottom: 126%;
	}
	.cjo-pic-wrap {
		margin: 0;
	}
	/*materials btn --------------------------------*/
	.m-btn-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.m-btn-item {
		width: 19%;
	}
	.m-btn-item a {
		padding: 16px 10px;
		font-size: 1rem;
		margin-bottom: 0;
	}
	.m-btn-item a::after {
		right: 10px;
	}
}
@media screen and (min-width:1024px) {
	.m-btn-item {
		max-width: 212px;
	}
	.m-btn-item a {
		font-size: 1.4rem;
	}
}
@media screen and (min-width:1060px) {
	.m-btn-item a {
		font-size: 1.1rem;
	}
}
@media screen and (min-width:1280px) {
	.m-btn-item {
		width: 19%;
	}
	.m-btn-item a {
		font-size: 1.4rem;
	}
}
@media screen and (min-width:1500px) {
	.m-btn-item {
		width: 18.2%;
	}
	.m-btn-item a {
		padding: 20.5px 20px;
		font-size: 1.5rem;
	}
	.m-btn-item a::after {
		right: 20px;
	}
}
/*art-item --------------------------------*/
[class$="art-item"] figure {
	margin-bottom: 12px;
}
.item-ttl {
	margin-top: 13px;
	font-size: 3rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}
.item-ttl-ja, .item-txt-ja {
	font-size: 1.5rem;
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Verdana, Meiryo, sans-serif;
	line-height: 1.6;
	color: var(--sub01);
	margin-top: 8px;
}
.item-ttl-ja {
	display: block;
}
@media screen and (min-width:768px) {
	.item-ttl {
		font-size: 2.4rem;
	}
}
@media screen and (min-width:1024px) {
	.item-ttl {
		font-size: 3rem;
	}
}
@media screen and (min-width:1500px) {
	.item-ttl {
		font-size: 3.5rem;
	}
}
/*footer --------------------------------*/
footer {
	background: var(--theme02);
}
.footer-inner {
	padding: 50px 30px 80px;
	max-width: 1160px;
	margin: auto;
}
footer .site-logo {
	width: 156px;
	margin: 0 auto 25px;
}
footer .sns {
	margin-bottom: 40px;
}
.footer-nav {
	font-size: 1.5rem;
	text-align: center;
}
.footer-nav li {
	margin-bottom: 25px;
}
.footer-nav li:last-of-type {
	margin-bottom: 50px;
}
.footer-nav a {
	color: var(--sub01);
}
.copyright {
	text-align: center;
}
.copyright small {
	font-family: 'Roboto', sans-serif;
	font-size: 1.3rem;
	font-weight: 300;
	color: var(--sub01);
}
@media screen and (min-width:768px) {
	.footer-inner {
		display: flex;
		justify-content: space-between;
	}
	footer .site-logo {
		margin: 0;
	}
	footer .sns {
		display: none;
	}
	.footer-nav {
		margin: 30px 0 25px;
	}
	.footer-nav {
		display: flex;
	}
	.footer-nav li {
		margin: 0 0 0 40px;
	}
	.footer-nav li:last-of-type {
		margin-bottom: 0;
	}
	.copyright {
		text-align: right;
	}
}
@media screen and (min-width:1060px) {
	.footer-inner {
		padding: 100px 30px;
	}
}
@media screen and (min-width:1160px) {
	.footer-inner {
		padding: 100px 0;
	}
}
/*hover --------------------------------*/
p[class^="btn-cmn"] .btn-inner,#select_stone ol li {
	transition: .5s cubic-bezier(0.215,0.61,0.355,1);
}
.zoom-in, .zoom-in-no-fit {
	overflow: hidden;
}
.zoom-in img, .zoom-in-no-fit img {
	transition: .7s cubic-bezier(0.215,0.61,0.355,1);
}
@media screen and (min-width:1060px) {
	.btn-inner:hover {
		background: #fff;
		color: #222;
	}
	.btn-inner:hover::after {
		border-top: 1px solid #222;
		border-right: 1px solid #222;
	}
	.btn-cmn-link a:hover::after, .btn-cmn-ja-link a:hover::after {
		border: none!important;
	}
	.zoom-in:hover img {
		transform: translate(-50%, -50%) scale(1.2);
	}
	.zoom-in-no-fit:hover img {
		transform: scale(1.2);
	}
/*	custom jewelry  --------------------------------*/
	#select_stone ol li:hover {
		background-color: var(--theme01);
	}
}
/*fade --------------------------------*/
.fade-in-scroll,
.fade-in-scroll-load {
    opacity: 0;
}
.fade-in-scroll.move,
.fade-in-scroll-load.move-cover {
    animation: fadeInup .7s cubic-bezier(0.215,0.61,0.355,1) forwards;
}
@keyframes fadeInup {
    0% {
        transform:translateY(30px);
        opacity:0
    }
    100% {
        transform:translateY(0px);
        opacity:1
    }
}
.fade-in-list .fade-in-scroll:nth-of-type(2) {
    animation-delay: .15s;
}
.fade-in-list .fade-in-scroll:nth-of-type(3) {
	animation-delay: .3s;
}
.fade-in-list .fade-in-scroll:nth-of-type(4) {
	animation-delay: .45s;
}
.fade-in-list .fade-in-scroll:nth-of-type(5) {
	animation-delay: .6s;
}
.fade-in-list .fade-in-scroll:nth-of-type(6) {
	animation-delay: .75s;
}
.cover-pic, .cover-pic-scroll {
	overflow: hidden;
	position: relative;
}
.cover-pic::before, .cover-pic-scroll::before {
	content: "";
	background: var(--theme03);
	position: absolute;
	top: 0;
	left: -40%;
	z-index: 10;
	width: 180%;
	height: 100%;
	transform-origin: left top;
	transform: skewX(15deg) scale(1, 1);
	transition: 2s cubic-bezier(0.215,0.61,0.355,1) 1.5s;
}
.cover-pic-scroll::before {
	transition: 2s cubic-bezier(0.215,0.61,0.355,1) 0s;
}
.cover-pic.move-cover::before, .cover-pic-scroll.move::before {
	left: 130%;
	transform-origin: right top;
	transform: skewX(15deg) scale(0, 1);
}