@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text&display=swap');

/***********************************
 reset
***********************************/
@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium");
}
*, html, body, div, dl, dt, dd, ul, ol, li, header, footer, nav,section,
h1, h2, h3, h4, h5, h6, form, input, textarea, p{
	margin: 0;
	padding: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	letter-spacing: 0.02em;
}
html, body{
	font-size: 16px;
}

@media screen and (max-width: 750px) {
	html, body{
		font-size: 3.4vw;
		-webkit-text-size-adjust: 100%;
		touch-action: manipulation;
	}
}

dl, ul, ol{
	list-style-type: none;
}
html{
	overflow: unset;
	height: auto;
	min-height: 100%;
}
a{
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: all .8s;
	transition: all .8s;
}
a:hover{
	color: #c79f62;
}
a img{
	-webkit-transition: all .8s;
	transition: all .8s;
}
a:hover img{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

/***********************************
 base
***********************************/
body{
	position: relative;
	min-width: 1250px;
	height: 100vh;
	min-height: 100%;
	line-height: 1.5em;
	color: #000000;
	text-align: left;
}
article{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 70px;
	width: 100%;
	height: auto;
	overflow: hidden;
}
article.bg{
	background: #eef2fa;
}

section,
div.container{
	clear: both;
	position: relative;
	margin: 0 auto;
}
section{
	padding: 60px 0;
	max-width: 960px;
}
section#orderBox{
	max-width: 1250px;
}
div.container{
	width: 1250px;
}

h2 + article,
h2 + article section{
	padding-top: 0;
}

@media screen and (max-width: 750px) {
	body{
		min-width: 100%;
		letter-spacing: 0;
	}
	article{
		padding: 5.3vw 0 9.3vw;
	}
	article + article{
		padding-top: 0;
	}
	article + article.bg{
		margin-top: 15.3vw;
	}

	section{
		padding: 15.3vw 0;
		max-width: calc(100% - 13.3vw);
	}
	section#orderBox{
		padding: 8vw  0 15.3vw;
		max-width: calc(100% - 4vw);
	}
	section:last-child{
		padding-bottom: 0;
	}
	div.container{
		padding: 0 6.5vw;
		width: calc(100% - 13.3vw);
	}
}

main{
	width: 100%;
	overflow: hidden;
}

/***********************************
 others
***********************************/
ul.caution{
	margin: 0.5em 0 0 1.2em;
	text-align: left;
}
ul.caution li{
	position: relative;
}
ul.caution li::before {
	position: absolute;
	left: -1.2em;
	display: block;
	content: "※";
}
input + ul.caution{
	margin: 0.4em 0 0 2em;
}

ol{
	list-style-type: decimal;
	margin-left: 1.5em;
	text-align: left;
}
ol ol{
	list-style-type: upper-roman;
}
ul.disc{
	list-style-type: disc;
	margin-left: 1.5em;
	text-align: left;
}

.txtAC{
	text-align: center;
}
.txtAR{
	text-align: right;
}
img.txtAC{
	display: block;
	margin: auto;
}

ul.sns{
	height: 48px;
}
ul.sns li{
	float: left;
	display: inline-block;
	margin: 0 31px 0 0;
	height: 48px;
}
ul.sns li:last-child{
	margin: 0;
}
ul.sns li a{
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-indent: -9999px;
	height: 100%;
}
ul.sns li a.line{ background-image: url(/images/btnSnsLine.png); width: 48px; }
ul.sns li a.facebook{ background-image: url(/images/btnSnsFacebook.png); width: 26px;}
ul.sns li a.twitter{ background-image: url(/images/btnSnsTwitter.png); width: 31px;}
ul.sns li a.instagram{ background-image: url(/images/btnSnsInstagram.png); width: 48px;}
/* ul.sns li a:hover.line{ background-image: url(/images/btnSnsLineOn.png);} */
ul.sns li a:hover.facebook{ background-image: url(/images/btnSnsFacebookOn.png);}
ul.sns li a:hover.twitter{ background-image: url(/images/btnSnsTwitterOn.png);}
/* ul.sns li a:hover.instagram{ background-image: url(/images/btnSnsInstagramOn.png);} */

img.shadowR{
	box-shadow: 10px 10px #fae5c4;
}
img.shadowL{
	box-shadow: -10px 10px #fae5c4;
}
article.bg img.shadowR{
	box-shadow: 10px 10px #d2dce8;
}
article.bg img.shadowL{
	box-shadow: -10px 10px #d2dce8;
}

@media screen and (max-width: 750px) {
	ul.sns li a.line{ background-image: url(/images/btnSnsLine.png); width: 10vw; }
	ul.sns li a.facebook{ background-image: url(/images/btnSnsFacebook_sp.png); width: 4.9vw;}
	ul.sns li a.twitter{ background-image: url(/images/btnSnsTwitter_sp.png); width: 6vw;}
	ul.sns li a.instagram{ background-image: url(/images/btnSnsInstagram.png); width: 10vw;}
	/* ul.sns li a:hover.line{ background-image: url(/images/btnSnsLineOn_sp.png);} */
	ul.sns li a:hover.facebook{ background-image: url(/images/btnSnsFacebookOn_sp.png);}
	ul.sns li a:hover.twitter{ background-image: url(/images/btnSnsTwitterOn_sp.png);}
	/* ul.sns li a:hover.instagram{ background-image: url(/images/btnSnsInstagramOn_sp.png);} */

	img.shadowR{
		box-shadow: 2.6vw 2.6vw #fae5c4;
	}
	img.shadowL{
		box-shadow: 2.6vw 2.6vw #fae5c4;
	}
	article.bg img.shadowR{
		box-shadow: 2.6vw 2.6vw #d2dce8;
	}
	article.bg img.shadowL{
		box-shadow: 2.6vw 2.6vw #d2dce8;
	}
}

/***********************************
 header, footer
***********************************/
header, footer{
	clear: both;
	position: relative;
	width: 100%;
	display: block;
}

header{
	height: 125px;
	border-bottom: solid 1px #cdcdcd;
}
header a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0.87em;
}

header p{
	height: 40px;
	background-color: #c79f62;
	line-height: 40px;
	color: #ffffff;
	text-align: center;
	font-size: 0.87em;
}

header h1{
	position: relative;
	top: 25px;
	width: 180px;
	height: 38px;
}
header h1 a{
	background: url(/images/logo.png) no-repeat center;
	text-indent: -9999px;
}

header ul#header_info{
	position: absolute;
	top: 25px;
	right: 50px;
}
header ul#header_info li{
	display: inline-block;
	height: 42px;
}
header ul#header_info li a.cart{
	width: 42px;
	height: 42px;
	background: url(/images/btnCart.png) no-repeat center #000000;
	border-radius: 50%;
}
header ul#header_info li a.cart.on,
header ul#header_info li a.cart:hover{
	background-color: #df0d52;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

@media screen and (max-width: 750px) {
	header{
		height: 28vw;
	}

	header p{
		height: 8vw;
		line-height: 8vw;
		font-size: 3.2vw;
	}

	header h1{
		top: 5.3vw;
		left: 0;
		width: 40vw;
		height: 10vw;
	}
	header h1 a{
		background: url(/images/logo_sp.png) no-repeat center;
		background-size: contain;
	}

	header ul#header_info{
		top: 6vw;
		right: 16vw;
	}
	header ul#header_info li{
		height: 8vw;
	}
	header ul#header_info li a.cart{
		width: 8vw;
		height: 8vw;
		background: url(/images/btnCart_sp.png) no-repeat center #000000;
		background-size: 44%;
	}
}

footer{
	margin: 40px 0 0;
	background-image: linear-gradient(#ffffff 28px, #eef2fb 28px, #eef2fb 570px, #ffffff 570px);
}
footer div.container:nth-child(2){
	padding-top: 38px;
}

footer ul.btnBoxContact + p{
	margin: 20px auto 150px;
	width: 845px;
	font-size: 0.875em;
}

footer #footerLogo{
	float: left;
	margin: 0 230px 0 0;
	width: 188px;
}
footer #footerLogo img{
	display: block;
	margin: 16px 0 35px;
	width: 188px;
	height: 140px;
}

footer #footerLogo ul.sns{
	height: 34px;
}
footer #footerLogo ul.sns li{
	margin: 0 30px 0 30px;
	height: 48px;
}
footer #footerLogo ul.sns li:last-child{
	margin: 0;
}
footer ul.sns li a.line{ width: 48px; }
footer ul.sns li a.facebook{ width: 22px;}
footer ul.sns li a.twitter{ width: 26px;}
footer ul.sns li a.instagram{ width: 48px;}

footer nav#footerNav{
	float: left;
	display: block;
	width: calc(100% - 418px);
}
footer nav#footerNav ul{
	float: left;
	display: block;
	margin: 0 0 0 40px;
	width: calc(25% - 10px);
}
footer nav#footerNav ul:nth-child(1){
	width: calc(25% - 45px);
}
footer nav#footerNav ul:nth-child(2){
	width: calc(25% - 105px);
}
footer nav#footerNav ul:last-child::after{
	clear: both;
	display: block;
	content: "";
}
footer nav#footerNav ul li{
	margin: 6px 0;
}
footer nav#footerNav ul li a{
	display: block;
	padding: 4px 5px;
	line-height: 1.5em;
	text-decoration: none;
	font-family: 'Shippori Mincho', serif;
	font-size: 14px;
}

footer div.card{
	clear: both;
}
footer div.card img{
	display: block;
	float: right;
	margin: 60px 0 20px;
	width: 354px;
	height: 71px;
}

footer #copyright{
	clear: both;
	padding: 15px 0 20px;
	text-align: right;
	font-family: 'Libre Caslon Text', serif;
	font-size: 10px;
	border-top: solid 1px #cdcdcd;
}

