@charset "UTF-8";

/* 共通 */
[class^="conceptd_"],
[class*="conceptd_"] { width:815px; margin:0 auto; }

/* コンテンツ */
.conceptd_main { width:100%; position:relative; overflow:hidden; min-height:600px; margin-bottom:80px; }
.conceptd_main > h1 { position:absolute; top:0; left:0; width:100%; height:100%; display: flex; justify-content: center; align-items: center; z-index: 2; color:#fff; font-size:273%; line-height:1.4; text-align: center; text-shadow: 2px 2px 3px rgba(0,0,0,0.8); }
.conceptd_main > p { position:absolute; top:0; left:0; width:100%; z-index: 1; }
.conceptd_main img { width: 1600px; margin-left: calc((100% - 1600px)/2); }

.conceptd_cont { width:982px; margin:0 auto 6em; box-sizing: border-box; }
.conceptd_cont figure{ text-align:center; width: 100%; margin:3em auto; }
.conceptd_cont img { width:100%; }
.conceptd_cont p { color:#454545; }
.conceptd_cont h4 { font-size:130%; }
.conceptd_cont sup{ color:#03acc8; position:relative; top:-0.2em; margin: 0 0.2em; }
.conceptd_cont #key_v { margin: 3em auto; }

#key_v.sizeVarious ul li { width: auto; position: relative; } /* カルーセルスライダーのアイテムの縦横サイズがまちまちのときに使用 */
#key_v.sizeVarious ul.spNone li{ height: 600px; }
#key_v.sizeVarious ul.pcNone li{ height: 250px; }
#key_v.sizeVarious ul li img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
/* IE11 */ _:-ms-lang(x)::-ms-backdrop, #key_v.sizeVarious .bx-viewport img { width:auto; }

.conceptd_video { position: relative; width:100%; margin: 3em auto; }
.conceptd_video video { width: 100%; margin: 0 auto; }
.conceptd_video .video_poster{ position: absolute; top:0; left:0; width:100%; display: flex; justify-content: center; align-items: center; }
.video_poster span{ display: flex; justify-content: center; align-items: center; position:absolute; line-height:0; width:4em; height:4em; background:rgba(36, 36, 36, 0.5); border-radius:2em; cursor: pointer; transition: all  0.3s ease; }
.video_poster span::after{ position: absolute; content: ""; vertical-align: middle; box-sizing: border-box; width: auto; height:auto; border: 0.6em solid transparent; border-left: 1em solid #fff; margin: 0 0 0 1em; }
.video_poster span:hover { background:rgba(36, 36, 36, 1); }
/* IE11 */ _:-ms-lang(x)::-ms-backdrop, .video_poster span { display:block; top:50%; left:50%; margin-top: -2em; margin-left: -2em; }
/* IE11 */ _:-ms-lang(x)::-ms-backdrop, .video_poster span::after { top:50%; left:50%; margin-top: -0.6em; margin-left: -0.3em; }

.conceptd_sec { margin:3em auto; }
.conceptd_sec > p { margin-bottom:1em; }
.conceptd_sec > p:last-child { margin-bottom:0; }
.conceptd_sec > h3 { line-height:1.6;margin-bottom:1em; }
.conceptd_sec > h4 { margin:1em 0 0.8em; }

.conceptd_prof h3,
.conceptd_product h3 { font-size:130%; margin-bottom:0; }

.conceptd_note { margin:3em auto; border-top:solid 1px #ccc; border-bottom:solid 1px #ccc; padding:2em 1em; box-sizing: border-box; font-size:75%; color:#666; line-height: 2em; }
.conceptd_note > ol { counter-reset: css-counter; list-style-type: none; padding-left: 1.5em; box-sizing: border-box; }
.conceptd_note > ol > li::before { counter-increment: css-counter; content: counter(css-counter) '. '; text-indent: 1.5em; margin-left: -1.3em; }

.conceptd_product a img,
.conceptd_product .btn_base,
#conceptdNav li  a img { transition: all  0.3s ease; }
.conceptd_product a:hover img,
#conceptdNav li a:hover img { opacity: 0.7; }
.conceptd_product a:link, .conceptd_product a:visited, .conceptd_product a:hover, .conceptd_product a:active,
#conceptdNav li a:link, #conceptdNav li a:visited, #conceptdNav li a:hover, #conceptdNav li a:active { text-decoration: none; }

.conceptd_product a:first-child { margin-top:0; }
.conceptd_product a { margin-top:3em; }
.conceptd_product .btn_base { display: inline-block; border: solid 1px #999; padding:0.5em 1.5em; line-height:1; border-radius: 1em; margin-top:1em; font-size:100.01%; }
.conceptd_product .btn_base:hover { background:#555; color:#fff; }
.conceptd_product .btn_base:last-type-of { margin-bottom:0; }

#conceptdNav { background:#fafafa; padding:6em 0; }
#conceptdNav > h3,
#conceptdNav > p{ text-align: center; }
#conceptdNav > h3 { font-size:189%; margin-bottom:0; line-height:1.5; }
#conceptdNav p,
#conceptdNav li { color:#454545; }
#conceptdNav img { width:100%; }
#conceptdNav ul { width:982px; margin:4em auto 0; display: flex; flex-wrap: wrap; align-content: space-between; }
#conceptdNav li { width: 300px;  margin-bottom:3em; font-size:100.01%; }
#conceptdNav li:nth-of-type( 3n + 2 ){ margin-left:41px; margin-right:41px; }
#conceptdNav li figure { margin:0 0 1.5em; }
#conceptdNav li figure img{ width:300px; height:300px; object-fit: cover; }
#conceptdNav dt { position:relative; }
#conceptdNav dt span,
#conceptdNav dt b  {display:block; }
#conceptdNav dt span { font-size:0.6em; }
#conceptdNav dt b { box-sizing: border-box; padding-right:80px; font-size:1.2em; margin: 0.4em 0 0; font-weight: normal; }
#conceptdNav dt img{ width:70px; height:auto; position:absolute; right:0; bottom:0.5em; }
#conceptdNav dd { margin-top: 0.4em; font-size:0.9em; line-height:1.6; }


/* sp */
@media screen and (max-width:759px) {
	[class^="conceptd_"],
	[class*="conceptd_"] { width:100%; margin:0 auto; }
	
	.conceptd_main { width:100%; min-height:200px; max-height:400px; height:auto; margin-bottom:40px; }
	.conceptd_main > h1 { font-size:125%; margin-top:2em; }
	.conceptd_main p{ height:100%; }
	.conceptd_main img { width:100%; height:auto; margin:0 auto; }
	
	.conceptd_cont { width:100%; padding: 0 1em; margin:0 auto 3em; } 
	.conceptd_cont figure { margin:2em auto; }
	.conceptd_cont h4 { font-size:78%; }
	.conceptd_cont #key_v { margin: 2em auto 3em; }
	.conceptd_cont #key_v .bx-pager{ bottom:-25px; }
	.conceptd_cont #key_v .bx-controls-direction .bx-prev{ left:0; }
	.conceptd_cont #key_v .bx-controls-direction .bx-next{ right:0; }
	
	.conceptd_video { margin: 2em auto; }
	.video_poster span{ width:3em; height:3em; border-radius:1.5em; }
	.video_poster span::after{ border: 0.28em solid transparent; border-left: 0.6em solid #fff; margin: 0 0 0 0.5em; }
	
	.conceptd_sec { margin:2em auto; }
	
	.conceptd_prof h3,
	.conceptd_product h3 { font-size:78%; }
	
	.conceptd_note { margin:2em auto; padding:1.5em 0.8em; font-size:68.75%; line-height: 1.63em; }
	
	.conceptd_product .btn_base,
	#conceptdNav li { font-size:68.75%; }
	
	#conceptdNav { padding:2em 0 4em; }
	#conceptdNav > h3 { font-size:124%; }
	#conceptdNav ul { width: 100%; flex-direction: row; margin-top:2em; }
	#conceptdNav li { width: 100%; padding: 0 1em; margin-bottom:2em; }
	#conceptdNav li:nth-of-type( 3n + 2 ){ margin: 0 0 2em; }
	#conceptdNav li figure img{ width:100%; height:auto; object-fit: fill; }
	#conceptdNav dt b { font-size:1.4em; }
	#conceptdNav dd { font-size:1em; }
}

@media screen and (max-width:320px) {
	.conceptd_main { min-height:180px; }
}