@charset "UTF-8";

/* common */
.nl_cont *{ box-sizing:border-box; }
.nl_cont img{ width:auto; max-width:100%; height: 100%; object-fit: contain; }
.nl_cont figure{ margin:0; }

.nl_cont a,
.nl_cont a:link,
.nl_cont a:visited,
.nl_cont a:hover,
.nl_cont a:active{ text-decoration:none; }
.nl_cont a,
.nl_cont a img{ transition: all 0.3s ease; }
.nl_cont a:hover img{ opacity:0.7; }

.nl_cont h1,
.nl_cont h2,
.nl_cont h3{ font-size:32px; line-height: 1.6; text-align:center; }
.nl_cont h2,
.nl_cont h3{ margin-bottom:30px; }
.nl_cont h2 span{ white-space:nowrap; }
.nl_cont h2 i{ font-size:1.5em; margin-right:0.2em; vertical-align:bottom; color:#0099f9; }
.nl_cont h3{ font-size:28px; }
.nl_block p,
.nl_block li{ line-height:2; }

/* layout */
.nl_cont{ width: 982px; margin-left:auto; margin-right:auto; padding:0 0 60px; box-sizing:border-box; }
.nl_block{ margin-top: -100px; padding-top: 100px; margin-bottom:80px; }
.nl_block p,
.nl_img,
.nl_shops{ margin-bottom:40px; font-size:1.2em; }

/* content */
.nl_ttl{ margin-right: calc(50% - 50vw + 8.5px); margin-left: calc(50% - 50vw + 8.5px); margin-bottom:60px; position:relative; text-align:center; max-height:500px; overflow:hidden; }
.nl_ttl img{ width:100%; max-width:none; object-fit: cover; }
.nl_ttl2{ margin-bottom:60px; }
.nl_ttl2 img{ width:100%; }

.nl_type{ border:solid 1px #3296ff; color:#3296ff; padding:16px; margin-bottom:40px; }
.nl_type li{ padding-bottom:10px; font-weight:bold; }
.nl_type li:last-child{ padding-bottom:0; }

.nl_lineup,
.nl_lineup2{ display: flex; flex-wrap: wrap; margin-bottom:30px; }
.nl_lineup > li,
.nl_lineup2 > li{ display: flex; flex-direction: column; width:30%; margin:0 5% 30px 0; padding-bottom:60px; position:relative;  }
.nl_lineup > li:nth-child(3n),
.nl_lineup2 > li:nth-child(3n){ margin:0 0 30px; }
.nl_lineup > li *,
.nl_lineup2 > li *{ display: flex; flex-direction: column; width:100%; /* IE11のバグ対策 */}
.thumbnail{ margin-bottom:5px; height:220px; max-height:220px; transition: all 0.4s ease; text-align:center; }
.nl_block .model_name{ text-align:center; font-weight:bold; font-size:22px; margin-bottom:5px; }
.nl_block .other_list{ margin-bottom:0;font-size:0.8em; }
.nl_lineup .nl_acc_hover,
.nl_lineup2 > li > a:last-child{ display:block; position:absolute; bottom:0; width:100%; padding:5px 0; }
.nl_lineup .nl_acc_hover dt,
.nl_lineup2 > li > a:last-child{ cursor:pointer; position:absolute; bottom:0; width:100%; color:#00a1ff; text-align:center; border:solid 1px #aee1ff;  background-color: #fff;  background-image: radial-gradient(#aee1ff 28%, transparent 35%), radial-gradient(#aee1ff 28%, transparent 35%); background-size: 4px 4px; background-position: 0 0, 2px 2px; padding:0; transition: all 0.3s ease; }
.nl_lineup .nl_acc_hover dt:hover,
.nl_lineup .nl_acc_hover dt.active,
.nl_lineup2 > li > a:last-child:hover{ background-color:#daf1ff; text-decoration:none; }
.nl_lineup .nl_acc_hover dd{ background:rgba(224,242,253,0.9); padding:0 0 2em;}
.nl_lineup .nl_acc_hover dd p{ font-size:1em; line-height:1.1; margin-bottom:0; }
.nl_lineup .nl_acc_hover dd a,
.nl_lineup .nl_acc_hover dd span{ display:block;padding:0.8em 0.5em; }
.nl_lineup .nl_acc_hover dd a:hover{ background:rgba(0,191,255,0.2); color:#0087d7; }
.nl_lineup .nl_acc_hover dd span{ color:#999; }

.nl_block .nl_cp{ height:150px; padding:40px 0; text-align:center; font-size:1.5em; font-weight:bold; line-height:1.6; color:#fefefe; background:url(../../images/campaign/newlife2022/NewLife_structure_present_background.jpg) no-repeat 0 0; background-size: contain; }
.nl_cp a:hover{ text-decoration:underline; }

.nl_shops{ border:solid 1px #0099f9; line-height:2; padding:10px; }

.nl_twitter > div{ margin-left:auto; margin-right:auto; }

/* mobile */
@media screen and (min-width:768px) and (max-width: 982px){
	/* correction */
	main,
	header,
	.footer_box,
	#footer_sitemap{ min-width: auto; }
	#header_inner,
	.Breadcrumb ul,
	.history_box_tab,
	.history_box_inner{ width: auto; }
	.footer_sitemap02,
	.footer_sitemap03{ margin-top:30px; }
	
	/* layout */
	.nl_ttl{ margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
	.nl_cont{ width: 100%; padding:0 20px 60px; }
	
	/* content
	.nl_twiend{ border:solid 1px rgb(207, 217, 222); border-top:0; border-bottom-left-radius:12px; border-bottom-right-radius:12px; padding-bottom:14px; margin:-11px auto 0; max-width:550px } */
}

/* mobile */
@media screen and (max-width: 768px){
	/* common */
	.nl_cont h1,
	.nl_cont h2{ font-size: 140%; }
	.nl_cont h3{ font-size: 130%; }
	.nl_cont h2{ text-indent:-0.9em;margin-left:1.6em; }
	.nl_cont h2,
	.nl_cont h3{ text-align:left; }
	.nl_cont p,
	.nl_cont li,
	.nl_shops{ font-size: 88.75%; line-height: 1.8; }
	
	/* layout */
	.nl_cont{ width: 100%; padding:0 20px 40px; }
	.nl_block{ padding-bottom:0; margin-bottom:60px; }
	.nl_cont p,
	.nl_img,
	.nl_shops{ margin-bottom:20px; }

	/* content */
	.nl_ttl{ margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); max-height:none; height:400px; }
	
	.nl_block figcaption{ font-size:0.8em; }
	
	.nl_type{ margin-bottom:20px; }
	.nl_type li span{ display:block; }
	
	.nl_lineup > li,
	.nl_lineup2 > li{ width:50%; margin:0 0 20px 0; }
	.nl_lineup > li:nth-child(3n),
	.nl_lineup2 > li:nth-child(3n){ margin:0 0 20px 0;}
	.nl_lineup > li:nth-child(odd),
	.nl_lineup2 > li:nth-child(odd){ padding:0 10px 45px 0;}
	.nl_lineup > li:nth-child(even),
	.nl_lineup2 > li:nth-child(even){ padding:0 0 45px 10px;}
	.nl_block .model_name {font-size: 90.75%;}
	.nl_block .other_list{ line-height:1.6; }
	.nl_lineup .nl_acc_hover,
	.nl_lineup2 a{ padding:3px 0; }
	.thumbnail{ height:150px; max-height:150px; }
	
	.nl_block .nl_cp{ height:auto; padding:20px; text-align:left; font-size:1em; background-size:cover;}
	.nl_cont .nl_cp a{ text-decoration:underline; }
	
	/*.nl_twiend{ border:solid 1px rgb(207, 217, 222); border-top:0; border-bottom-left-radius:12px; border-bottom-right-radius:12px; padding-bottom:14px; margin:-11px auto 0; max-width:550px }*/
}