@charset "UTF-8";
/* basic settings */
html, body, h1, h2, h3, h4, h5, h6,
a, p, span, em, small, strong, sub, sup,
mark, del, ins, strike, abbr, dfn,
blockquote, q, cite, code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
header, main, aside, nav, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,tbody, tfoot, thead,tr, th, td { margin: 0; padding: 0; border: 0; }

html { font-size: 62.5%; width: 100%; min-width: 320px; min-height:100%; -webkit-text-size-adjust:100%; scroll-behavior: smooth; scroll-padding-top:120px; padding-top: 120px; }
body { font-size: 1.6rem; line-height: 1.5; width: 100%; min-height:100%; min-width: 320px; overflow-x: hidden; color:#000; background:#FFF; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
* { box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; }
*:before, *:after { box-sizing: inherit; }
article, aside, footer, header, nav, section, main { display: block;}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
img, video { max-width: 100%; }
img { border-style: none; vertical-align: middle;}
blockquote, q { quotes: none; }
	blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; }
[hidden] { display: none !important; }
[disabled] { cursor: not-allowed; }
:focus:not(:focus-visible) { outline: none; }

/* local class */
.red { color: #AE2A2B;}
.blue { color: #0099D8;}
.green { color:#060;}
.tar { text-align:right;}
.tal { text-align:left;}
.tac { text-align:center;}
.f8 {font-size:8px;}
.f9 {font-size:9px;}
.f10 {font-size:10px;}
.f11 {font-size:11px;}
.f12 {font-size:12px;}
.f13 {font-size:13px;}
.f14 {font-size:14px;}
.f15 {font-size:15px;}
.f16 {font-size:15px;}
.f18 {font-size:18px;}
.f20 {font-size:20px;}
.f22 {font-size:22px;}
.f24 {font-size:24px;}
.f26 {font-size:26px;}
.f28 {font-size:28px;}
.f32 {font-size:32px;}
.f36 {font-size:36px;}
.f42 {font-size:42px;}
.f11 {font-size:11px;}
.f12 {font-size:12px;}
.f13 {font-size:13px;}
.f14 {font-size:14px;}
.f15 {font-size:15px;}
.f16 {font-size:15px;}
.f18 {font-size:18px;}
.f20 {font-size:20px;}
.f22 {font-size:22px;}
.f24 {font-size:24px;}
.f26 {font-size:26px;}
.f28 {font-size:28px;}
.f30 {font-size:30px;}
.f32 {font-size:32px;}
.f36 {font-size:36px;}
.f42 {font-size:42px;}
.f48 {font-size:48px;}
.fg {font-family: Arial, Helvetica, "sans-serif";}
.fb { font-weight: bold;}
.fr { float: right;}

a.aho { opacity: 1; transition: .3s;}
	a.aho:hover { opacity: .7;}


.header { width: 100%; min-width: 1200px; text-align: center; display: block; position: fixed; z-index: 100; top: 0; background:#FFF;}
.headernav { display: flex; justify-content: space-between; width:1000px; margin: 0 auto; padding: 10px 0;}
	.nav1 { width: 720px;}
		.nav1 p { display: flex; justify-content: space-between; width: 100%;}
			.nav1 p a { padding:10px 10px; transition: .3s; opacity: 1;}
			.nav1 p a:first-of-type { padding:0 10px;}
			.nav1 p a:hover { opacity: .7;}
		.nav1 ul { display: flex; justify-content:flex-start; padding: 10px 0 0 0;}
		.nav1 li { padding: 0 4px 0 10px; font-size: 14px; font-weight: bold;}
			.nav1 li a { color:#000; text-decoration: none; transition: .3s;}
			.nav1 li a:hover { color:#82B65D;}
	.nav2 { width: 214px;}
		.nav2 p { padding: 5px 0;}
		.nav2 p a { transition: .3s; opacity: 1;}
		.nav2 p a:hover { opacity:.7;}


/* layout settings */
.hlogo { background:#FFF; width: 100%;}
	.hlogo p { padding: 8px; display: block; width: 100%; max-width: 1280px; margin: 0 auto; text-align: left;}

.hometop { width:100%; text-align: center; background: linear-gradient(#CEC078, #FFFFFF 80%); padding-bottom: 40px;}
	.hometop h1 { display: block; padding:0; margin: 0 auto; width: 100%; max-width: 1280px; }
		.hometop h1 img { max-width: 100%; height: auto;}
	.hometop p { padding:10px 0; font-size: 18px;}


nav { width:100%; min-width: 1200px; padding:0 0; text-align: center; background:#AE2A2B;}
	nav ul { display:flex; justify-content: center;; width: 1080px; margin: 0 auto; }
		nav li {font-size: 15px; padding: 0 0; border-left:1px solid #AE2A2B;}
			nav li a { display: block; padding: 17px 24px; color:#FFF; background:#AE2A2B; text-decoration: none; font-weight: bold;}
				nav li a:hover { background:#921819;}
		.loginbtn { padding:10px 24px;}
			.loginbtn a { background:#00AAE2; padding: 7px 20px; border-radius: 20px;}
				.loginbtn a:hover { background:#FF800F;}

footer {width: 100%; text-align: center; padding:40px 0; background:#FFF;border-top: 1px solid #CCC;}
	footer p { display:block; width: 1200px; padding:10px 0; margin: 0 auto; text-align: center; font-size: 14px;}
	a.finquiry { display: block; width: 260px; padding:10px 0 14px 0; margin: 2px auto; text-align: center; font-size: 16px; font-weight: bold; color:#333; text-decoration: none; background:linear-gradient(#FFF,#DDD); border: 1px solid #BBB; border-radius:40px; box-shadow: 0 2px 3px 1px rgba(0,0,0,.4); transition: all .3s; }
		a.finquiry:hover {margin: 0 auto 4px auto; color:#000; background:linear-gradient(#FFF,#CCC); border: 1px solid #999;}
	a.fmail { color:#000; text-decoration: none; margin: 0 auto;}
		a.fmail:hover { text-decoration: underline;}

.pagetop { display: none; position: fixed; bottom: 30px; right:30px; width: 80px; height: 80px; border: 1px solid #FFF; background:#CCC; color: #333; text-decoration: none; text-align: center; font-family: Arial, Helvetica, "sans-serif"; border-radius:40px;}
	.pagetop:before { content: "↑"; display: block; padding:16px 0 0 0; font-size: 14px; }
	.pagetop:after { content: "PAGE TOP"; display: block; padding: 2px 0 0 0; font-size: 12px; }
	.pagetop:hover { color:#FFF; background:#AE2A2B;}


.pagetopnyc { display: none; position: fixed; bottom: 130px; right:30px; width: 80px; height: 80px; border: 1px solid #FFF; background:#CCC; color: #333; text-decoration: none; text-align: center; font-family: Arial, Helvetica, "sans-serif"; border-radius:40px;}
	.pagetopnyc:before { content: "↑"; display: block; padding:16px 0 0 0; font-size: 14px; }
	.pagetopnyc:after { content: "年賀状TOP"; display: block; padding: 2px 0 0 0; font-size: 12px; }
	.pagetopnyc:hover { color:#FFF; background:#AE2A2B;}



main { width: 1200px; margin: 0 auto; text-align: left; padding: 0 0 40px 0;}

#intro { padding: 40px 0 0 0; text-align: center; background: url("../images/intro-pt.jpg") 20px 20px no-repeat;}
	#intro h2 { padding: 10px 0; font-size:32px;}
	#intro p { padding: 10px 0; font-size: 20px;}
	#intro ul { display: flex; justify-content: center;}
		#intro li { padding: 20px;}
		#intro li a { display: block;width: 300px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FDF1C1,#ECCA47); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
			#intro li a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
			#intro li a:hover { background:linear-gradient(#ECCA47,#FDF1C1); }

h2.title { padding: 60px 0 0 0;}

h3.title { padding: 20px 0 5px 0; border-bottom: 1px solid #CCC; margin-bottom: 5px; font-size: 20px;}

.art { padding: 20px 0; margin: 0 auto;}
	.art p { padding: 10px 0;}

.point { max-width: 940px; padding: 20px 0; margin:0 auto;}
	.point p { padding: 10px 0;}
	.point ul { padding:10px 0 10px 1em; margin:0 0 0 1em; list-style: disc;}
	.point li { padding: 0 0;}


.greetings { max-width: 940px; padding: 20px 0; margin:0 auto;}
	.greetings h3 { padding: 10px 0; font-size: 24px; color:#AE2A2B;}
	.greetings p { padding: 10px 0;}
	.greetingsnote { padding: 20px 40px; background: #F3F3F3; margin-top: 20px;}
		.greetingsnote h4 { padding: 10px 0; font-size: 24px; color:#B68B04;}
		.greetingsnote h5 { padding:0 0 10px 30px; font-size: 20px; color:#AE2A2B;}
		.greetingsnote p { padding: 10px 0 10px 30px; position: relative;}
		.greetingsnote img.fr { padding:0 20px;}

.greetingsnote p::before { display: block; content: ""; overflow: hidden; width: 4px; height: 80px; background:#E4051E; position: absolute; left: 10px; top: 30px;}


.point { max-width: 940px; padding: 20px 0; margin:0 auto;}
	.point p { padding: 10px 0;}
	.point ul { padding:10px 0 10px 1em; margin:0 0 0 1em; list-style: disc;}
	.point li { padding: 0 0;}

#design {}
	.designnav { width:940px; margin: 0 auto; padding:0 0 40px 0;}
		.designnav ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; padding:10px 0;}
			.designnav ul li { width: calc(33% - 10px);}
			.designnav ul li a { display: block; width: 100%; font-size: 18px; color: #FFF; text-decoration: none; background:#AE2A2B; border-radius:10px; padding: 20px 0; text-align: center; transition:.3s;}
				.designnav ul li a:hover { color: #AE2A2B; background: #EBD9A3;}

	.design { margin: 10px auto;}
		#d1 { padding:40px 140px 60px 140px; background:#FCE3DF;}
		#d2 { padding:40px 140px 60px 140px; background: linear-gradient(90deg, #92BDDA 0%, #CCE6F4 20%, #E8E9E9 50%, #C7DFEC 85%, #92BDDA 100%);}
		#d3 { padding:40px 140px 60px 140px; margin: 0 auto;}

	.design h3 { display: block;}

	p.d1image { text-align: center;}
		.d1image img { padding: 20px 0;}
	p.dbtn1 {text-align: center; font-size: 14px; color: #666;}
		.dbtn1 a { display: block; width: 400px; font-size: 18px; font-weight: bold; padding: 20px 0; color:#000; text-decoration: none; margin: 5px auto; background:#EFC2C2; border-radius: 20px;}
			.dbtn1 a::before { content:"　　";}
			.dbtn1 a::after { content:"　〉";}
			.dbtn1 a:hover { color: #FFF; background:#AE2A2B;}
	p.dbtn2 {text-align: center; font-size: 14px; color: #666;}
		.dbtn2 a { display: block; width: 260px; font-size: 18px; font-weight: bold; padding: 12px 0; color:#000; text-decoration: none; margin: 5px auto; background:#EEE; border-radius: 20px;}
			.dbtn2 a::before { content:"　　";}
			.dbtn2 a::after { content:"　〉";}
			.dbtn2 a:hover { color: #AE2A2B;}
	#dend { width: 100%; text-align: center; padding: 60px 0 0 0; min-height:380px; background: url("../images/dend-bg.jpg") no-repeat top;}
		#dend h3 { padding: 10px 0;}
		#dend p { padding: 10px 0;}
			#dend p a { display: block;width: 370px; padding:1px; margin: 0 auto 10px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
				#dend p a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
				#dend p a:hover { background:linear-gradient(#EEE,#BBB); }

#order .art { width: 900px; margin: 0 auto;}
	#order p a { display: block;width: 370px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
	#order p a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
	#order p a:hover { background:linear-gradient(#EEE,#BBB); }

#guide .art { width: 900px; margin: 0 auto;}
	#guide p a { display: block;width: 370px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
		#guide p a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
		#guide p a:hover { background:linear-gradient(#EEE,#BBB); }

#fax .art { width: 900px; margin: 0 auto;}
	#fax .art h4 { padding:4px 20px; font-size: 18px; color:#FFF; background:#614D3F; margin: 40px 0 20px 0;}
	#fax .art p img { padding: 10px 0;}
	#fax .art dl { display: flex; align-items: flex-end;}
		#fax .art dt { padding: 20px 0 20px 0; width:280px; margin: 0;}
		#fax .art dd { padding: 20px 0 20px 0; margin: 0;}
		#fax .art dl img { padding: 5px 0;}

#faxend { width: 900px; margin: 40px auto; text-align: center; padding: 20px 0; color:#FFF; background: #DC7F24;}
	#faxend h3 { font-size: 26px; padding: 10px 0;}
	#faxend p a { display: block;width: 370px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
		#faxend p a span { display: block; padding:20px 0; border: 1px solid #FFF; border-radius:40px;}
		#faxend p a:hover { background:linear-gradient(#EEE,#BBB); }


#newitem {}
	.newitem { margin:10px auto; padding:40px 140px 60px 140px; background:#FCE3DF;}
	.newitem h3 { display: block;padding: 10px 0;}

	.newitem p a { display: block;width: 370px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
		.newitem p a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
		.newitem p a:hover { background:linear-gradient(#EEE,#BBB); }


#promo .art { width: 900px; margin: 0 auto;}
	#promo p img { padding: 20px 0;}
	#promo p a { display: block;width: 370px; padding:1px; margin:0 auto 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
		#promo p a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
		#promo p a:hover { background:linear-gradient(#EEE,#BBB); }


.bigbtn a { display: block;width: 370px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
	.bigbtn a span { display: block; padding:20px 0; border: 1px solid #FFF;border-radius:40px;}
	.bigbtn a:hover { background:linear-gradient(#EEE,#BBB); }

#lastend {width: 100%; text-align: center; padding:40px 0; background:#FFF;border-top: 1px solid #CCC;}
	#lastend .art { width: 900px; margin: 0 auto;}

	.lastend { width: 900px; margin: 40px auto; text-align: center; padding: 20px 0; color:#FFF; background: #DC7F24;}
		.lastend h3 { font-size: 26px; padding: 10px 0;}
		.lastend p a { display: block;width: 370px; padding:1px; margin: 20px auto; text-align: center; font-size:18px; font-weight: bold; color:#000; text-decoration: none; background:linear-gradient(#FFF,#CCC); border-radius:41px; box-shadow: 0 2px 3px 3px rgba(0,0,0,.2);}
			.lastend p a span { display: block; padding:20px 0; border: 1px solid #FFF; border-radius:40px;}
			.lastend p a:hover { background:linear-gradient(#EEE,#BBB); }


.cheader { width:100%; text-align: center; background:#FFF;}
	.cheader h1 { display: flex; justify-content: flex-start; align-items: center; padding:7px; width: 1200px; margin: 0 auto;}

#price .art { width: 904px; margin: 0 auto; text-align: left;}
	#price .art h3 { display: block; font-size: 20px; text-align: center; padding: 10px 0;}
		#all h3 { border-top:4px solid #F3DF98; border-bottom:4px solid #F3DF98;}
		#gs h3 { border-top:4px solid #F3DF98; border-bottom:4px solid #F3DF98;}
		#color h3 { border-top:4px solid #F4BED6; border-bottom:4px solid #F4BED6;}
		#mono h3 { border-top:4px solid #E2E2E2; border-bottom:4px solid #E2E2E2;}
	#price .art h4 { padding: 20px 0 0 0;}
		#price .art h4 img { padding: 20px 0;}
	#price .art p img { padding: 30px 0;}
	.pdfdata  { padding-left: 40px !important;}
		.pdfdata a { color:#000; text-decoration:none; font-size: 15px;}
		.pdfdata a:hover { color:#666; text-decoration:underline;}
		.pdfdata:before { display: block; width: 30px; height:28px; content:""; margin-left:-40px; float:left; background-position: left; background:url(../images/pdf.png) center / contain no-repeat; }
	ul.pricenav { padding: 20px 0 20px 120px;}
		ul.pricenav li img { vertical-align: bottom;}
			ul.pricenav li a img { opacity: 1; padding: 9px 5px 5px 5px;}
			ul.pricenav li a:hover img { opacity: .7; padding: 5px 5px 9px 5px;}

ul.pricenav li a { opacity: 1;}

.honki { width: 100%; min-width: 1200px; position: relative;}
	.honki h1 { padding: 0; margin: 0; width: 100%; text-align: center;}
	.honki p { display: block; width: 100%; text-align: center; position: absolute; bottom: 140px;}

/* 2000- settings */
@media all and (max-width:2000px){
	.honki p { bottom: 5vw;}
}

/* 2000+ settings */
@media all and (min-width:2000px){
	.honki p { bottom: 140px;}
}