@media screen and (max-width: 750px) {
	footer{
		margin: 17vw 0 0;
		background-image: linear-gradient(#ffffff 5vw, #eef2fb 5vw, #eef2fb 154vw, #ffffff 154vw);
	}
	footer div.container:nth-child(2){
		padding-top: 5vw;
	}
	
	footer ul.btnBoxContact + p{
		margin: 2.6vw auto 15vw;
		width: 100%;
	}

	footer #footerLogo{
		float: none;
		margin: 0 auto;
		width: 44.9vw;
		height: 48vw;
		background: url(/images/logoBig_sp.png) no-repeat center top;
		background-size: contain;
	}
	footer #footerLogo::after{
		clear: both;
		display: block;
		content: "";
	}
	footer #footerLogo img{
		display: none;
	}

	footer #footerLogo ul.sns{
		padding: 42vw 0 0 8vw;
		height: 10vw;
	}
	footer #footerLogo ul.sns li{
		margin: 0 8vw 0 0;
		height: 10vw;
	}
	footer ul.sns li a.line{ width: 10vw; }
	footer ul.sns li a.facebook{ width: 4.9vw;}
	footer ul.sns li a.twitter{ width: 6vw;}
	footer ul.sns li a.instagram{ width: 10vw;}

	footer nav#footerNav{
		clear: both;
		position: relative;
		float: none;
		padding: 10.6vw 0.6vw 6vw;
		width: 100%;
		height: 97.5vw;
	}
	footer nav#footerNav::after{
		clear: both;
		display: block;
		content: "";
	}
	footer nav#footerNav ul:nth-child(n){
		float: none;
		width: 50%;
		margin: 0;
	}
	footer nav#footerNav ul:nth-child(3){
		position: absolute;
		top: 10.6vw;
		left: 50%;
	}
	footer nav#footerNav ul:nth-child(4){
		position: absolute;
		top: 72.9vw;
		left: 50%;
	}
	footer nav#footerNav ul li{
		margin: 0;
		padding: 1.2vw 0;
	}
	footer nav#footerNav ul li a{
		padding: 0;
		height: 6.5vw;
		line-height: 6.5vw;
		font-size: 0.875em;
	}
	
	footer div.card{
		margin: 10vw 0;
		height: 16.8vw;
		background: url(/images/infoCard_sp.png) no-repeat center;
		background-size: contain;
	}
	footer div.card img{
		display: none;
	}

	footer #copyright{
		padding: 6vw 0;
		text-align: center;
		font-size: 0.8em;
	}
}

/***********************************
 nav
***********************************/
nav#globalNav{
	position: absolute;
	top: 20px;
	left: 420px;
	right: 110px;
	height: 50px;
	text-align: center;
}
nav#globalNav ul li{
	display: inline-block;
	margin: 0 15px;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
}
nav#globalNav ul li a{
	padding: 0 5px;
	font-family: 'Shippori Mincho', serif;
}

@media screen and (max-width: 750px) {
	nav#globalNav{
		display: none;
	}
}

/* dwWrap */

#dwWrap{
	display: table;
	width: 100%;
	height: 100vh;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
}

#dwWrap__inner{
	display: table-cell;
}
/* drawer menu */
.drawer-menu{
	display: none;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 100px 0 0;
	background: #ffffff;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
//	-webkit-transform: perspective(500px) rotateY(-90deg);
//	transform: perspective(500px) rotateY(-90deg);
	opacity: 0;
}
.drawer-menu nav{
	margin: auto;
	width: 1000px;
}
.drawer-menu nav ul.menu{
	float: left;
	margin: 10px;
}
.drawer-menu nav ul.menu:nth-child(1){
	width: calc(24% - 20px);
}
.drawer-menu nav ul.menu:nth-child(2){
	width: calc(20% - 20px);
}
.drawer-menu nav ul.menu:nth-child(3),
.drawer-menu nav ul.menu:nth-child(4){
	width: calc(28% - 20px);
}
.drawer-menu nav ul.menu li{
	margin: 6px 0 15px;
	text-align: left;
}
.drawer-menu nav ul.menu li a{
	display: block;
	padding: 4px 5px;
	line-height: 1.5em;
	text-decoration: none;
	font-family: 'Shippori Mincho', serif;
}

.drawer-menu nav ul.sns{
	float: left;
	margin: 30px 0 0 15px;
}

@media screen and (max-width: 750px) {
	.drawer-menu{
		padding: 24vw 0 13.3vw;
		height: auto;
		min-height: 100%;
	}
	.drawer-menu nav{
		width: calc(100% - 13.3vw);
	}
	.drawer-menu nav ul.menu{
		position: relative;
		float: none;
		margin: 0 0 13.3vw;
	}
	.drawer-menu nav ul.menu::after{
		position: absolute;
		bottom: -6.6vw;
		left: 0;
		display: block;
		width: 26.6vw;
		border-bottom: solid 2px #cdcdcd;
		content: "";
	}
	.drawer-menu nav ul.menu:nth-child(n){
		width: 100%;
	}
	.drawer-menu nav ul.menu li{
		margin: 1.3vw 0 4vw;
	}
	.drawer-menu nav ul.menu li a{
		padding: 0;
	}

	.drawer-menu nav ul.sns{
		float: none;
		margin: 0 auto 4vw;
		padding: 2.6vw 0 0 15vw;
		width: 44.8vw;
		height: 10vw;
	}
	.drawer-menu nav ul.sns li{
		margin: 0 8vw 0 0;
		height: 10vw;
	}
	.drawer-menu nav ul.sns li:last-child{
		margin: 0;
	}
}

/* checkbox */
.dwCheck{
	display: none;
}

/* menu button - label tag */
.menu-btn{
	position: absolute;
	top: 65px;
	right: calc(50% - 625px);
	display: block;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 3;
}

.bar{
	position: absolute;
	top: 14px;
	left: 12px;
	display: block;
	width: 15px;
	height: 1px;
	background: #000000;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}
.bar.middle{
	top: 20px;
	opacity: 1;
}
.bar.bottom{
	top: 26px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
.menu-btn__text{
	position: absolute;
	bottom: -13px;
	left: 0;
	right: 0;
	margin: auto;
	color: #666666;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: none;
	visibility: visible;
	opacity: 1;
}
.menu-btn:hover .bar{
	background: #c79f62;
}
.menu-btn:hover .menu-btn__text{
	color: #c79f62;
}
.close-menu{
	position: fixed;
	top: 730px;
	width: 100%;
	height: 100vh;
//	background: rgba(0,0,0,0);
	background: #ffffff;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
//	opacity: 0;
}

@media screen and (max-width: 750px) {
	.menu-btn{
		top: 16.6vw;
		right: 6.6vw;
		width: 4.2vw;
		height: 4.2vw;
	}

	.bar{
		top: 0;
		left: 0;
		width: 4.2vw;
		height: 0.2vw;
	}
	.bar.middle{
		top: 1.6vw;
		opacity: 1;
	}
	.bar.bottom{
		top: 3.2vw;
	}
	.close-menu{
		display: none;
	}
}

/* checked */
.dwCheck:checked ~ .drawer-menu{
	position: absolute;
	display: block;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index: 2;
}
.dwCheck:checked ~ #dwWrap{
	overflow: auto;
	position:fixed;
	pointer-events: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
//	-webkit-transform: translateX(-300px);
//	-ms-transform: translateX(-300px);
//	transform: translateX(-300px);
}
.dwCheck:checked ~ .menu-btn .menu-btn__text{
	visibility: hidden;
	opacity: 0;
}
.dwCheck:checked ~ .menu-btn .bar.top{
	width: 24px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.dwCheck:checked ~ .menu-btn .bar.middle{
	opacity: 0;
}
.dwCheck:checked ~ .menu-btn .bar.bottom{
	width: 24px;
	top: 30px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.dwCheck:checked ~ .close-menu{
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
//	-webkit-transition-delay: .3s;
//	transition-delay: .3s;
//	background: rgba(255, 255, 255, 0.5);
	visibility: visible;
	opacity: 1;
	z-index: 3;
}

@media screen and (max-width: 750px) {
	.dwCheck:checked ~ .menu-btn .bar.top{
		width: 5.8vw;
	}
	.dwCheck:checked ~ .menu-btn .bar.bottom{
		top: 4vw;
		width: 5.8vw;
	}
}

/***********************************
 #pnList
***********************************/
ul#pnList li{
	float: left;
}
ul#pnList li:after{
	float: right;
	display: block;
	padding: 0 10px;
	content: ">";
	line-height: 1.5em;
}
ul#pnList li:last-child:after{
	display: none;
}
ul#pnList li a{
	display: inline-block;
	color: #242424;
	text-decoration: none;
}
ul#pnList li a:hover{
	color: #663399;
}

/***********************************
 h2, h3, h4
***********************************/
h2, h3, h4{
	font-weight: normal;
	font-family: 'Shippori Mincho', serif;
	line-height: 1.5em;
}

h2{
	height: 230px;
	text-indent: -9999px;
	background-position: center;
	background-repeat: no-repeat;
}
#concept h2{ background-image: url(/images/ttlConcept.png); }
#scene h2{ background-image: url(/images/ttlScene.png); }
#guide h2{ background-image: url(/images/ttlGuide.png); }
#item h2{ background-image: url(/images/ttlItem.png); }
#item.detail h2{ background-image: url(/images/ttlItemDetail.png); }
#order h2{ background-image: url(/images/ttlOrderForm.png); }
#order.designer h2{ background-image: url(/images/ttlOrder.png); }
#order.design h2{ background-image: url(/images/ttlOrder.png); }
#order.thanks h2{ background-image: url(/images/ttlOrderThanks.png); }
#cart h2{ background-image: url(/images/ttlCart.png); }
#faq h2{ background-image: url(/images/ttlFaq.png); }
#about h2{ background-image: url(/images/ttlAbout.png); }
#rules h2{ background-image: url(/images/ttlRules.png); }
#law h2{ background-image: url(/images/ttlLaw.png); }
#privacy h2{ background-image: url(/images/ttlPrivacy.png); }
#contact h2{ background-image: url(/images/ttlContact2.png); }

#home h2,
#home2024 h2{
	margin: 0 auto;
	padding: 130px 0 80px;
	height: auto;
	text-indent: 0;
	text-align: center;
	font-size: 36px;
	background-position: center 20px;
	background-repeat: no-repeat;
}
#home2024 h2{
	padding: 60px 0 70px;
}
#home h2#features{ background-image: url(/images/ttlBgFeatures.png); }
#home h2#pickUp{ background-image: url(/images/ttlBgPickUp.png); }
#home h2#instagram,
#home2024 h2#instagram{ background-image: url(/images/ttlInstagram.png); padding: 80px; text-indent: -9999px; }

