@charset "utf-8";
/*
================================================================================================
	di-tutorials.css
================================================================================================
*/
/*------------------------------------------------
	Common Styles
------------------------------------------------*/
#di-tutorials {
	max-width: 950px;
	margin: 0 auto;
}
#di-tutorials section {
	margin: 0 0 50px;
}

/*************************
Title
*************************/
#di-tutorials h1 {
	margin: 50px 0 60px;
    font-size: 2.4em;
}

/*************************
Main Graphic
*************************/

/*** TOP ***/
#di-tutorials .main-gp .ttl.white-area h1 {
	color: #333;
	font-size: 2.5em;
	display: inline-block;
	text-align: left;
	margin: 1em 0;
}
#di-tutorials .main-gp .ttl.white-area h1 span {
	display: block;
	margin: 15px 0 0;
	font-size: 40%;
	line-height: 1.5;
}
	@media (max-width: 600px) {
		#di-tutorials .main-gp .ttl.white-area h1 {
			width: 100%;
    		margin: 10px 0 0;
			font-size: 5.0em;
		}
		#di-tutorials .main-gp .ttl.white-area h1 span {
			margin: 10px 0 0 ;
		}
	}
	@media (max-width: 480px) {
		#di-tutorials .main-gp .ttl.white-area h1 {
			font-size: 3.85em;
		}
	}
#di-tutorials .main-gp {
	position: relative;
}
#di-tutorials .main-gp .ttl.white-area {
	position: absolute;
	background-color: #fff;
	width: 40%;
	left: 5%; 
	bottom: calc(40% - 25px); 
	text-align: center;
}
	@media (max-width: 960px) {
		#di-tutorials .main-gp .ttl.white-area {
			font-size: 0.75em;
		}
	}
	@media (max-width: 600px) {
		#di-tutorials .main-gp .ttl.white-area {
			position: static;
			width: 100%;
			text-align: left;
		}
	}

/*** shooting-tips ***/
#di-tutorials .main-gp .ttl.left h1,
#di-tutorials .main-gp .ttl.right h1 {
	color: #fff;
	font-size: 3.0em;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, .8), 0px 0px 8px rgba(0, 0, 0, .5);
	margin: 1em 0;
}
#di-tutorials .main-gp .ttl.left h1 span,
#di-tutorials .main-gp .ttl.right h1 span {
	display: block;
	font-size: 55%;
	line-height: 1.3;
}
#di-tutorials .main-gp .ttl.left {
	position: absolute;
	width: 100%;
	left: 10%; 
	bottom: calc(40% - 25px); 
}
#di-tutorials .main-gp .ttl.right {
	position: absolute;
	width: 100%;
	right: 10%; 
	bottom: calc(40% - 25px); 
}
	@media (max-width: 960px) {
		#di-tutorials .main-gp .ttl.left,
		#di-tutorials .main-gp .ttl.right {
			font-size: 0.75em;
		}
	}
	@media (max-width: 600px) {
		#di-tutorials .main-gp .ttl.left,
		#di-tutorials .main-gp .ttl.right {
			bottom: calc(35% - 25px); 
		}
	}


/*------------------------------------------------
	index Styles
------------------------------------------------*/

/*************************
Title
*************************/
#di-tutorials .toc .ttl {
    font-size: 1.1em;
    margin-top: 15px;
}

/*************************
table of contents
*************************/
#di-tutorials ul.toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto 20px;
	padding: 0;
	width: calc(100% - 50px);
	list-style: none;
}
#di-tutorials ul.toc::after,
#di-tutorials ul.toc li {
	width: calc( (100% - 60px) / 3 );
	margin: 0 0 30px;
}
#di-tutorials ul.toc::after {
	content: "";
}
	@media screen and (max-width: 960px) {
		#di-tutorials ul.toc {
				width: 100%;
			}
		#di-tutorials ul.toc::after,
		#di-tutorials ul.toc li {
			width: calc( (100% - 30px) / 3 );
		}
	}
	@media screen and (max-width: 600px) {
		#di-tutorials ul.toc::after,
		#di-tutorials ul.toc li {
			width: calc( (100% - 15px) / 3 );
		}
	}
	@media screen and (max-width: 480px) {
		#di-tutorials ul.toc::after,
		#di-tutorials ul.toc li {
			width: 100%;
		}
	}
#di-tutorials ul.toc.border img {
	background-color: #f3f3f5;
	padding: 25px;
}
	@media screen and (max-width: 600px) {
		#di-tutorials ul.toc.border::after,
		#di-tutorials ul.toc.border li {
			width: 100%;
		}
	}

