@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* CSS Document */

#contents { background:#fff; padding-bottom:0 !important; color:#4c4948; }
.contents_inner { margin:60px 0 0 !important; font-family: 'Noto Sans JP'; }

.mincho { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-style: normal; font-weight: 500 }


.blue { color:#3c666e !important; }
.red { color:#915652 !important; }
.bg_blue { background:#3c666e; }
.bg_red { background:#915652; }

.new2021aw h3 { color:#4c4948; font-size:22px; margin:0 0 15px; font-style: normal; }
.new2021aw h4 { color:#4c4948; font-size:18px; font-weight:600; letter-spacing:0.08em; margin:10px 0 0; font-style: normal }
.new2021aw h5 { color:#4c4948; font-style: normal }
.new2021aw .onsale p { color:#fff; font-size:13px !important; line-height:1; letter-spacing:0.1em; background:#9c9c9d; padding:6px 0; display:inline-block; }
.new2021aw .mov { width:960px; margin:0 auto 90px; }
.new2021aw .mov .mov02 { margin:50px 0 0; }
.new2021aw .mov .mov02 p { font-size:18px; margin:0 0 10px; }
.new2021aw .mov01 iframe { border:10px solid #95733d; box-sizing:border-box; }

#main h2 { position:relative; }
#main h2 img { position:relative; z-index:1; }
#main h2 p { color:#4c4948; letter-spacing:0.1em; font-weight:normal; position:absolute; bottom:10px; right:20px; z-index:2; }

.tit { font-size:32px; line-height:1.8; letter-spacing:0.1em; position:relative; }
.tit .new { position:absolute; top:-20px; left:50%; margin:0 0 0 -374px; }

.products-img { padding:0 0 0 6%; margin:60px 0 160px; position:relative; }

.copy {-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
text-orientation: upright;
writing-mode: vertical-rl; line-height:100% !important; letter-spacing:0.25em !important; }

.item01 { min-width:1240px; text-align:left; margin:0 0 120px; position:relative; }
.item01 .pic { text-align:right; position:relative; z-index:2; }
.item01 .pic .image { position:relative; z-index:1; }
.item01 .pic p { color:#4c4948; letter-spacing:0.1em; font-weight:normal; position:absolute; bottom:10px; right:20px; z-index:2; }
.item01 .ico-limited { position:absolute; top:-30px; right:40px; z-index:3; }
.item01 .item { position:absolute; top:55px; left:0; z-index:3; margin:0 58.6% 0 12%; }
.item01 .onsale p { width:100%; }
.item01 .item-box { text-align:center; }
.item01 .item h4 { font-weight:600; letter-spacing:0.08em; margin:13px 0; }
.item01 .btn a { color:#201715; font-size:14px; font-style:italic; font-weight:500; letter-spacing:0.3em; text-decoration:none; background:#eff6f7; line-height:1; padding:50px 0 50px 80px; margin:-40px 0 0; display:block; position:relative; z-index:1; }
.item01 .btn a .arw { position:absolute; top:50%; left:240px; margin:-7px 0 0; }
.item01 .copy { position:absolute; top:0; left:6%; }

.item02 { min-width:1240px; text-align:left; margin:0 0 120px; position:relative; }
.item02 .pic { position:relative; z-index:2; }
.item02 .pic .image { position:relative; z-index:1; }
.item02 .pic p { color:#4c4948; letter-spacing:0.1em; font-weight:normal; position:absolute; bottom:10px; left:20px; z-index:2; }
.item02 .ico-limited { position:absolute; top:-30px; left:40px; z-index:3; }
.item02 .item { position:absolute; top:55px; right:0; z-index:3; margin:0 12% 0 58.6%; }
.item02 .onsale p { width:100%; }
.item02 .item-box { text-align:center; }
.item02 .item h4 { font-weight:600; letter-spacing:0.08em; margin:13px 0; }
.item02 .btn a { color:#201715; font-size:14px; font-style:italic; font-weight:500; letter-spacing:0.3em; text-decoration:none; background:#f1eee8; line-height:1; padding:50px 170px 50px 0; margin:-40px 0 0; text-align:right; display:block; position:relative; z-index:1; }
.item02 .btn a .arw { position:absolute; top:50%; right:80px; margin:-7px 0 0; }
.item02 .copy { position:absolute; top:0; right:6%; }
.item01 .btn a:hover,.item02 .btn a:hover { background:#dddddd; }



.works_gallery { min-width:1080px; padding:0 80px; margin:0 0 40px; text-align:left; position:relative; }
.works_gallery h3 { text-align:center; }
.works_gallery .read { font-size:16px; text-align:center; letter-spacing:0.2em; margin:40px 0 40px; }
.works_gallery .gal { padding: 0 0 80px; position: relative; opacity: 0 }
.works_gallery .gal .num { position: absolute; right: 40px; top: 35px; z-index: 10 }
.works_gallery .gal .num.bot { top: inherit; bottom: 200px }
.works_gallery p { color:#656464; font-size:12px; line-height:1.6em; margin:20px 0 0; }
.works_gallery p span { color:#bd9a61; }
.gal-wrap { position: relative; padding: 0 0 80px }
.works_gallery a { color:#656464; }
.gal-wrap .num { position: absolute; right: 40px; top: 40px; z-index: 10 }
.gal-wrap .cont { position: relative }
.gal-wrap .cont .gal_re { position: relative; opacity: 0 }
.gal-wrap .cont .gal_ab { position: absolute; opacity: 0 }
.works_gallery #gal4 h3 { left: 27%; top: 59.25vw; margin: -50px 0 0 -178px }
.gal-wrap .cont #ga02 { right: 0; top: 16.8vw }
.gal-wrap .cont #ga03 { margin-top: 22vw }
.gal-wrap .cont #ga04 { right: 0; bottom: 80px }
.works_gallery #gal5 h3 { left: 80px; top: inherit; bottom: 0 }
.gal-wrap .cont #ga05 { margin-left: 21% }
.gal-wrap .cont #ga06 { left: 0; top: 37.4vw }
.gal-wrap .cont #ga07 { margin: 80px 0 0 54.3% }
.works_gallery #gal5_ { margin: 80px -80px 0 }
.gal-wrap .cont #ga09 { right: 0; top: 0 }



.lower-page { min-width:1240px; padding:40px 0; position:relative; }
.lower-page .btn { margin:0 auto; width:235px; margin:30px auto 0; }
.lower-page .btn a { color:#fff; font-size:14px; font-style:italic; line-height:1; letter-spacing:0.3em; text-decoration:none; text-align:center; padding:20px 0; display:block; border-radius:40px; }

.uv-led-resin { margin:0 0 90px; }
.uv-led-resin .read { text-align:center; }
.uv-led-resin .onsale p { width:390px; margin:15px 0 30px; }
.uv-led-resin h3 { font-size:24px; letter-spacing:1em; margin:0 0 30px; }

.uv-led-resin .item { width:600px; margin:0 auto 80px; }
.uv-led-resin .item .pic { margin:0 0 20px; position:relative; }
.uv-led-resin .item .ico-limited { position:absolute; top:-15px; right:0;  }
.uv-led-resin .item h4 { font-size:20px; margin:30px 0 20px; }
.uv-led-resin .item p { text-align:left; }
.uv-led-resin .item .tx { margin:0 0 20px; }

.uv-led-resin .features { margin:60px 0 0; }
.uv-led-resin .features ul { margin:0 0 0 -30px; padding:0 17%; }
.uv-led-resin .features ul li { float:left; width:33.333%; }
.uv-led-resin .features ul li .inner { margin:0 0 0 30px; }
.uv-led-resin .features ul li h5 { font-size:16px; text-align:left; font-weight:400; line-height:1.6; margin:10px 0 0; }
.uv-led-resin .features ul li p { font-size:13px; text-align:left; margin:10px 0 0; }

.bnr { padding:0 80px; margin:0 0 80px; }


.bg-kizashi { background:url(../item01/img/bg.jpg) repeat-x center bottom; background-size: contain; }
.bg-minori { background:url(../item02/img/bg.jpg) repeat-x center bottom; background-size: contain; }

.uv-led-resin .kizashi .item .tx span { color:#cbe1e5; }
.uv-led-resin .minori .item .tx span { color:#e9cbc9; }


.btn-back { background:#f1eee8; padding:60px 0; }
.btn-back .btn-inner { margin: 0 auto; min-width:1024px; max-width:1200px; }
.btn-back a { font-size:16px; letter-spacing:0.2em; color:#452a19; text-decoration:none; padding:15px 0; background:#fff; border:4px solid #b63232; display:block; text-align:center; position:relative; min-width:1024px; max-width:1280px; margin:0 auto; display: block }
.btn-back a:hover { background: #b63232; color: #fff }
.ar01 { position:absolute; top:50%; left:50%; margin:-8px 0 0 -105px; }



@media screen and (max-width: 780px) {
		
	#main img { width:150%; margin:0 0 0 -25%; }

	.contents_inner { margin:40px 0 0 0 !important; }
	

	.new2021aw h3 { font-size:16px; line-height:1.6; }
	.new2021aw h4 { font-size:15px; }	
	.new2021aw .onsale p { font-size:11px !important; padding:5px 12px; width:auto; }	
	.new2021ss .mov { width:auto; margin:0 auto 50px; padding:0 20px; }
	.new2021ss .mov .mov02 { margin:20px 0 0; }
	.new2021ss .mov .mov02 p { font-size:15px; margin:0 0 10px; }
	.new2021ss .mov .mov01 iframe { border:5px solid #95733d; }
	
	#main h2 p { font-size:10px; position:absolute; bottom:0; right:5px; z-index:2; }
	
	.tit { font-size:20px !important; line-height:1.6; }
	.tit .new { position:absolute; top:-30px; left:50%; margin:0 0 0 -185px; height:50px; }

	.products-img { padding:0; margin:30px 0 80px; }


	.item01 { min-width: inherit; margin:0 0 70px; }
	.item01 .pic { padding:0 0 0 40px; }
	.item01 .pic img { width:100%; }
	.item01 .pic p { font-size:10px; position:absolute; bottom:5px; right:8px; z-index:2; }
	.item01 .ico-limited { position:absolute; top:-30px; right:10px; width:80px !important; height:auto; }
	.item01 .item { position:static; margin:20px 0 0; padding:0 20px; }
	.item01 .item-box { text-align:center; margin:0; }
	.item01 .item h4 {  margin:10px 0; line-height:1.4;  }
	.item01 .item-pic { margin:0; padding:0 40px; }
	.item01 .btn a { font-size:14px; padding:30px 0; margin:20px 0 0; text-align:center;  }
	.item01 .btn a .arw { position:absolute; top:50%; left:inherit; right:20px; margin:-5px 0 0; height:10px; }
	.item01 .copy { position:absolute; top:0; left:3%; }
	.item02 { min-width: inherit; margin:0 0 60px; }
	.item02 .pic { padding:0 40px 0 0; }
	.item02 .pic img { width:100%; }
	.item02 .pic p { font-size:10px; position:absolute; bottom:5px; left:8px; z-index:2; }
	.item02 .ico-limited { position:absolute; top:-30px; left:10px; width:80px !important; height:auto; }	
	.item02 .item { position:static; margin:20px 0 0; padding:0 20px; }
	.item02 .item-box { text-align:center; margin:0; }
	.item02 .item h4 {  margin:10px 0; line-height:1.4; }
	.item02 .item-pic { margin:0; padding:0 40px; }
	.item02 .btn a { font-size:14px; padding:30px 0; margin:20px 0 0; text-align:center;  }
	.item02 .btn a .arw { position:absolute; top:50%; left:inherit; right:20px; margin:-5px 0 0; height:10px; }
	.item02 .copy { position:absolute; top:0; right:3%; }	


	.works_gallery { min-width: inherit; padding:0; margin:0; }
	.works_gallery h3 img { width:80px; }
	.works_gallery .read { font-size:15px; letter-spacing:0.2em; margin:20px 0 40px; padding:0 20px; }
	.works_gallery p { font-size:11px; margin:10px 20px 0 20px; }
	.works_gallery .gal { padding: 0 0 60px; }
	.works_gallery .gal .num { right: 10px !important; top: 10px !important }
	.works_gallery .gal .num img { width: 10px }
	.works_gallery .gal .num.bot { top: inherit !important; bottom: 130px !important }
	.gal-wrap { position: relative; padding: 0 0 60px }
	.gal-wrap .num { position: absolute; right: 15px !important; top: 5px !important}
	.gal-wrap .num img { width: 32px }
	.gal-wrap .cont { position: relative; text-align: center }
	.gal-wrap .cont .gal_re { position: relative; margin-top: 40px }
	.gal-wrap .cont .gal_ab { position: relative; margin-top: 40px }
	.works_gallery #gal4 h3 { position: relative; left: inherit; top: inherit; margin: 0; text-align: left }
	.works_gallery #gal4 h3 img { width: 240px; }
	.gal-wrap .cont #ga01 { width: 100% }
	.gal-wrap .cont #ga02 { width: 66.66%; right: inherit; top: inherit }
	.gal-wrap .cont #ga03 { width: 100%; margin-top: 40px }
	.gal-wrap .cont #ga04 { width: 66.66%; right: inherit; bottom: inherit }
	.works_gallery #gal5 h3 { position: relative; left: inherit; top: inherit; bottom: inherit; margin: 0; text-align: left }
	.works_gallery #gal5 h3 img { width: 272px; }
	.gal-wrap .cont #ga05 { width: 100%; margin-left: 0 }
	.gal-wrap .cont #ga06 { width: 75%; left: inherit; top: inherit }
	.gal-wrap .cont #ga07 { width: 75%; margin: 40px 0 0 }
	.works_gallery #gal5_ { margin: 0 }
	.gal-wrap .cont #ga08 { width: 75%; }
	.gal-wrap .cont #ga09 { width: 100%; right: inherit; top: inherit }


	.lower-page-main img { width:150%; margin:0 0 0 -25%; }
	.lower-page { min-width: inherit; padding:0; }
	.lower-page .tit { margin:0 0 10px; padding:0 20px; }
	.lower-page h3 { font-size:18px; line-height:1.6; position:relative; }
	.lower-page h4 { font-size:15px; }

	
	.uv-led-resin { margin:0 0 10px; }
	.uv-led-resin .onsale { width: auto;  margin:0; }
	.uv-led-resin h3 { font-size:16px; letter-spacing:0.4em; margin:0 0 30px; }
	.uv-led-resin .item { width:auto; margin:0 auto 50px; padding:0 20px; }
	.uv-led-resin .item .pic { margin:0 0 20px; position:relative; padding:0 40px }
	.uv-led-resin .item .pic img { width:100%; }
	.uv-led-resin .color img { width:100%; }
	.uv-led-resin .item .ico-limited { position:absolute; top:-15px; right:0; width:80px !important; height:auto;  }
	.uv-led-resin .item h4 { font-size:15px; margin:30px 0 20px; }
	.uv-led-resin .features { margin:60px 0 0; }
	.uv-led-resin .features ul { margin:0; padding:0 20px; }
	.uv-led-resin .features ul li { width:100%; margin:0 0 20px; }
	.uv-led-resin .features ul li .inner { margin:0; }
	.uv-led-resin .features ul li h5 { font-size:14px; margin:5px 0 0; }
	.uv-led-resin .features ul li p { margin:0; }
	
	.sp-bg { margin:0 0 50px; }

	.bnr { padding:0 20px; margin:0 0 40px; }

	.bg-kizashi { background:none; }
	.bg-minori { background:none; }
	

	.btn-back { padding: 30px 20px; }
	.btn-back a { font-size:14px; padding:15px 0; min-width:inherit; max-width:inherit; }
	.ar01 { position:absolute; top:50%; left:50%; margin:-8px 0 0 -95px; }
	
}



@media screen and (max-width: 360px) {
	.tit { font-size:18px !important; line-height:1.6; }
	.tit .new { position:absolute; top:-25px; left:50%; margin:0 0 0 -155px; height:40px; }
	.uv-led-resin h3 { font-size:15px; letter-spacing:0.3em; margin:0 0 30px; }
	.works_gallery .read { font-size:13px; letter-spacing:0.2em; margin:20px 0 40px; padding:0 20px; }
}