@media screen and (max-width: 750px) {
	h2{
		height: 37.6vw;
		background-size: contain;
	}
	#concept h2{ background-image: url(/images/ttlConcept_sp.png); }
	#scene h2{ background-image: url(/images/ttlScene_sp.png); }
	#guide h2{ background-image: url(/images/ttlGuide_sp.png); }
	#item h2{ background-image: url(/images/ttlItem_sp.png); }
	#item.detail h2{ background-image: url(/images/ttlItemDetail_sp.png); }
	#order h2{ background-image: url(/images/ttlOrderForm_sp.png); }
	#order.designer h2{ background-image: url(/images/ttlOrder_sp.png); }
	#order.design h2{ background-image: url(/images/ttlOrder_sp.png); }
	#order.thanks h2{ background-image: url(/images/ttlOrderThanks_sp.png); }
	#cart h2{ background-image: url(/images/ttlCart_sp.png); }
	#faq h2{ background-image: url(/images/ttlFaq_sp.png); }
	#about h2{ background-image: url(/images/ttlAbout_sp.png); }
	#rules h2{ background-image: url(/images/ttlRules_sp.png); }
	#law h2{ background-image: url(/images/ttlLaw_sp.png); }
	#privacy h2{ background-image: url(/images/ttlPrivacy_sp.png); }
	#contact h2{ background-image: url(/images/ttlContact2_sp.png); }
	#home h2#instagram,
	#home2024 h2#instagram{
		padding: 9.2vw;
		text-indent: -9999px;
	}
	#home h2,
	#home2024 h2{
		padding: 27.2vw 0 9.2vw;
		background-position: center top;
		line-height: 1.8em;
		font-size: 6.4vw;
	}
	#home2024 h2{
		padding: 12vw 0 9.2vw;
	}
	#home h2#features{ background-image: url(/images/ttlBgFeatures_sp.png); background-size: 49%; }
	#home h2#pickUp{ background-image: url(/images/ttlBgPickUp_sp.png); background-size: 48%; }
}

h3{
	margin: 0 auto;
	padding: 20px 0 50px;
	text-align: center;
	font-size: 36px;
}

#home h3{
	margin: 0 0 40px;
	padding: 28px 0 0;
	height: 116px;
	background-position: left top;
	background-repeat: no-repeat;
	text-align: left;
	font-size: 28px;
}
#home h3#features1{ background-image: url(/images/ttl_bgFeatures1.png); }
#home h3#features2{ background-image: url(/images/ttl_bgFeatures2.png); }
#home h3#features3{ background-image: url(/images/ttl_bgFeatures3.png); }

h4,
#home2024 h3.underbar{
	clear: both;
	margin: 30px 0 40px;
	padding: 30px 0 40px;
	background: url(/images/bg_line.png) left bottom no-repeat;
	text-align: left;
	font-size: 28px;
}

@media screen and (max-width: 750px) {
	h3{
		padding: 2.7vw 0 6.7vw;
		line-height: 2em;
		font-size: 6.4vw;
	}

	#home h3{
		margin: 0 0 4.9vw;
		padding: 5.4vw 0 0;
		height: 23vw;
		line-height: 1.7em;
		font-size: 5.3vw;
		background-size: contain;
	}
	#home h3#features1{ background-image: url(/images/ttl_bgFeatures1_sp.png); }
	#home h3#features2{ background-image: url(/images/ttl_bgFeatures2_sp.png); }
	#home h3#features3{ background-image: url(/images/ttl_bgFeatures3_sp.png); }
	
	h4,
	#home2024 h3.underbar{
		margin: 0 0 6vw;
		padding: 4vw 0 5vw;
		background: url(/images/bg_line_sp.png) left bottom no-repeat;
		background-size: 10.5vw;
		line-height: 2em;
		font-size: 5.3vw;
	}
}

#home footer h3,
footer h3{
	margin: 0 0 70px;
	padding: 0;
	height: 80px;
	background: url(/images/ttlContact.png) center no-repeat;
	text-indent: -9999px;
}
#home footer h4,
footer h4{
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background: none;
}

@media screen and (max-width: 750px) {
	#home footer h3,
	footer h3{
		margin: 0 0 9.3vw;
		height: 14.7vw;
		background: url(/images/ttlContact_sp.png) center no-repeat;
		background-size: contain;
	}
	#home footer h4,
	footer h4{
		margin: 0 auto 4vw;
		line-height: 2em;
		font-size: 1.5em;
	}
}

/***********************************
 table
***********************************/
table{
	border-collapse: separate;
	border-spacing: 0 2px;
}
th{
	padding: 10px 20px;
	background: #fefaf4;
	border-bottom: solid 1px #c79f62;
	font-weight: normal;
}
td{
	padding: 10px 20px;
	border-bottom: solid 1px #c79f62;
}
table.tblC{
	margin: 0 auto;
}
table.tblWide{
	width: 100%;
}

table.priceTable{
	margin: 0 auto;
	border-collapse: collapse;
	border-top: solid 1px #c79f62;
	border-bottom: solid 1px #c79f62;
}
table.priceTable th,
table.priceTable td{
	padding: 10px 60px;
	background: none;
	border-bottom: dotted 1px #c79f62;
}
table.priceTable td{
	text-align: right;
}
table.priceTable tr:last-child th,
table.priceTable tr:last-child td{
	background: #fefaf4;
	border-top: double 1px #c79f62;
	border-bottom: none;
	font-size: 1.2em;
}

table.noBorder th,
table.noBorder td{
	padding: 5px 20px;
	background: none;
	border: none;
}

@media screen and (max-width: 750px) {
	th,
	td{
		display: block;
		padding: 0.6em 1em;
	}
	td{
		display: block;
		padding: 0.6em 1em 1em;
	}
	
	table.priceTable th,
	table.priceTable td{
		display: table-cell;
		padding: 0.5em 2em;
	}
	table.noBorder th,
	table.noBorder td{
		display: table-cell;
		padding: 5px 0;
	}
}