/*************************
Banner
*************************/
#di-tutorials #banner-wrap,
#di-tutorials #banner-wrap * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#di-tutorials #banner-wrap {
	padding: 0 30px;
}
#di-tutorials #banner-wrap p.banner_btn {
	margin: 0 auto;
	width: 100%;
}
#di-tutorials #banner-wrap .banner_btn a {
	background-size: cover;
	background-position: center;
	border: solid 3px #ccc;
	color: #fff;
	display: block;
	margin: 5px 0 30px;
	padding: 5px 15px;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, .8),
				0px 0px 8px rgba(0, 0, 0, .5);
}
#di-tutorials #banner-wrap .banner_btn a:hover {
	opacity: 0.5;
	filter: alpha(Opacity=50);
	-ms-filter: "alpha( opacity=50)";
	filter: alpha( opacity=50);
	-webkit-transition: opacity 250ms;
	-moz-transition: opacity 250ms;
	-ms-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}
#di-tutorials #banner-wrap .banner_btn a,
#di-tutorials #banner-wrap .banner_btn a:hover,
#di-tutorials #banner-wrap .banner_btn a:active,
#di-tutorials #banner-wrap .banner_btn a:focus {
	text-decoration: none;
}
#di-tutorials #banner-wrap .banner_btn.basic-knowledge a {
	background-image: url(/support/ilc/learn/common/images/learnmore/knowledge/promo_top.jpg);
}
#di-tutorials #banner-wrap .banner_btn.shooting-tips a {
	background-image: url(/support/ilc/learn/common/images/learnmore/shootingtips/promo_top.jpg);
}
#di-tutorials #banner-wrap .banner_btn span.banner_title {
	font-size: 3em;
	font-weight: bold;
}
	@media screen and (max-width: 960px) {
		#di-tutorials #banner-wrap {
    		font-size: 80%;
		}
	}
	@media screen and (max-width: 600px) {
		#di-tutorials #banner-wrap {
			padding: 0;
    		font-size: 60%;
		}
	}


/*------------------------------------------------
	Shooting tips  +  Basic Knowledge
				Styles
------------------------------------------------*/

/*************************
Title
*************************/
#di-tutorials h2 {
	margin: 0 0 15px;
	font-size: 2em;
	line-height: 1.2375;
}
#di-tutorials h3 {
	margin: 0 0 1em;
}
	@media (max-width: 320px) {
		#di-tutorials h3 {
			margin: 0 0 .5em;
		}
	}

/*************************
Text
*************************/
#di-tutorials .caption {
	line-height: 1.3;
	margin: 10px 0 0;
	padding: 0 0 15px;
	width: auto;
	font-size: 0.8em;
	color: #212430;
}
#di-tutorials .caption.col,
#di-tutorials .caption.col3,
#di-tutorials .caption.col4 {
	display: flex;
	justify-content: space-between;
}
#di-tutorials .caption.col span {
	width: 48%;
}
#di-tutorials .caption.col3 span {
	width: 31%;
}
#di-tutorials .caption.col4 span {
	width: 23%;
}
#di-tutorials .caption.col span.vertical {
	width: 38%;
}
#di-tutorials .gray {
	color: #83838f;
}
#di-tutorials span.mode {
	font-weight: bold;
}
#di-tutorials .left {
	text-align: left;
}
#di-tutorials .right {
	text-align: right;
}

/*************************
List
*************************/
#di-tutorials ol {
    list-style: decimal;
}
#di-tutorials ul.annotation {
	margin: 0 0 0 .5em;
}
#di-tutorials ul.annotation li {
	list-style: none;
	text-indent: -0.7em;
	font-size: 0.9em;
}
#di-tutorials ol li ul.annotation,
#di-tutorials ul li ul.annotation,
#di-tutorials dl dt ul.annotation,
#di-tutorials dl dd ul.annotation {
	margin: 0 0 0 1em;
}
	@media (max-width: 768px) {
		#di-tutorials ul.annotation {
			margin: 0;
		}
		#di-tutorials ol li ul.annotation,
		#di-tutorials ul li ul.annotation,
		#di-tutorials dl dt ul.annotation,
		#di-tutorials dl dd ul.annotation {
			margin: 0 0 0 0.5em;
		}
	}

/*************************
Background color
*************************/
#di-tutorials .gray-area {
	background-color: #f3f3f5;
	padding: 40px;
}
	@media (max-width: 960px) {
		#di-tutorials .gray-area {
			padding: 20px;
		}
	}
	@media (max-width: 320px) {
		#di-tutorials .gray-area {
			padding: 10px;
		}
	}

