@charset "utf-8";
#container,
#local,
#subLink,
#siteFooter,
.anchor{}
nav#subLink{padding-top:80px;}


.lighten .spBr{display:none;}
.lighten{background:url("/lightening_load/images/pageBg.png") no-repeat center top #ebf4fa; background-attachment:fixed;}
.lighten article{max-width:1160px; margin:0 auto;}
.lighten article header{height:480px; position: relative; background:url("/lightening_load/images/sideTitle.png") no-repeat calc(100% - 20px) 25px;}
.lighten article header h1{margin-bottom:0 !important; height:100%; display:flex; justify-content:center; align-items:center;}
.lighten article header h1 img{display:block; transform:scale(100%); transition:transform .2s cubic-bezier(.17,.67,.84,1.39) .5s; animation:fuwa 3.5s linear infinite 0s; will-change: animation; backface-visibility: hidden; animation-delay:1s; width:530px; height:auto;}
.lighten article header .items{width:100%; height:100%; position:absolute; left:0; top:0;}
.lighten article header .items img{transform:scale(100%); display:block; position:absolute; transition:transform .2s cubic-bezier(.17,.67,.84,1.39); animation:fuwa 4.5s linear infinite 0s; will-change: animation; backface-visibility: hidden;}
.lighten article header.stay h1 img,
.lighten article header.stay .items img{transform:scale(0%);}

.lighten article .ph{opacity:0; transition:opacity 2s ease; margin-bottom:20px; overflow:hidden;}
.lighten article .ph.here{opacity:1;}
.lighten article section{background:#fff; padding:50px 20px 50px 50px; clear:both; position:relative; margin:100px 0 -100px; transition:margin .5s ease;}
.lighten article .ph.here section{margin:0;}
.lighten article section::after{content:''; display:block; clear:both;}
.lighten article section h2{width:100%; font-size:36px; font-weight:bold; padding-bottom:20px; position:relative; margin-bottom:30px;}
.lighten article section h2::after{width:75px; height:4px; background:#eb3223; position:absolute; left:0; bottom:0; content:''; display:block;}
.lighten article section .content{width:480px; float:left; margin-bottom:30px;}
.lighten article section .content p:last-child{margin-bottom:0 !important;}
.lighten article section .fig{width:calc(100% - 490px); float:right;}
.lighten article section .fig figure{margin-bottom:50px;}
.lighten article section .fig figure:last-child{margin-bottom:0;}
.lighten article section .fig figure img{display:block; margin:0 auto;}
.lighten article section .char img{display:block;}
.lighten article section .goDetail{width:100%; text-align:center; clear:both; padding-top:30px;}

.seeNext h2 img{margin:100px auto 0; display:block;}
.seeNext nav{background:#f4f3f3; padding:40px;}
.seeNext nav h3{text-align:center; font-size:18px; font-weight:bold; margin-bottom:20px;}
.seeNext nav h3 a{color:#000; text-decoration:none;}
.seeNext nav h3 a:hover{border-bottom:1px #eb3223 solid;}
.seeNext nav ul{display:flex; justify-content:center; align-items:center;}
.seeNext nav ul li{font-size:14px; margin:0 1.5em; font-weight:bold;}
.seeNext nav ul li a{color:#000; text-decoration:none; padding:2px;}
.seeNext nav ul li a.active,
.seeNext nav ul li a:hover{border-bottom:1px #eb3223 solid;}

nav.anchor{position:fixed; right:40px; top:200px; z-index:2;}
nav.anchor ul li{margin-bottom:10px; position:relative; height:20px;}
nav.anchor div{display:block; position:relative; padding-right:20px; text-decoration:none; color:#eb3223; cursor:pointer;}
nav.anchor div::after{width:20px; height:20px; border-radius:50%; content:''; display:block; background:#ccc; transition:background .3s ease; position:absolute; right:0; top:calc(50% - 10px);}
nav.anchor div.current::after,
nav.anchor div:hover::after{background: #eb3223;}
nav.anchor div span{display:block; font-size:11px; padding:2px 30px 2px 10px; border:1px #eb3223 solid; background:#fff; font-weight:bold; height:18px; line-height:1; border-radius:20px; white-space:nowrap; overflow:hidden; transition:all .3s ease; position:absolute; right:0; top:calc(50% - 9px); opacity:0; pointer-events:none;}
nav.anchor div:hover span{opacity:1; pointer-events:auto;}

nav.anchor li.current div::after{background: #eb3223;}

/* 01 vehicle */
.lighten article header.vehicle .items .char {width:921px; height:411px; left: 40px; top: 80px; transition-delay:1.00s; animation-delay:2.0s;}
.lighten article header.vehicle .items .item1{width: 87px; height: 74px; left:820px; top:100px; transition-delay:1.25s; animation-delay:2.2s;}
.lighten article header.vehicle .items .item2{width: 96px; height: 60px; left:965px; top:250px; transition-delay:1.50s; animation-delay:2.4s;}
.lighten article section.c01s02{padding-bottom:0;}
.lighten article section.c01s02 .char{width:480px;}
.lighten article section.c01s02 .char img{margin:0 0 0 80px;}
.lighten article section.c01s04 .char img{margin:0 auto;}
.lighten article section.c01s06{padding-bottom:0;}
.lighten article section.c01s06 .char img{margin-left:80px;}

/* 02 environment */
.lighten article header.env .items .char {width:375px; height:375px; left: 40px; bottom:-20px; transition-delay:1.00s; animation-delay:2.0s;}
.lighten article header.env .items .item1{width:114px; height: 92px; left:198px; top: 42px; transition-delay:1.25s; animation-delay:2.2s;}
.lighten article header.env .items .item2{width: 82px; height: 60px; left:965px; top:250px; transition-delay:1.50s; animation-delay:2.4s;}
.lighten article section.c02s05 .char{clear:both; padding-top:30px;}
.lighten article section.c02s05 .char img{margin:0 auto;}

/* 03 door */
.lighten article header.door .items .char {width:158px; height:337px; left:180px; top: 90px; transition-delay:1.00s; animation-delay:2.0s;}
.lighten article header.door .items .item1{width:1075px; height: 84px; left:40px; top: 360px; transition-delay:1.25s; animation-delay:2.2s;}
.lighten article section.c03s03{padding-bottom:0;}
.lighten article section.c03s03 .char img{margin:0 auto;}

/* 04 work */
.lighten article header.work .items .char {width:308px; height:280px; left: 70px; top:140px; transition-delay:1.00s; animation-delay:2.0s;}
.lighten article header.work .items .item1{width:227px; height:272px; left:860px; top:140px; transition-delay:1.25s; animation-delay:2.2s;}

/* 05 style */
.lighten article header.style .items .char {width:265px; height:438px; left: 80px; top: 20px; transition-delay:1.00s; animation-delay:2.0s;}
.lighten article header.style .items .item1{width:271px; height:244px; left:800px; top:200px; transition-delay:1.25s; animation-delay:2.2s;}


@media screen and (max-width:768px){
	nav#subLink{background:#fff; padding-top:40px;}
	nav#subLink,#siteFooter{z-index:1; position:relative;}
	.lighten .spBr{display:inline;}
	.lighten{background:none transparent; position:relative; z-index:0;}
	.lighten::before{content:''; display:block; width:100%; height:100%; position:fixed; left:0; top:90px; background:url("/lightening_load/images/pageBg_sp.png") no-repeat center top #ebf4fa; background-size:100% auto;}
	.lighten article{max-width:none; padding:0 15px;}
	.lighten article header{height:70vw; width:100vw; margin:0 -15px; background:url("/lightening_load/images/sideTitle.png") no-repeat calc(100% - 15px) 15px; background-size:20vw auto;}
	.lighten article header h1 img{width:70vw;}
	.lighten article .ph{margin-bottom:15px;}
	.lighten article section{padding:20px; margin:50px 0 -50px;}
	.lighten article .ph.here section{margin:0;}
	.lighten article section h2{font-size:18px; padding-bottom:10px; margin-bottom:10px;}
	.lighten article section h2::after{width:2em; height:2px;}
	.lighten article section .content{width:auto; float:none; margin-bottom:15px; font-size:14px;}
	.lighten article section .content:last-child{margin-bottom:0;}
	.lighten article section .content figure{margin-bottom:15px; padding:0 3vw;}
	.lighten article section .fig{width:auto; float:none; padding:10px 3vw;}
	.lighten article section .fig figure{margin-bottom:20px;}
	.lighten article section .content + .fig{padding-top:0;}
	.lighten article section .goDetail{padding-top:10px;}
	.lighten article section .goDetail img{width:110px; height:auto;}

	nav.anchor{right:15px; top:160px; z-index:10;}
	nav.anchor ul li{margin-bottom:18px; height:16px;}
	nav.anchor div{padding-right:0;}
	nav.anchor div::after{width:16px; height:16px; top:calc(50% - 8px); cursor:pointer;}
	nav.anchor div::before{width:32px; height:32px; top:calc(50% - 16px); cursor:pointer; display:block; content:''; position:absolute; right:-8px; background:transparent;}
	nav.anchor div span{display:none;}
	nav.anchor div:hover::after{background: #ccc;}
	nav.anchor div.current::after{background: #eb3223;}


	.seeNext{margin:0 auto; position:relative; z-index:1;}
	.seeNext h2 img{margin:20vw auto 0; display:block; width:80vw;}
	.seeNext nav{padding:5vw;}
	.seeNext nav h3{font-size:4vw; margin-bottom:3vw;}
	.seeNext nav ul{display:block;}
	.seeNext nav ul li{font-size:14px; margin:0 0 5px; text-align:center;}

	/* 01 vehicle */
	.lighten article header.vehicle .items .char {width:90vw; height:auto; left:5vw; top:20vw;}
	.lighten article header.vehicle .items .item1{width:10vw; height:auto; left:77vw; top:20vw;}
	.lighten article header.vehicle .items .item2{width:11vw; height:auto; left:81vw; top:53vw;}
	.lighten article section.c01s02 figure{padding:3vw 0 0 25vw;}
	.lighten article section.c01s02 .char{width:auto;}
	.lighten article section.c01s02 .char img{margin:-4vw 0 0 -4vw; width:60vw;}
	.lighten article section.c01s03 .fig{padding:0;}
	.lighten article section.c01s04 .content figure{padding:0 3vw;}
	.lighten article section.c01s04 .fig{padding:0 5vw; margin-bottom:5vw}
	.lighten article section.c01s04 .char img{width:50vw;}
	.lighten article section.c01s06{padding-bottom:0;}
	.lighten article section.c01s06 .char img{margin:0 auto; width:70vw;}
	
	/* 02 environment */
	.lighten article header.env .items .char {width:30vw; height:auto; left:4vw; bottom:-2vw;}
	.lighten article header.env .items .item1{width:6vw; height:auto; left:18vw; top:38vw;}
	.lighten article header.env .items .item2{width:8vw; height:auto; left:82vw; top:48vw;}
	.lighten article section.c02s05 .char{padding-top:0;}
	.lighten article section.c02s05 .char img{width:50vw; margin:0 auto 0 24vw;}
	
	/* 03 door */
	.lighten article header.door{height:80vw;}
	.lighten article header.door .items .char {width:15vw; height:auto; left:18vw; top:46vw;}
	.lighten article header.door .items .item1{width:90vw; height:auto; left:5vw; top:72vw;}
	.lighten article section.c03s01 .fig img{width:60vw;}
	.lighten article section.c03s03{padding-bottom:0;}
	.lighten article section.c03s03 .char img{width:55vw; margin:0 auto 0 8vw;}

	/* 04 work */
	.lighten article header.work .items .char {width:28vw; height:auto; left:5vw; top:43vw;}
	.lighten article header.work .items .item1{width:20vw; height:auto; left:75vw; top:45vw;}
	.lighten article section.c04s03 .fig{padding:0 0 3vw;}
	
	/* 05 style */
	.lighten article header.style .items .char {width:27vw; height:auto; left: 4vw; top:17vw;}
	.lighten article header.style .items .item1{width:22vw; height:auto; left:71vw; top:40vw;}
	.lighten article section.c05s01 .fig{padding:0 0 3vw;}
	.lighten article section.c05s02 .fig img{width:66vw;}
}

@media print{
	.lighten article .ph{overflow:visible; height:auto !important; opacity:1 !important;}
	.lighten article .ph section{margin:0 !important;}
	nav.anchor,
	#subLink{display:none;}
}