/***********************************
 .row, .column
***********************************/
.row{
	position: relative;
	display: -webkit-flex;
	display: flex;
	width: calc(100% + 80px);
	margin: 0;
}
.row:after{
	clear: both;
	display: block;
	content: "";
}
.row + .row{
	margin-top: 130px;
}
.row.shopItem + .row.shopItem{
	margin-top: 60px;
}
.column1,
.row .column2,
.row .column3-1,
.row .column3-2,
.row:not(#instaPreview) .column4-1,
.row:not(#instaPreview) .column4-3{
	display: block;
	float: left;
	margin: 0 80px 0 0;
}
.column1{ width: calc(100% - 80px); clear: both; }
.row .column2{ width: calc(50% - 80px); }
.row .column2.narrow{ width: calc(48% - 80px); }
.row .column2.wide{ width: calc(52% - 80px); }
.row .column3-1{ width: calc((100% /3) - 80px); }
.row .column3-2{ width: calc((100% /3) * 2 - 80px); }
.row:not(#instaPreview) .column4-1{ width: calc(25% - 80px); }
.row:not(#instaPreview) .column4-3{ width: calc(75% - 80px); }

@media screen and (max-width: 750px) {
	.row{
		display: block;
		width: 100%;
	}
	.row + .row{
		margin-top: 0;
	}
	.column1,
	.row .column2,
	.row .column2.narrow,
	.row .column2.wide,
	.row .column3-1,
	.row .column3-2{
		clear: both;
		float: unset;
		margin: 0 0 14.4vw;
		width: 100%;
	}
	.row:not(#instaPreview):has(.column4-3){
		display: flex;
		gap: 20px;
	}
	.row:not(#instaPreview):has(.column4-3)::after{
		display: none;
	}
	.row:not(#instaPreview):has(.column4-3) + .row{
		margin-top: 14vw;
	}
	.row:not(#instaPreview) .column4-1{ margin: 0; width: calc(25% - 15px); }
	.row:not(#instaPreview) .column4-3{ margin: 0; width: calc(75% - 5px); }

	.row.shopItem + .row.shopItem{
		margin-top: 10vw;
	}
	.row.shopItem .column3-2{
		margin-bottom: 0;
	}
}

.column1 img,
.row .column2 img,
.row .column3-1 img,
.row .column3-2 img,
.row:not(#instaPreview) .column4-1 img,
.row:not(#instaPreview) .column4-3 img{
	display: block;
	width: 100%;
}
column1,
.row img + img{
	margin-top: 40px;
}
@media screen and (max-width: 750px) {
	.row img + img{
		margin-top: 1em;
	}
}

/***********************************
 form
***********************************/
/*
form table th span,
span.required{
	color: red;
}
form table + p.memo{
	margin: 0 0 20px;
	text-align: left;
}
*/
label{
	display: inline-block;
	margin: 2px 0;
	padding: 3px 30px 3px 3px;
	cursor: pointer;
}
p.agreement{
	margin: auto;
	width: 17em;
	text-align: left;
}
p.agreement label{
	display: block;
	margin: 0 0 1em;
	padding: 3px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="color"],
textarea{
	margin: 0 5px;
	padding: 8px 10px;
	line-height: 1.3em;
	width: 80%;
	font-size: 1em;
}
input[type="text"].short{
	width: 150px;
}
input[type="text"].mini{
	width: 3.5em;
}
input[type="number"]{
	width: 100px;
}
input[type="date"]{
	width: 150px;
}
input[type="color"]{
	padding: 0;
	width: 100px;
}
textarea{
	width: 100%;
	height: 8em;
}

input[type="file"]{
	font-size: 1em;
}

input[type="radio"],
input[type="checkbox"]{
	margin: 0 5px;
	vertical-align: text-top;
	width: 18px;
	height: 18px;
	font-weight: bold;
	cursor: pointer;
}

select{
	margin: 0 5px;
	padding: 8px;
	cursor: pointer;
	font-size: 1em;
}

input[type="button"].btn,
input[type="submit"].btn{
	display: block;
	margin: 50px auto 0;
	padding: 20px;
	min-width: 300px;
	background: #e1e1e1;
	border: solid 1px #adadad;
	color: #374151;
	font-size: 1.1em;
	-webkit-transition: all .8s;
	transition: all .8s;
}
input[type="button"].btn:hover,
input[type="submit"].btn:hover{
	background: #c79f62;
	color: #ffffff;
	border: solid 1px #c79f62;
}
h3 + input[type="button"].btn{
	margin: 0 auto 2em;
}

input[type="button"].btn.sub{
	padding: 4px 20px;
	background: #eef2fb;
	border: solid 1px #adadad;
	font-size: 1em;
}
input[type="button"].btn.sub:hover{
	background: #adadad;
	color: unset;
	border: solid 1px #adadad;
}

input[type="button"].btn.zip{
	display: inline-block;
	margin: 0 0.8em;
	padding: 2px 10px;
	min-width: 100px;
	background: #eef2fb;
	border: solid 1px #adadad;
	border-radius: 4px;
	font-size: 0.8em;
	letter-spacing: -0.1em;
}
input[type="button"].btn.zip:hover{
	background: #adadad;
	color: unset;
}

/* placeholder */
textarea[name="detail"]::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder{
	color: #b3b3b3;
	line-height: 2em;
}
/* placeholder IE */
textarea[name="detail"]:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder{
	color: #b3b3b3;
	line-height: 2em;
}
/* placeholder Edge */
@supports (-ms-ime-align: auto){
	textarea[name="detail"]::-ms-input-placeholder,
	input[type="text"]::-ms-input-placeholder,
	input[type="email"]::-ms-input-placeholder,
	input[type="url"]::-ms-input-placeholder,
	input[type="password"]::-ms-input-placeholder,
	input[type="tel"]::-ms-input-placeholder{
		color: #b3b3b3;
		line-height: 2em;
		opacity: 1;
	}
}

@media screen and (max-width: 750px) {
	label{
		margin: 0.2em;
		padding: 0.2em 1.5em 0.2em 0.2em;
	}
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	textarea{
		margin: 0 0.1em;
		padding: 0.2em 0.5em;
		width: calc(100% - 1.2em);
		line-height: 1.4em;
	}
	input[type="text"].short{
		width: 8.5em;
	}
	input[type="number"]{
		width: 4em;
	}
	input[type="date"]{
		width: calc(100% - 1.2em);
		background: #ffffff;
		border: solid 1px #767676;
	}
	textarea{
		height: 8em;
	}

	input[type="radio"],
	input[type="checkbox"]{
		margin: 0.8vw 0.2em;
		width: 2.5vw;
		height: 2.5vw;
	}
	label input[type="radio"],
	label input[type="checkbox"]{
		margin: 0.8vw 0.8em 0.8vw -0.6em;
	}

	select{
		margin: 0 0.1em;
		padding: 0.2em 0.5em;
	}
	
	input[type="button"].btn,
	input[type="submit"].btn{
		margin: 10vw auto 0;
		padding: 1.5em 0.4em;
		min-width: 80%;
	}
	input[type="button"].btn.sub{
		padding: 0.5em 0.4em;
		min-width: 50%;
	}
	h3 + input[type="button"].btn{
		margin: 0 auto 1.5em;
	}
}

/***********************************
 .btn, .btnBox
***********************************/
a.emphasis{
	text-decoration: underline;
	color: #c79f62;
}
a.emphasis:hover{
	color: #8a6e44;
}

a.btn{
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
}
a.btn:hover{
	filter:alpha(opacity=70);
	opacity: 0.7;
}
a.btn.celebration{ background-image: url(/images/btnCelebration.png); width: 250px; height: 250px; }
a.btn.marriage{ background-image: url(/images/btnMarriage.png); width: 250px; height: 250px; }
a.btn.anniversary{ background-image: url(/images/btnAnniversary.png); width: 250px; height: 250px; }
a.btn.lineAdd{ background-image: url(/images/btnLineAdd.png); background-color: #06c755; width: 80%; height: 5em; }
@media screen and (max-width: 750px) {
	a.btn.celebration{ background-image: url(/images/btnCelebration_sp.png); width: 100%; height: 100%; }
	a.btn.marriage{ background-image: url(/images/btnMarriage_sp.png); width: 100%; height: 100%; }
	a.btn.anniversary{ background-image: url(/images/btnAnniversary_sp.png); width: 100%; height: 100%; }	
}

ul.btnBoxContact{
	clear: both;
	margin: auto;
	padding: 40px 0 0;
	width: 845px;
}
ul.btnBoxContact::after{
	clear: both;
	display: block;
	content: "";
}
ul.btnBoxContact li{
	float: left;
	display: block;
	margin: 0;
	width: 400px;
	height: 110px;
}
ul.btnBoxContact li:first-child{
	margin: 0 45px 0 0;
}
ul.btnBoxContact li:first-child a{
	display: block;
	width: 100%;
	height: 100%;
	background: url(/images/btnContactForm.png) center #000000 no-repeat;
	text-indent: -9999px;
}
ul.btnBoxContact li:first-child a:hover{
	background-color: #c79f62;
}
ul.btnBoxContact li:nth-child(2) img{
	display: block;
	width: 100%;
	height: 100%;
}
ul.btnBoxContact li:nth-child(3){
	display: none;
}
@media screen and (max-width: 750px) {
	ul.btnBoxContact{
		padding: 5.3vw 0;
		width: 100%;
	}
	ul.btnBoxContact li{
		float: none;
		margin: 0 auto;
		width: 100%;
		height: 26.6vw;
	}
	ul.btnBoxContact li:nth-child(2){
		display: none;
	}
	ul.btnBoxContact li:nth-child(3){
		display: block;
		margin-top: 4vw;
	}
	ul.btnBoxContact li:first-child a{
		background: url(/images/btnContactForm_sp.png) center #000000 no-repeat;
		background-size: 76%;
	}
	ul.btnBoxContact li:nth-child(3) a{
		display: block;
		width: 100%;
		height: 100%;
		background: url(/images/btnContctLine_sp.png) center #06c755 no-repeat;
		background-size: 60%;
		text-indent: -9999px;
	}
	ul.btnBoxContact li:nth-child(3) a:hover{
		background-color: #07e061;
	}
}

a.btnTxt{
	display: block;
	margin: 0 auto;
	background: #fefaf4;
	width: calc(100% - 4px);
	max-width: 270px;
	height: 80px;
	line-height: 80px;
	color: #c79f62;
	text-align: center;
	font-family: 'Shippori Mincho', serif;
	border: solid 2px #c79f62;
}
a.btnTxt:hover,
a.btnTxt:active{
	background: #c79f62;
	color: #ffffff;
}
@media screen and (max-width: 750px) {
	a.btnTxt{
		width: 69vw;
		max-width: 69vw;
		height: 18.1vw;
		line-height: 18.1vw;
		font-size: 3.7vw;
		border: solid 0.3vw #c79f62;
	}
}

/**********************************************************************
 
 page
 
**********************************************************************/
ul.shopItem{
	clear: both;
}
ul.shopItem li{
	float: left;
	width: calc((100% - 80px) / 3);
	margin: 0 40px 60px 0;
}
ul.shopItem li:nth-child(3n){
	margin: 0 0 60px;
}
#home .shopItem h3.name,
.shopItem h3.name,
ul.shopItem li h4.name{
	margin: 0;
	padding: 20px 0 0;
	background: none;
	height: auto;
	line-height: 1.4em;
	text-align: left;
	font-size: 24px;
}
#home .shopItem .column2 h3.name{
	padding: 55px 0 0;
}
#home .shopItem .column3-1 h3.name{
	padding: 25px 0 5px;
}
.shopItem h3.name span,
ul.shopItem li h4.name span{
	display: block;
	padding: 0px 0 5px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 14px;
}
.shopItem .itemPhoto{
	position: relative;
	height: 350px;
/*
	background: url(/images/photo_bg.png) center bottom no-repeat;
*/
	background-size: cover;
	overflow: hidden;
}
.shopItem .itemPhoto.big{
	height: 460px;
}
.shopItem .itemPhoto img{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	margin: auto;
	width: auto;
	max-width: 80%;
	max-height: 300px;
/*
	-webkit-box-reflect: below -15px url("/images/photo_reflect.png");
*/
}
.shopItem .itemPhoto.big img{
	bottom: 38px;
	max-height: 385px;
}
.shopItem p.category{
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 0 5px;
	min-width: 70px;
	height: 25px;
	line-height: 25px;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
}
.shopItem p.category.red{ background-color: #b53636; }
.shopItem p.category.white{ background-color: #bbbbbb; }
.shopItem p.category.rose{ background-color: #f28585; }
.shopItem p.category.sake{ background-color: #6156a5; }
.shopItem p.category.shochu{ background-color: #43915d; }
.shopItem p.price{
	display: inline-block;
	vertical-align: middle;
	font-family: 'Shippori Mincho', serif;
	font-size: 20px;
}
.shopItem p.price span{
	font-family: 'Shippori Mincho', serif;
	font-size: 14px;
}
.shopItem p.description{
	margin: 40px 0 0;
	padding: 40px 0 30px;
	background: url(/images/bg_line.png) left top no-repeat;
	font-size: 14px;
}
.shopItem p.description span{
	padding: 0 20px 0 0;
	font-weight: bold;
	font-size: 14px;
}
ul.shopItem li p.description{
	position: relative;
	height: 47px;
	overflow: hidden;
}
ul.shopItem li p.description::after{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	height: 25px;
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 30%);
	content: "";
}
@media screen and (max-width: 750px) {
	ul.shopItem li{
		float: none;
		width: 100%;
		margin: 0 0 18vw;
	}
	ul.shopItem li:nth-child(3n){
		margin: 0 0 18vw;
	}

	#home .shopItem h3.name,
	.shopItem h3.name,
	ul.shopItem li h4.name{
		margin: 0;
		padding: 4vw 0 0;
		background: none;
		height: auto;
		line-height: 1.4em;
		text-align: left;
		font-size: 4.8vw;
	}
	#home .shopItem .column2 h3.name{
		padding: 4vw 0 0;
	}
	.shopItem h3.name span,
	ul.shopItem li h4.name span{
		padding: 0.5vw 0 3vw;
		font-size: 2.9vw;
	}
	.shopItem .itemPhoto,
	.shopItem .itemPhoto.big{
		margin: 0;
		height: 86.6vw;
	}
	.shopItem .itemPhoto img,
	.shopItem .itemPhoto.big img{
		bottom: 7vw;
		max-height: 71.6vw;
	}
	.shopItem p.category{
		margin: 0 1em 0 0;
		padding: 0 1.3vw;
		min-width: 20vw;
		height: 1.5em;
		line-height: 1.6em;
		font-size: 1em;
	}
	.shopItem p.price{
		font-size: 1.3em;
	}
	.shopItem p.price span{
		font-size: 0.75em;
	}
	.shopItem p.description{
		margin: 5.5vw 0 0;
		padding: 6vw 0 8vw;
		background: url(/images/bg_line_sp.png) left top no-repeat;
		background-size: 10.5vw;
		font-size: 1em;
	}
	.shopItem p.description span{
		padding: 0 1em 0 0;
		font-size: 0.8em;
	}
	ul.shopItem li p.description{
		height: 3.3em;
	}
	ul.shopItem li p.description::after{
		height: 2.5em;
	}
}

.spOpen{
	display: none;
}
br.spBr{
	display: none;
}
@media screen and (max-width: 750px) {
	.spReverse{
		flex-direction: column-reverse;
		display: flex;
	}
	.spClose{
		display: none;
	}
	.spOpen{
		display: block;
	}
	br.spBr{
		display: block;
	}
}

/***********************************
 #mainimage
***********************************/
#mainimage{
	height: 650px;
	overflow: hidden;
}
#home2024 #mainimage{
	position: relative;
	background: url(/images/mv_bg.png) no-repeat calc(50% - 220px) -126px #bdd1f2;
	height: 800px;
}
#home2024 #mainimage::after{
	position: absolute;
	top: 0;
	left: calc(50% - 70px);
	display: block;
	background: url(/images/mv.png) no-repeat center;
	width: 720px;
	height: 800px;
	content: "";
}
#home2024 #mainimage p{
	position: absolute;
	top: 110px;
	right: calc(50% + 70px);
	background: url(/images/mv_txt.png) no-repeat center;
	width: 540px;
	height: 600px;
	text-indent: -9999px;
}
@media screen and (max-width: 750px) {
	#mainimage{
		background: url(/images/main01_sp.png) no-repeat center;
		background-size: cover;
		height: 154vw;
	}
	#mainimage ul{
		display: none;
	}
	#home2024 #mainimage{
		background-size: 70%;
		background-position: -10% top;
		height: unset;
	}
	#home2024 #mainimage::after{
		top: 10%;
		left: 45%;
		background-size: contain;
		background-position: left center;
		height: 80%;
		filter: opacity(0.9);
	}
	#home2024 #mainimage p{
		position: relative;
		top: 0;
		right: unset;
		margin: 50px 10px;
		background: url(/images/mv_txt_sp.png) no-repeat center;
		background-size: contain;
		width: 70%;
		min-width: 340px;
		height: 400px;
		filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.8));
		z-index: 1;
	}
}