/*************************
Image
*************************/
#di-tutorials .img.cnt {
	text-align: center;
	margin: 0 0 20px;
}
	@media (max-width: 480px) {
		#di-tutorials .img.cnt img {
			width: 50%;
		}
	}

/*************************
Flex-box
*************************/
#di-tutorials .block,
#di-tutorials .block.col2,
#di-tutorials .block.col3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 0 20px;
}
#di-tutorials .block.col2,
#di-tutorials .block.col3 {
	align-items: stretch;
}
#di-tutorials .block .txt {
	width: calc(100% - 505px);
	margin: 0 0 10px;
}
#di-tutorials .gray-area .block .txt {
	width: calc(100% - 495px);
}
#di-tutorials .block.thin .txt {
	width: calc(100% - 270px);
}
#di-tutorials .gray-area .block.thin .txt {
    width: calc(100% - 260px);
}
#di-tutorials .block .img {
	width: 495px;
	background-color: #f3f3f5;
	padding: 25px 25px 0;
	margin: 0 0 20px;
}
#di-tutorials .gray-area .block .img {
	width: 485px;
	background-color: #fff;
	padding: 20px 20px 0;
}
#di-tutorials .block.thin .img {
	width: 260px;
}
#di-tutorials .gray-area .block.thin .img {
	width: 250px;
}
#di-tutorials .block .img.cnt {
	width: 505px;
	padding: 30px 30px 5px;
	margin: 0 auto 20px;
	text-align: start;
}
#di-tutorials .gray-area .block .img.cnt {
	width: 495px;
	padding: 25px 25px 0;
}
#di-tutorials .block .img.wide {
	width: 864px;
	padding: 30px 30px 5px;
	margin: 0 auto 20px;
}
#di-tutorials .gray-area .block .img.wide {
	width: 854px;
	padding: 25px 25px 0;
}
#di-tutorials .block.col2 .img {
	width: calc( (100% - 70px) / 2 );
	padding: 30px 30px 5px;
}
#di-tutorials .gray-area .block.col2 .img {
	padding: 25px 25px 0;
}
#di-tutorials .block.col2 .img.one-third {
	width: 32%;
}
#di-tutorials .block.col2 .img.two-thirds {
	width: 60%;
}
#di-tutorials .block.col3 .img {
	width: calc( (100% - 50px) / 3 );
	padding: 30px 30px 5px;
}
#di-tutorials .gray-area .block.col3 .img {
    width: calc( (100% - 30px) / 3 );
    padding: 20px 20px 0;
}
#di-tutorials .block.col3::after {
	width: calc( (100% - 50px) / 3 );
	content: "";	
}
#di-tutorials .gray-area .block.col3::after {
	width: calc( (100% - 30px) / 3 );
	content: "";
}
#di-tutorials .block .img img, 
#di-tutorials .products .works img {
	display: flex;
	width: auto;
	margin: 0 auto;	
}
#di-tutorials .gray-area.img-box {
	margin: 0 30px 20px;
	padding: 30px 30px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#di-tutorials .gray-area.img-box .img {
	width: 400px;
}
#di-tutorials .gray-area.img-box .img img {
	width: 100%;
}
#di-tutorials .products {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 20px;
}
#di-tutorials .products .items {
	width: calc( (100% - 70px) / 2 );
	margin: 0;
}
#di-tutorials .products .items.row1,
#di-tutorials .products .items.row1-2 {
	width: 100%;
}
#di-tutorials .products .items .works {
	background-color: #f3f3f5;
	padding: 30px 30px 5px;
	margin: 0 0 20px;
}
#di-tutorials .products .items.row1-2 .works,
#di-tutorials .products .items.row1 .works {
	float: right;
}
#di-tutorials .products .items.row1-2 .model {
	display: block;
	float: right;
	margin: 20px 50px 20px 0;
	text-align: center;
	width: 246px;
}
#di-tutorials .products .items.row1-2 .model img {
	margin: 0 0 20px;
	width: 196px;
}
#di-tutorials .products .items .model {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 20px;
}
#di-tutorials .products .items.row1 .model {
	margin: 20px 0;
}
#di-tutorials .products .items .model .img {
	width: 154px;
	text-align: center;
}
#di-tutorials .products .items .model .img img {
	margin: 0 0 10px;	
}
#di-tutorials .products .items .model .txt {
	flex: 1;
    padding: 0 10px 0 0;
}
	@media (max-width: 1190px) {
		#di-tutorials .products .items {
			width: calc( (100% - 20px) / 2 );
		}
		#di-tutorials .products .items .model .img {
			width: 35%;
		}
		#di-tutorials .block {
			justify-content: center;
		}
		#di-tutorials .gray-area .block .txt,
		#di-tutorials .gray-area .block.thin .txt {
			width: auto;
			padding: 0;
		}
		#di-tutorials .gray-area.img-box .img {
			width: calc( (100% - 30px) / 2 );
		}
	}
	@media (max-width: 960px) {
		#di-tutorials .block .txt,
		#di-tutorials .block.thin .txt {
			width: auto;
			padding: 0;
		}
		#di-tutorials .block .img.cnt,
		#di-tutorials .gray-area .block .img.cnt {
			width: 485px;
		}
		#di-tutorials .block .img,
		#di-tutorials .block .img.thin,
		#di-tutorials .block .img.cnt,
		#di-tutorials .gray-area .block .img.cnt,
		#di-tutorials .block .img.wide,
		#di-tutorials .gray-area .block .img.wide,
		#di-tutorials .products .items .works,
		#di-tutorials .products .items.row1-2 .works,
		#di-tutorials .gray-area.img-box {
			padding: 20px 20px 0;
		}
		#di-tutorials .block.col2 .img {
		    width: calc( (100% - 15px) / 2 );
			padding: 15px 15px 0;
		}
		#di-tutorials .gray-area .block.col2 .img {
			padding: 15px 15px 0;
		}
		#di-tutorials .block.col3 .img,
		#di-tutorials .gray-area .block.col3 .img {
			width: calc( (100% - 20px) / 3 );
			padding: 15px 15px 0;
		}
		#di-tutorials .products .items {
			width: 100%;
			margin: 0 0 20px;
		}
		#di-tutorials .products .items .works {
			width: 420px;
		}
		#di-tutorials .products .items .works img,
		#di-tutorials .products .items .model .img {
			width: auto;
		}
		#di-tutorials .products .items.row1 .works {
			float: none;
		}
		#di-tutorials .products .items.row1-2 .works {
			width: 485px;
			float: none;
		}
		#di-tutorials .products .items.row1-2 .model {
			float: none;
			margin: 20px 50px 0 0;
			width: 150px;
		}
		#di-tutorials .products .items .model .txt {
			flex: auto;
		}
		#di-tutorials .products .items .model .img img,
		#di-tutorials .products .items.row1-2 .model img {
			width: 60%;	
		}
		#di-tutorials .gray-area.img-box .img {
			width: calc( (100% - 20px) / 2 );
		}
	}
	@media (max-width: 768px) {
		#di-tutorials .block.col2 .img.one-third {
			width: 270px;
		}
		#di-tutorials .block.col2 .img.two-thirds {
			width: 540px;
		}
		#di-tutorials .block.col2 .img.one-third img,
		#di-tutorials .block.col2 .img.two-thirds img {
			width: auto;
		}
		#di-tutorials .block.col3 .img,
		#di-tutorials .gray-area .block.col3 .img {
			width: calc( (100% - 20px) / 2 );
		}
		#di-tutorials .block.col3 .img img,
		#di-tutorials .gray-area .block.col3 .img img {
		    width: 100%;
		}
		#di-tutorials .gray-area.img-box {
			margin: 0;
		}
	}
	@media (max-width: 600px) {
		#di-tutorials .block.col2,
		#di-tutorials .block.col3 {
			justify-content: center;
		}
		#di-tutorials .block.col3::after,
		#di-tutorials .gray-area .block.col3::after {
			content: normal;
		}
		#di-tutorials .block.col2 .img,
		#di-tutorials .gray-area .block.col2 .img {
			width: auto;
		}
		#di-tutorials .block.col3 .img,
		#di-tutorials .gray-area .block.col3 .img {
			width: 270px;
		}
		#di-tutorials .gray-area.img-box .img {
			width: 100%;
		}
		#di-tutorials .products .items.row1-2 .works {
			width: 100%;
		}
	}
	@media (max-width: 480px) {
		#di-tutorials .block .img,
		#di-tutorials .gray-area .block .img,
		#di-tutorials .block .img.cnt,
		#di-tutorials .gray-area .block .img.cnt,
		#di-tutorials .block .img.wide,
		#di-tutorials .gray-area .block .img.wide,
		#di-tutorials .block.col2 .img,
		#di-tutorials .gray-area .block.col2 .img,
		#di-tutorials .block.col3 .img,
		#di-tutorials .gray-area .block.col3 .img,
		#di-tutorials .products .items .works,
		#di-tutorials .products .items.row1-2 .works,
		#di-tutorials .gray-area.img-box {
			padding: 15px 15px 0;
		}
		#di-tutorials .products .items .works {
			width: 100%;
		}
	}