/*
#mainimage .slide li{
	display: block;
	width: 100%;
	height: 650px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#mainimage .slide li:nth-child(1){ background-image: url(/images/main01.jpg);}
#mainimage .slide li:nth-child(2){ background-image: url(/images/main02.jpg);}
#mainimage .slide li:nth-child(3){ background-image: url(/images/main03.jpg);}
#mainimage .slide li:nth-child(4){ background-image: url(/images/main04.jpg);}

@media screen and (max-width: 640px) {
	#mainimage .slide li{
		height: 230px;
	}
	#mainimage .slide li:nth-child(1){ background-image: url(/images/main01sp.jpg);}
	#mainimage .slide li:nth-child(2){ background-image: url(/images/main02sp.jpg);}
	#mainimage .slide li:nth-child(3){ background-image: url(/images/main03sp.jpg);}
	#mainimage .slide li:nth-child(4){ background-image: url(/images/main04sp.jpg);}
}
*/

/***********************************
 home2024
***********************************/
#home2024 section#aboutWine{
	padding: 0;
}
#home2024 #aboutWine .row .column4-1 img{
	margin: auto;
	width: 76px;
	transform: rotate(-10deg);
}
#home2024 #aboutWine .row + .row .column4-1 img{
	margin: auto;
	width: 76px;
	transform: rotate(10deg);
}
#home2024 #aboutWine .row .column4-3 p{
	margin-top: 1.5em;
}
#home2024 #aboutWine .row + .row{
	margin-top: 80px;
}
@media screen and (max-width: 750px) {
	#home2024 #aboutWine .row .column4-1 img{
		margin-top: 20px;
		width: 65px;
		transform: rotate(-5deg);
	}
	#home2024 #aboutWine .row + .row .column4-1 img{
		transform: rotate(5deg);
	}
}

#home2024 #orderBox a.imgChenge img{
	display: block;
	margin: auto;
	max-width: 90%;
}
#home2024 #orderBox #orderMenu{
	display: flex;
	gap: 0 20px;
	margin: 120px auto 0;
	width: 960px;
	height: 120px;
}
#home2024 #orderBox #orderMenu li{
	position: relative;
	width: calc(50% - 10px);
	text-align: center;
}
#home2024 #orderBox #orderMenu li a{
	display: block;
	margin: 10px auto 0;
	padding: 1.2em 0 0;
	background: #c79f62;
	width: calc(100% - 20px);
	height: calc(100px - 1.2em);
	font-weight: normal;
    font-family: 'Shippori Mincho', serif;
}
#home2024 #orderBox #orderMenu li a:hover:not(.on){
	background: #3a3a3a;
	color: #ffffff;
}
#home2024 #orderBox #orderMenu li a.on{
	margin: 0;
	border-top: solid 10px #c79f62;
	background: #3a3a3a;
	width: 100%;
	height: calc(110px - 1.2em);
	color: #ffffff;
}
#home2024 #orderBox #orderMenu li a span{
	display: block;
	margin: 0.8rem 0 0;
	font-weight: normal;
    font-family: 'Shippori Mincho', serif;
	font-size: 1.5em;
}
#home2024 #orderBox #orderMenu li p{
	position: absolute;
	bottom: 105px;
	display: block;
	text-indent: -9999px;;
}
#home2024 #orderBox #orderMenu li:first-child p{
	left: 20px;
	background: url(/images/img2024price1.png) no-repeat center /contain;
	width: 236px;
	height: 57px;
}
/*
#home2024 #orderBox #orderMenu li:last-child p{
	right: 20px;
	background: url(/images/img2024price2.png) no-repeat center;
	width: 205px;
	height: 82px;
}
*/
#home2024 #orderBox #selectBox{
	position: relative;
	padding: 10px 0 0;
}
#home2024 #orderBox #selectBox::before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	border-top: solid 3px #3a3a3a;
	content: "";
}
#home2024 #orderBox #selectBox #select1,
#home2024 #orderBox #selectBox #select2{
	padding: 30px 50px 80px;
	background: #eefbf6;
}
#home2024 #orderBox #selectBox #select2{
	background: #f6edfa;
}
#home2024 #orderBox #selectBox #select1 h3.underbar{
	margin-top: 0;
	padding-top: 0;
}
#home2024 #orderBox #selectBox #select1 ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#home2024 #orderBox #selectBox #select1 ul li{
	width: calc(25% - 15px);
	aspect-ratio: 7 / 7;
	
}
#home2024 #orderBox #selectBox #select1 ul li a{
	position: relative;
	display: block;
	height: 100%;
	font-size: 0.9em;
}
#home2024 #orderBox #selectBox #select1 ul li a img{
	position: absolute;
	top: 1em;
	bottom: 2.7em;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	width: auto;
	max-width: 100%;
	max-height: calc(100% - 3.7em);
}
#home2024 #orderBox #selectBox #select1 ul li a span.name{
	position: absolute;
	bottom: 0;
	left: 1.7em;
	right: 1.7em;
	display: block;
	height: 1.8em;
	line-height: 1.1em;
	overflow: hidden;
}
#home2024 #orderBox #selectBox #select1 ul li a span.name::after{
	position: absolute;
	bottom: 0;
	display: block;
	background: linear-gradient(rgba(0,0,0,0),rgba(238,251,246,1));
	width: 100%;
	height: 0.7em;
	content: "";
}
#home2024 #orderBox #selectBox #select1 ul li a span.tag,
.shopItem span.tag{
	position: relative;
	display: inline-block;
	margin: 0 3px 2px 0;
	padding: 0 5px;
	color: #ffffff;
	letter-spacing: -0.05em;
}
#home2024 #orderBox #selectBox #select1 ul li a span.tag.tag1,
.shopItem span.tag.tag1{
	background: #2674c7;
}
#home2024 #orderBox #selectBox #select1 ul li a span.tag.tag2,
.shopItem span.tag.tag2{
	background: #c77926;
}
#home2024 #orderBox #selectBox #select1 ul li a span.tag.tag3,
.shopItem span.tag.tag3{
	background: #26c728;
}
#home2024 #orderBox #selectBox #select1 ul li a span.tag.tag4,
.shopItem span.tag.tag4{
	background: #c726c4;
}

#home2024 #orderBox #selectBox #select2 .info{
	display: flex;
	justify-content: center;
	gap: 0 50px;
	padding: 0 0 50px;
}
#home2024 #orderBox #selectBox #select2 .info img{
	display: block;
	max-width: 100%;
}
#home2024 #orderBox #selectBox #select2 .info h3{
	margin-top: 20px;
	padding: 0 0 40px;
	font-size: 36px;
}

#home2024 #orderBox #selectBox .priceBox,
#item .shopItem .priceBox{
	position: relative;
	display: inline-block;
	padding: 2.5em 1em 1em;
	background: #ffffff;
	border: solid 1px #b6b1b8;
}
#home2024 #orderBox #selectBox .priceBox::after,
#item .shopItem .priceBox::after{
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	background: url(/images/img2024price-ribbon.png) no-repeat;
	width: 83px;
	height: 25px;
	content: "";
}
#home2024 #orderBox #selectBox .priceBox * + dt,
#item .shopItem .priceBox * + dt{
	padding: 1em 0 0;
}
#home2024 #orderBox #selectBox .priceBox dd,
#item .shopItem .priceBox dd{
	padding: 0 0 0 1em;
}


@media screen and (max-width: 750px) {
	#home2024 #orderBox #orderMenu{
		display: flex;
		gap: 0 10px;
		width: 95%;
		height: 85px;
		font-size: 14px;
	}
	#home2024 #orderBox #orderMenu li{
		width: 50%;
	}
	#home2024 #orderBox #orderMenu li a{
		padding: 8px 0 0;
		width: 100%;
		height: calc(70px - 8px);
		line-height: 24px;
	}
	#home2024 #orderBox #orderMenu li a.on{
		height: calc(75px - 8px);
	}
	#home2024 #orderBox #orderMenu li a span{
		margin: 0;
		font-size: 1.3em;
		line-height: 30px;
		letter-spacing: -0.1em;
	}
	#home2024 #orderBox #orderMenu li p{
		bottom: 75px;
		background-size: contain;
	}
	#home2024 #orderBox #orderMenu li:first-child p{
		left: 5px;
		width: 140px;
		height: 35px;
	}
	#home2024 #orderBox #orderMenu li:last-child p{
		right: 5px;
		width: 123px;
		height: 50px;
	}

	#home2024 #orderBox #selectBox #select1,
	#home2024 #orderBox #selectBox #select2{
		padding: 0 6vw 10vw;
	}
	#home2024 #orderBox #selectBox #select1 ul li{
		width: calc(50% - 10px);
	}

	#home2024 #orderBox #selectBox #select2 .info{
		display: block;
		padding: 0 0 8vw;
	}
	#home2024 #orderBox #selectBox #select2 .info img{
		margin: auto;
	}
	#home2024 #orderBox #selectBox #select2 .info h3{
		margin-top: 0;
		padding: 8vw 0 6vw;
		font-size: 6vw;
	}

	#home2024 #orderBox #selectBox #select2 table.noBorder,
	#home2024 #orderBox #selectBox #select2 div.row:has(table.noBorder) img{
		margin: auto;
	}

	#home2024 #orderBox #selectBox .priceBox::after,
	#item .shopItem .priceBox::after{
		background-size: contain;
		max-width: 25%;
	}
}
@media screen and (max-width: 460px) {
	#home2024 #orderBox #orderMenu{
		font-size: 13px;
		letter-spacing: -0.05em;
	}
	#home2024 #orderBox #selectBox #select1 ul li{
		width: 100%;
		
	}
}
@media screen and (max-width: 410px) {
	#home2024 #orderBox #orderMenu li a{
		letter-spacing: -0.1em;
	}
	#home2024 #orderBox #orderMenu li a span{
		letter-spacing: -0.15em;
	}
}

#home2024 #templateOrder .name{
	margin: 0 0 1em;
	font-size: 1.8em;
}
#home2024 #templateOrder .feeBox strong{
	display: block;
	text-align: center;
	font-size: 1.2em;
}
#home2024 #templateOrder .feeBox table.noBorder{
	margin: 10px auto 20px;
	font-size: 0.95em;
}
#home2024 #templateOrder .feeBox table.noBorder th,
#home2024 #templateOrder .feeBox table.noBorder td{
	padding: 0 20px;
}
#home2024 #templateOrder form label{
	padding: 3px 10px;
}
#home2024 #templateOrder form label + input{
	margin-bottom: 3px;
}

/***********************************
 concept
***********************************/
#concept #gifImage{
	position: relative;
	margin: auto;
	background: #e6d1aa;
	height: 580px;
	overflow: hidden;
}
#concept #gifImage img{
	position: absolute;
	left: 50%;
	display: block;
	margin: 0 0 0 -1000px;
	width: 2000px;
}

#concept h3 + p{
	margin: 0 0 110px;
	text-align: center;
}

@media screen and (max-width: 750px) {
	#concept #gifImage{
		height: 130.5vw;
		background: url(/images/imgConcept1_sp.png) no-repeat center top;
		background-size: cover;
	}
	#concept #gifImage img{
		display: none;
	}
	
	#concept h3 + p{
		margin: 0 0 10vw;
		line-height: 2em;
	}
}

#concept .row .column2 > div.sampleBox,
#concept .row .column2 > img.shadowR{
	float: left;
	display: block;
	width: calc(50% - 15px);
}
#concept .row .column2 > div.sampleBox:last-child,
#concept .row .column2 > img.shadowR + img.shadowR{
	margin: 0 0 0 30px;
}
#concept .row .column2 > div.sampleBox{
	position: relative;
}
#concept .row .column2 > div.sampleBox span{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: linear-gradient(to right, #c79f62, #9b7b4a);
	width: 145px;
	height: 38px;
	line-height: 38px;
	color: #ffffff;
	text-align: center;
	font-family: 'Shippori Mincho', serif;
}
#concept .row .column2 > div.sampleBox span.compare{
	background: #000000;
}
#concept .row .column2 > div.sampleBox p{
	padding: 30px 0 0;
	font-size: 14px;
}
#concept .row .column2 > img.shadowR + p{
	clear: both;
	padding: 35px 0 0;
	font-size: 14px;
}
#concept .row .column2 > img.shadowR + p + ul.caution{
	margin: 0 0 0 15px;
}
#concept .row .column2 > img.shadowR + p + ul.caution li{
	padding: 10px 0 0;
	font-size: 12px;
}

#concept ul.btnBox{
	margin: 0 auto 70px;
	width: 830px;
	height: 250px;
}
#concept ul.imgBox{
	margin: -50px auto 90px;
	width: 640px;
	height: 239px;
}
#concept ul.btnBox li,
#concept ul.imgBox li{
	float: left;
	margin: 0 40px 0 0;
}
#concept ul.btnBox li:last-child,
#concept ul.imgBox li:last-child{
	margin: 0;
}

@media screen and (max-width: 750px) {
	#concept article.bg{
		padding-bottom: 18vw;
	}

	#concept .row .column2.narrow{
		margin: 0 0 9vw;
	}
	#concept .row .column2 > div.sampleBox,
	#concept .row .column2 > img.shadowR{
		width: calc(50% - 3.2vw);
	}
	#concept .row .column2 > div.sampleBox:last-child,
	#concept .row .column2 > img.shadowR + img.shadowR{
		margin: 0 0 0 6.4vw;
	}
	#concept .row .column2 > img.shadowR + img.shadowR.elegance{
		margin-top: 12vw;
	}
	#concept .row .column2 > div.sampleBox span{
		width: 26vw;
		height: 6.6vw;
		line-height: 6.6vw;
		font-size: 0.85em;
	}
	#concept .row .column2 > div.sampleBox p,
	#concept .row .column2 > img.shadowR + p{
		padding: 5.5vw 0 0;
		font-size: 0.84em;
		line-height: 1.3em;
	}
	#concept .row .column2 > img.shadowR + p + ul.caution{
		margin: 0 0 0 1em;
	}
	#concept .row .column2 > img.shadowR + p + ul.caution li{
		padding: 3vw 0 0;
		line-height: 1.3em;
		font-size: 0.84em;
	}
	
	#concept ul.btnBox{
		position: relative;
		margin: 0 auto 9.3vw;
		width: 100%;
		height: 80vw;
	}
	#concept ul.btnBox li{
		position: absolute;
		float: none;
		margin: 0;
		width: calc(50% - 1.6vw);
		height: 41.6vw;
	}
	#concept ul.btnBox li:nth-child(1){
		top: 0;
		left: 0;
	}
	#concept ul.btnBox li:nth-child(2){
		top: 0;
		right: 0;
	}
	#concept ul.btnBox li:nth-child(3){
		bottom: 0;
		left: calc(50% - 20.8vw);
	}
	#concept ul.btnBox li a.btn{
		background-size: contain;
	}
	#concept ul.imgBox{
		position: relative;
		margin: 0 auto 15vw;
		width: 100%;
		height: 34.4vw;
	}
	#concept ul.imgBox li{
		margin: 0;
		width: calc(50% - 3.2vw);
	}
	#concept ul.imgBox li:last-child{
		margin: 0 0 0 6.4vw;
	}
	#concept ul.imgBox li img{
		width: 100%;
	}
}

/***********************************
 scene
***********************************/
#scene h3 + p{
	margin: 0 0 60px;
	text-align: center;
}

#scene ul.imgBox{
	margin: 0 auto 80px;
	width: 748px;
	height: 237px;
}
#scene ul.imgBox li{
	float: left;
	margin: 0 40px 0 0;
}
#scene ul.imgBox li:last-child{
	margin: 0;
}
#scene ul.imgBox li img{
	width: 354px;
}

@media screen and (max-width: 750px) {
	#scene h3 + p{
		margin: 0 0 8vw;
	}
	
	#scene ul.imgBox{
		position: relative;
		margin: 0 auto 15vw;
		width: 100%;
		height: auto;
	}
	#scene ul.imgBox li{
		float: none;
		margin: 0;
		width: calc(50% - 3vw);
	}
	#scene ul.imgBox li:last-child{
		position: absolute;
		top: 6vw;
		left: calc(50% + 3vw);
		margin: 0;
	}
	#scene ul.imgBox li img{
		width: 100%;
	}	
}

/***********************************
 item
***********************************/
/*
#item ul.categoryList{
	background: #eef2fb;
	text-align: center;
}
#item ul.categoryList li{
	display: inline-block;
	margin: 0 20px;
}
#item ul.categoryList li a{
	display: block;
	padding: 0 15px;
	line-height: 40px;
	font-family: 'Shippori Mincho', serif;
}

#item ul.categoryList + article{
	padding-top: 0;
}
#item ul.categoryList + article section{
	padding-top: 30px;
}

#item .sort{
	float: right;
	margin: 0 0 10px;
    padding: 5px 10px;
}
#item .sort::after{
	clear: both;
	display: block;
	content: "";
}
*/

/***** detail *****/
#item.detail ul.imgBox li{
	position: relative;
	float: left;
	width: calc(50% - 10px);
	height: 200px;
	margin: 30px 20px 0 0;
}
#item.detail ul.imgBox li:nth-child(2n){
	margin: 30px 0 0;
}
#item.detail ul.imgBox li img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	cursor: pointer;
}

#item.detail .orderSummary{
	margin: 30px 0 0;
	padding: 10px 0 0;
	border-top: solid 1px #cdcdcd;
}
#item.detail .orderSummary strong{
	display: block;
	padding: 20px 0 10px;
}
#item.detail .orderSummary label img{
	margin: 0 0 0 1.7em;
	max-width: 150px;
}

@media screen and (max-width: 750px) {
	#item.detail ul.imgBox li{
		width: calc(50% - 0.8em);
		height: 27vw;
		margin: 1.5em 1.6em 0.5em 0;
	}
	#item.detail ul.imgBox li:nth-child(2n){
		margin: 1.5em 0 0.5em;
	}

	#item.detail .orderSummary{
		margin: 1.5em 0 0;
		padding: 1em 0 0;
	}
	#item.detail .orderSummary strong{
		display: block;
		padding: 1.5em 0 0.5em;
	}
	#item.detail .orderSummary label img{
		margin: 0 0 0 1em;
		max-width: 26vw;
	}
}

/***********************************
 order
***********************************/
#order .annotation,
#home2024 .annotation{
	margin: 0 0 20px;
	line-height: 1.7em;
	text-align: center;
	font-size: 1.2em;
}