#di-tutorials .block.borderless,
#di-tutorials .block.col2.borderless,
#di-tutorials .block.col3.borderless {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 0 0 20px;
}
#di-tutorials .block.borderless.fix,
#di-tutorials .block.col2.borderless.fix,
#di-tutorials .block.col3.borderless.fix {
	flex-wrap: nowrap;
}
#di-tutorials .block.borderless.evenly,
#di-tutorials .block.col2.borderless.evenly,
#di-tutorials .block.col3.borderless.evenly {
	justify-content: space-evenly;
}
#di-tutorials .block.borderless .img {
    background-color: #fff;
    padding: 0;
}
#di-tutorials .block.col3.borderless .img {
	width: auto;
    margin: 0 15px;
}
#di-tutorials .block.col3.borderless::after {
	content: normal;
}
	@media (max-width: 1190px) {
		#di-tutorials .block.col3.borderless .img {
			width: calc( 100% / 3 );
			margin: 0;
			padding: 15px;
		}
		#di-tutorials .block.col3.borderless.fix .img {
			width: auto;
			margin: 0 15px;
			padding: 0;
		}
	}
	@media (max-width: 960px) {
		#di-tutorials .block.col3.borderless .img {
			padding: 5px;
		}
	}
	@media (max-width: 768px) {
		#di-tutorials .block.col3.borderless .img {
			width: auto;
		}
	}
	@media (max-width: 480px) {
		#di-tutorials .block.col3.borderless .img,
		#di-tutorials .block.col3.borderless.fix .img {
			margin: 0;
		}
	}