@media screen and (max-width: 750px) {
	#order .annotation,
	#home2024 .annotation{
		margin: 0 0 1.5em;
		font-size: 1.1em;
	}
}

/***** designer *****/
#order.designer .selectDesign{
	margin: 0 0 50px;
}
#order.designer .selectDesign::after{
	clear: both;
	display: block;
	content: "";
}
#order.designer .selectDesign input{
	display: none;
}
#order.designer .selectDesign label{
	float: left;
	display: block;
	margin: 0 16px 16px 0;
	padding: 0;
	width: calc(25% - 12px);
}
#order.designer .selectDesign label:nth-child(8n){
	margin: 0 0 16px;
}
#order.designer .selectDesign label img{
	display: block;
	width: 100%;
	-webkit-transition: all .8s;
	transition: all .8s;
}
#order.designer .selectDesign label:hover img{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#order.designer .selectDesign input:checked + label{
	margin: -4px 12px 12px -4px;
	border: solid 4px #c79f62;
}
#order.designer .selectDesign input:checked + label:nth-child(8n){
	margin: -4px -4px 12px;
}
#order.designer .selectDesign input:checked + label img{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#order.designer textarea{
	margin: 0 0 30px;
	padding: 15px 12px;
	width: calc(100% - 26px);
	height: 6.5em;
}

#order.designer #progress{
	display: block;
	width: 100%;
}
#order.designer ul#orderData{
	display: block;
	width: 100%;
	height: 20px;
}
#order.designer ul#orderData::after{
	clear: both;
	display: block;
	content: "";
}
#order.designer ul#orderData li{
	position: relative;
	float: left;
	margin: 10px;
	width: calc(25% - 20px);
}
#order.designer ul#orderData li img{
	display: block;
	width: 100%;
	max-height: 400px;
}
#order.designer ul#orderData li input[type="button"]{
	position: absolute;
	background: #df0d52;
	width: 25px;
	color:#ffffff;
	top: 0;
	left: 0;
}
#order.designer #dragdropArea,
#item.detail #dragdropArea{
	padding: 20px 10px;
	background: #ffffff;
	width: calc(100% - 22px);
	background: #ffffff;
	border: dashed 1px #adadad;
	text-align: center;
}

@media screen and (max-width: 750px) {
	#order.designer .selectDesign{
		margin: 0 0 3em;
	}
	#order.designer .selectDesign label{
		margin: 0 1.2em 1.2em 0;
		padding: 0;
		width: calc(50% - 0.6em);
	}
	#order.designer .selectDesign label:nth-child(4n){
		margin: 0 0 1.2em;
	}

	#order.designer .selectDesign input:checked + label{
		margin: -0.2em 1em 1em -0.2em;
		border: solid 0.2em #c79f62;
	}
	#order.designer .selectDesign input:checked + label:nth-child(4n){
		margin: -0.2em -0.2em 1em;
	}

	#order.designer textarea{
		margin: 0 0 3em;
		padding: 0.2em 0.5em;
		width: calc(100% - 1.1em);
	}

	#order.designer ul#orderData li{
		margin: 0.5em 1em 3em;
		width: calc(25% - 1em);
	}
	#order.designer ul#orderData li img{
		display: block;
		width: 100%;
		max-height: 14vw;
	}
	#order.designer ul#orderData li input[type="button"]{
		width: 2em;
		height: 1.6em;
	}
	#order.designer #dragdropArea{
		padding: 1em;
		width: calc(100% - 2.1em);
		font-size: 0.9em;
	}
}

/***** design *****/
#order.design div#cvs{
	margin: auto;
	width: 741px;
	height: 855px;
}

#order.design ul#btnList li{
	float: left;
	display: block;
	margin: 0 20px 0 0;
	width: calc(20% - 18px);
	background: #ebedee;
	background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
	border-radius: 8px;
	border: 1px solid #cccccc;
	box-shadow: inset 1px 1px 1px #fff;
	transition: all .8s;
}
#order.design ul#btnList li:last-child{
	margin: 0;
}
#order.design ul#btnList li:hover{
	background: #fdfbfb;
	background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
	transition: all .8s;
}
#order.design ul#btnList li .btn{
	height: 160px;
}
#order.design ul#btnList li .btn.text{ background-image: url(/images/btnOrderText.png); }
#order.design ul#btnList li .btn.photo{ background-image: url(/images/btnOrderPhoto.png); }
#order.design ul#btnList li .btn.flame{ background-image: url(/images/btnOrderFlame.png); }
#order.design ul#btnList li .btn.stamp{ background-image: url(/images/btnOrderStamp.png); }
#order.design ul#btnList li .btn.complete{ background-image: url(/images/btnOrderComplete.png); }
#order.design ul#btnList li .btn:hover{
	filter:alpha(opacity=100);
	opacity: 1;
}

#order.design #layerBtn{
	position: absolute;
	bottom: 65px;
	right: 8px;
	display: none;
}
#order.design a.layerBtn{
	display: block;
	margin: 0 0 8px;
	width: 120px;
	height: 90px;
	background: #212529;
	border-radius: 8px;
	border: 1px solid #cccccc;
	box-shadow: inset 1px 1px 1px #ffffff;
	text-indent: -9999px;
	opacity: 0.8;
	transition: all .8s;
}
#order.design a.layerBtn.up{ background: url(/images/btnOrderUp.png) no-repeat center, linear-gradient(to bottom, #404444 0%, #212529 100%); }
#order.design a.layerBtn.down{ background: url(/images/btnOrderDown.png) no-repeat center, linear-gradient(to bottom, #404444 0%, #212529 100%); }
#order.design a.layerBtn:hover{
	background: #404444;
}
#order.design a.layerBtn.up:hover{ background: url(/images/btnOrderUp.png) no-repeat center, linear-gradient(to top, #404444 0%, #212529 100%); }
#order.design a.layerBtn.down:hover{ background: url(/images/btnOrderDown.png) no-repeat center, linear-gradient(to top, #404444 0%, #212529 100%); }

#order.design .modal h3{
	padding: 0 0 30px;
	color: #c79f62;
}

#order.design .modal input[type="button"].btn{
	margin: 30px auto 0;
}

#order.design .modal#textSection{
	width: 600px;
}
#order.design .modal#textSection input[type="text"]{
	margin: 5px 0 15px;
	width: 100%;
}
#order.design .modal#textSection input[type="color"]{
	margin: 5px 0 15px;
	width: 100px;
}
#order.design .modal#imageSection label.fileBtnLabel{
	display: none;
}
#order.design .modal#textSection .display_selectedItem{
	padding: 5px 10px;
	width: 100%;
	line-height: 1.5em;
	font-size: 36px;
	box-sizing: border-box;
	border: 2px solid #c5c5c5;
	border-radius: 5px;
	letter-spacing: 0;
}
#order.design .modal#textSection .select_box{
	width: 100%;
	border: solid 1px #c5c5c5;
}
#order.design .modal#textSection .select_box li{
	padding: 2px 10px;
	line-height: 1.5em;
	font-size: 36px;
	cursor: default;
	box-sizing: border-box;
}

#order.design .modal#stampSection ul,
#order.design .modal#frameSection ul{
	padding: 10px;
	background: #efefef;
	width: 800px;
}
#order.design .modal#stampSection ul li,
#order.design .modal#frameSection ul li{
	position: relative;
	float: left;
	width: 10%;
	height: 70px;
	cursor: pointer;
}
#order.design .modal#frameSection ul li{
	width: 25%;
	height: 170px;
}
#order.design .modal#stampSection ul li:hover,
#order.design .modal#frameSection ul li:hover{
	background: #eef2fb;
	transition: all .8s;
}
#order.design .modal#stampSection ul li img,
#order.design .modal#frameSection ul li img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 80%;
	max-height: 85%;
	display: block;
	margin: auto;
	transition: all .8s;
}
#order.design .modal#stampSection ul li:hover img,
#order.design .modal#frameSection ul li:hover img{
	max-width: 90%;
	max-height: 90%;
}

@media screen and (max-width: 750px) {
	body#order.design{
		font-size: 26px;
	}
	#order.design header,
	#order.design footer,
	#order.design .menu-btn{
		display: none;
	}
	#order.design article{
		width: 750px;
	}
	#order.design section{
		padding: 10px 0;
		max-width: unset;
		width: 741px;
	}

	#order.design h2 {
		height: 282px;
		background-size: contain;
	}

	#order.design ul#btnList{
	}
	#order.design ul#btnList li{
		margin: 0 5px 0 0;
		width: calc(20% - 6px);
		border-radius: 5px;
	}
	#order.design ul#btnList li .btn{
		height: 135px;
		background-size: 60%;
	}

	#order.design #layerBtn{
		bottom: 127px;
		right: 15px;
	}
	#order.design a.layerBtn{
		margin: 0 0 7px;
		width: 90px;
		height: 67px;
		border-radius: 5px;
	}
	#order.design a.layerBtn.up,
	#order.design a.layerBtn.down,
	#order.design a.layerBtn.up:hover,
	#order.design a.layerBtn.down:hover{
		background-size: 60%;
	}

	#order.design .modal h3{
		padding: 0 0 0.5em;
		line-height: 1.8em;
		font-size: 75px;
	}

	#order.design .modal input[type="button"].btn{
		margin: 1.5em auto 0;
		padding: 1em 0.4em
	}

	#order.design .modal#textSection,
	#order.design .modal#stampSection,
	#order.design .modal#frameSection,
	#order.design .modal#imageSection{
		padding: 2em;
		width: 675px;
	}

	#order.design .modal#textSection{
		width: 100%;
	}
	#order.design .modal#textSection input[type="text"]{
		margin: 0.2em 0 1em;
	}
	#order.design .modal#textSection input[type="color"]{
		margin: 0.2em 0 1em;
	}
	#order.design .modal#imageSection label.fileBtnLabel{
		display: block;
		margin: 1em auto;
    	padding: 0.5em 0.4em;
		width: 80%;
		max-width: 400px;
		background: #e1e1e1;
		border: solid 1px #adadad;
		text-align: center;
		font-size: 1.1em;
	}
	#order.design .modal#imageSection input[type="file"]{
		display: none;
	}

	#order.design .modal#textSection .display_selectedItem{
		padding: 0.2em 0.5em;
		font-size: 1.2em;
		border-radius: 5px;
	}
	#order.design .modal#textSection .select_box li{
		padding: 0.2em 0.5em;
		font-size: 1.2em;
	}

	#order.design .modal#stampSection ul,
	#order.design .modal#frameSection ul{
		padding: 0.5em 0.2em;
		width: 100%;
	}
	#order.design .modal#stampSection ul li,
	#order.design .modal#frameSection ul li{
		position: relative;
		float: left;
		width: 50%;
		height: 262px;
	}
	#order.design .modal#frameSection ul li{
		float: unset;
		width: 100%;
		height: 360px;
	}
}

/***** orderForm *****/
#order.orderForm #cardSelect{
	line-height: 1.7em;
	text-align: center;
	font-size: 1.2em;
}
#order.orderForm table img{
	max-width: 100%;
}

@media screen and (max-width: 750px) {
	#order.orderForm #cardSelect{
		margin: auto;
		width: 14em;
		text-align: left;
	}
	#order.orderForm #cardSelect label{
		display: block;
		padding: 0.2em;
	}
}

/***** thanks *****/
#order.thanks main section{
	width: 50%;
}
#order.thanks main section p{
	margin: 0 0 30px;
	line-height: 1.8em;
}
#order.thanks main section .btnTxt{
	margin: 60px auto 0;
}

#order.thanks #qrBox{
	margin: 0 0 10px;
	padding: 30px;
	background: #eef2fb;
	text-align: center;
}
#order.thanks #qrBox img{
	margin: 20px 0 0;
	width: 350px;
	height: 350px;
}
#order.thanks #qrBox .btn.lineAdd{
	display: none;
}

@media screen and (max-width: 750px) {
	#order.thanks main section{
		width: calc(100% - 13.3vw);
	}
	#order.thanks main section p{
		margin: 0 0 2em;
	}
	#order.thanks main section .btnTxt{
		margin: 3em auto 0;
	}

	#order.thanks #qrBox img{
		display: none;
	}
	#order.thanks #qrBox .btn.lineAdd{
		display: block;
		margin: 1em auto 0;
		background-size: 58%;
	}
}

/***********************************
 guide
***********************************/
#guide article{
	padding: 0 0 40px;
}
#guide h2 + article{
	padding: 0;
}
#guide article section{
	padding: 30px 0;
}

#guide #guideMenu{
	margin: 0 0 40px;
	padding: 20px 0;
	background: #eef2fa;
	text-align: center;
}
#guide #guideMenu dl{
	display: inline-block;
	padding: 0 20px;
	vertical-align: top;
	text-align: left;
}
#guide #guideMenu dl:first-child{
	border-right: solid 2px #ffffff;
}
#guide #guideMenu dl:last-child{
	border-left: solid 2px #ffffff;
}
#guide #guideMenu dl dd{
	position: relative;
	margin: 0 0 0 20px;
}
#guide #guideMenu dl dd::before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.2em;
	display: block;
	margin: auto;
	background: #000000;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	content: "";
}
#guide #guideMenu dl a{
	display: block;
	margin: 3px 0;
	padding: 0 15px;
	line-height: 30px;
	font-family: 'Shippori Mincho', serif;
}

#guide table#deliveryFee{
	margin: 10px 0 0;
	width: 280px;
}
#guide table#deliveryFee td{
	text-align: right;
}

@media screen and (max-width: 750px) {
	#guide article{
		padding: 0 0 9.3vw;
	}
	#guide article section{
		padding: 0 0 10vw;
	}

	#guide #guideMenu{
		margin: 0 0 10vw;
		padding: 1em 10vw;
	}
	#guide #guideMenu dl{
		display: block;
		padding: 0.5em 1em;
	}
	#guide #guideMenu dl:first-child{
		border-bottom: solid 2px #ffffff;
		border-right: none;
	}
	#guide #guideMenu dl:last-child{
		border-top: solid 2px #ffffff;
		border-left: none;
	}
	#guide #guideMenu dl dd{
		position: relative;
		margin: 0 0 0 2em;
	}
	#guide #guideMenu dl dd::before{
		left: -0.6em;
		width: 0.5vw;
		height: 0.5vw;
	}
	#guide #guideMenu dl a{
		margin: 2vw 0;
		padding: 0;
		line-height: 1.8em;
	}

	#guide table#deliveryFee{
		margin: 1em 0 0;
		width: 15em;
	}

	#guide main img{
		max-width: 100%;
	}
}

/***********************************
 about, law
***********************************/
#about main table{
	margin: auto;
	width: 80%;
}
#law main table{
	margin: auto;
	width: 90%;
}
#about main table th,
#about main table td,
#law main table th,
#law main table td{
	padding: 20px 40px;
	color: #2b2b2b;
	font-family: 'Shippori Mincho', serif;
}
#about main table th,
#law main table th{
	width: 180px;
}
#about main table td a,
#law main table td a{
	font-family: 'Shippori Mincho', serif;
}

@media screen and (max-width: 750px) {
	#about main table{
		width: 95%;
	}
	#law main table{
		width: 95%;
	}
	#about main table th,
	#law main table th{
		padding: 0.6em 1em;
		width: auto;
	}
	#about main table td,
	#law main table td{
		padding: 0.6em 1em 1em;
	}
}

/***********************************
 rules, privacy
***********************************/
#rules main section,
#privacy main section{
	width: 75%;
}

#rules main dl,
#privacy main dl{
	margin: 50px 0;
}
#rules main dl dt,
#privacy main dl dt{
	margin: 20px 0;
	font-size: 1.5em;
}
#rules main dl dd,	
#privacy main dl dd{
	padding: 10px 0 40px;
}
#rules main dl dd li,
#privacy main dl dd li{
	padding: 0 0 0.8em;
}
#rules main dl dd li li:first-child,
#privacy main dl dd li li:first-child,
#rules main dl dd p + ol li:first-child,	
#privacy main dl dd p + ol li:first-child,
#rules main dl dd p + ul li:first-child,	
#privacy main dl dd p + ul li:first-child{
	padding-top: 0.8em;
}
#rules main dl dd li:last-child,
#privacy main dl dd li:last-child{
	padding: 0;
}
#rules main dl dd ol + p,	
#privacy main dl dd ol + p,
#rules main dl dd ul + p,	
#privacy main dl dd ul + p{
	padding-top: 0.8em;
}
#rules main dl dd ol,
#privacy main dl dd ol,
#rules main dl dd ul,
#privacy main dl dd ul{
	margin-left: 30px;
}

@media screen and (max-width: 750px) {
	#rules main section,
	#privacy main section{
		width: 95%;
	}

	#rules main dl,
	#privacy main dl{
		margin: 3em 0;
	}
	#rules main dl dt,
	#privacy main dl dt{
		margin: 1em 0;
	}
	#rules main dl dd,	
	#privacy main dl dd{
		padding: 0.5em 0 2em;
	}
	#rules main dl dd ol,
	#privacy main dl dd ol
	#rules main dl dd ul,
	#privacy main dl dd ul{
		margin-left: 1.5em;
	}
}

/***********************************
 faq
***********************************/
#faq dt{
	position: relative;
	margin: 10px 0;
	padding: 15px 40px 15px 50px;
	border-top: solid 1px #cdcdcd;
	border-bottom: solid 1px #cdcdcd;
	font-family: 'Shippori Mincho', serif;
	font-weight: bold;
	font-size: 1.1em;
	cursor: pointer;
	transition: all .5s ease;
}
#faq dd{
	position: relative;
	display: none;
	padding: 5px 10px 50px 50px;
}
#faq dt:before,
#faq dd:before{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #ffffff;
	text-align: center;
	font-family: 'Libre Caslon Text', serif;
	font-size: 18px;
}
#faq dt:before{
	bottom: 0;
	margin: auto;
	background: #c79f62;
	content: "Q";
	font-weight: normal;
}
#faq dd:before{
	margin: auto;
	background: #df0d52;
	content: "A";
}

#faq dt:after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	content: '+';
	margin: auto;
	width: 1em;
	height: 1em;
	color: #000000;
	text-align: center;
	font-size: 1.5em;
}
#faq dt.close:after{
	transform: rotateZ(45deg);
}

@media screen and (max-width: 750px) {
	#faq dt{
		margin: 0.8em 0;
		padding: 0.6em 1.6em 0.6em  1.8em;
	}
	#faq dd{
		padding: 0.2em 0.4em 1.8em 2.1em;
	}
	#faq dt:before,
	#faq dd:before{
		width: 1.8em;
		height: 1.8em;
		line-height: 1.8em;
		font-size: 0.8em;
	}
	#faq dd:before{
		font-size: 0.88em;
	}

	#faq dt:after{
		top: 0.1em;
		right: 0.2em;
	}
}

/***********************************
 contact
***********************************/
#contact p.message{
	margin: 0 0 0.5em;
	text-align: center;
}
#contact p.message:last-child{
	margin: 0;
}

#contact table{
	width: 90%;
}
#contact table th{
	width: 150px;
}

@media screen and (max-width: 750px) {
	#contact p.message{
		margin: 0 0 1em;
		text-align: left;
	}

	#contact table{
		width: 100%;
	}
	#contact table th{
		width: auto;
	}
}

/***** thanks *****/
#contact.thanks main section{
	width: 50%;
}
#contact.thanks main section p{
	margin: 0 0 30px;
	line-height: 1.8em;
}
#contact.thanks main section .btnTxt{
	margin: 60px auto 0;
}

@media screen and (max-width: 750px) {
	#contact.thanks main section{
		width: 95%;
	}
	#contact.thanks main section p{
		margin: 0 0 1.8em;
	}
	#contact.thanks main section .btnTxt{
		margin: 3em auto 0;
	}
}

/***********************************
 iframe
***********************************/
body.iframeBox{
	background: #ffffff;
	min-width: unset;
}
body.iframeBox article,
body.iframeBox section{
	padding: 20px 0;
}

/***** /item/frame.php *****/
@media screen and (max-width: 750px) {
	.shopItem .itemPhoto, .shopItem .itemPhoto.big{
		height: unset;
	}
	body.iframeBox .shopItem .itemPhoto img{
		position: relative;
		bottom: 0;
		max-height: 50vh;
	}
	#item.detail ul.imgBox{
		display: flex;
		gap: 1.5em;
		margin: 1.5em 0 0;
	}
	#item.detail ul.imgBox li{
		margin: 0;
		width: calc((100% /3) - 1em);
		height: 18vw;
	}
	
	#item.detail .row:has(.itemPhoto) .column2{
		margin: 0 0 7vw;
	}
}