/*************************
Nav-link
*************************/
#di-tutorials .nav-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#di-tutorials .nav-link::after,
#di-tutorials .nav-link .previous-link,
#di-tutorials .nav-link .toTop-link,
#di-tutorials .nav-link .next-link {
	width: calc( (100% - 20px) / 3 );
	text-align: center;
}
#di-tutorials .nav-link .previous-link img,
#di-tutorials .nav-link .next-link img {
	margin: 0 10px;
}
	@media (max-width: 600px) {
		#di-tutorials .nav-link::after,
		#di-tutorials .nav-link .previous-link,
		#di-tutorials .nav-link .toTop-link,
		#di-tutorials .nav-link .next-link {
			width: calc( 100% / 3 );
			word-break: break-all;
			padding: 0;
		}
		#di-tutorials .nav-link .previous-link,
		#di-tutorials .nav-link .toTop-link,
		#di-tutorials .nav-link .next-link {
			font-size: 0.7em;
		}
		#di-tutorials .nav-link .previous-link img,
		#di-tutorials .nav-link .next-link img {
			width: 5px;
			margin: 0 2px;
		}	
	}
#di-tutorials .nav-link.toTop {
    width: 100px;
    margin: 0 auto 50px;
    text-align: center;
}

/*************************
items_border (2019/12/17)
*************************/
#di-tutorials .products .items.items_border {
	border-bottom: 1px solid #88888b;
	padding: 0.5em;
}
#di-tutorials .products:first-of-type .items.items_border {
	 border-top: 1px solid #88888b;
	 padding-top: 1.5em;
}
@media (max-width: 960px) {
	#di-tutorials .products:first-of-type .items.items_border:not(:first-of-type) {
		border-top: none;
		padding-top: 0;
	}
}
/*************************
imgArea (2019/12/17)
*************************/
#di-tutorials .products .items .model .imgArea{
	display: flex;
	flex-flow: column nowrap;
	width: 50%;
	padding-right: 1em;
}
@media (max-width: 1190px){
	#di-tutorials .products .items .model .imgArea .img {
		width: auto;
	}
}
@media (max-width: 960px) {
	#di-tutorials .products .items .model .imgArea{
		flex-flow: row nowrap;
		width: auto;
	}
}
/*************************
prdct2 (2020/01/22)
*************************/
#di-tutorials .products .items.prdct2 .works {
	float: left;
}
#di-tutorials .products .items.prdct2 .model {
	justify-content: space-evenly;
}
#di-tutorials .products .items.prdct2 .model .imgArea{
	width: auto;
	padding: 0;
}
@media (max-width: 1190px){
	#di-tutorials .products .items.prdct2 .model .imgArea .img {
		width: 158px;
	}
	#di-tutorials .products .items.prdct2 .model .imgArea{
		margin-left: 1em;
	}
}
@media (max-width: 960px){
	#di-tutorials .products .items.prdct2 .works {
			float: none;
	}
	#di-tutorials .products .items.prdct2 .model .imgArea{
		flex-flow: row nowrap;
		width: 100%;
		margin-left: 1em;
	}
}