@charset "utf-8";
/* COLOR SOLUTION
======================================================================== */
body.color-solution #mainHeader{background:#29c9a4;}
body.color-solution #mainHeader h1{margin-top:40px; padding-left:50px;}
body.color-solution #mainHeader h1:before{background-position:-200px -150px; top:0px; height:90px;}
body.color-solution .inherited article.entry {background:#f6f6ee;}
body.color-solution .ihContainer{padding:20px 0 40px;}
/* index */
body.color-solution article.colorIndex{background:none transparent; width:100%; float:none; clear:both;}
.chromaticsBlock{margin-bottom:20px; height:455px; position:relative; background:#f6f6ee;}
.chromaticsBlock header{width:315px; height:455px; position:absolute; left:0; top:0; padding:50px 0 0 45px; color:#30c23d;}
.chromaticsBlock header:after{content:''; display:block; width:170px; height:56px; background:url(/cmn/img/sprite.png) no-repeat 0 -600px; position:absolute; left:45px; top:125px;} 
.chromaticsBlock header p.serial{font-size:18px; margin-bottom:165px;}
.chromaticsBlock header h1{font-size:24px;}
.chromaticsBlock header h1 small{font-size:18px; display:block; margin-bottom:10px;}
.chromaticsBlock .articleList{width:675px; height:455px; position:absolute; right:0; top:0; background:#30c23d; padding:40px 10px 10px 40px;}
.chromaticsBlock .articleItem{clear:both; color:#fff; margin-bottom:40px;}
.chromaticsBlock .articleItem a{color:#fff; text-decoration:none; display:block;}
.chromaticsBlock .articleItem a:hover{opacity:0.5;}
.chromaticsBlock .articleItem:after{content:''; clear:both; display:block;}
.chromaticsBlock .articleItem figure{float:left; width:125px; margin:0 20px 0 0;}
.chromaticsBlock .articleItem h2{width:94px; height:94px; background:url(/cmn/img/sprite.png) no-repeat -300px -500px; text-align:center; float:left; margin-right:20px; font-size:15px; padding-top:30px;}  
.chromaticsBlock .articleItem h2 b{font-size:26px; display:block; font-weight:normal; padding-top:4px;}
.chromaticsBlock .articleItem .ttl{font-size:13px; margin-bottom:0;}
.chromaticsBlock .articleItem time{color:#c2ffc8; margin-bottom:10px; display:block;}
.chromaticsBlock .articleItem h3{line-height:1.2; font-size:15px;}
.chromaticsBlock .articleItem h3 i{color:#ffd800; border:1px #ffd800 solid; display:inline-block; padding:1px 2px 0; font-size:11px; font-weight:bold; line-height:1; margin-bottom:3px;}
.colorSearch{width:485px; height:455px; position:relative; float:left; background:#29c9a4; color:#fff; padding:50px 0 0 45px;}
.colorSearch:after{background:url(/color-solution/img/irosagashi.png) no-repeat; width:170px; height:455px; position:absolute; right:0; top:0; content:''; display:block;}
.colorSearch:before{content:''; display:block; width:170px; height:56px; background:url(/cmn/img/sprite.png) no-repeat -200px -600px; position:absolute; left:45px; top:125px;}
.colorSearch p.serial{font-size:18px; margin-bottom:165px;}
.colorSearch h1{font-size:24px; margin-bottom:50px;}
.colorSearch h1 small{font-size:18px; display:block; margin-bottom:10px;}
.colorSearch p.btn a{border:2px #fff solid; display:inline-block; padding:7px 50px; font-weight:bold; color:#fff;}
.colorSearch p.btn a:hover{background:#0c9; color:#fff; opacity:0.7; text-decoration:none;}
.colorSolution{width:485px; height:455px; position:relative; float:right; color:#00ffc4; background:#000;}
.colorSolution a:before{content:''; display:block; width:170px; height:56px; background:url(/cmn/img/sprite.png) no-repeat -400px -600px; position:absolute; left:45px; top:125px;}
.colorSolution a{color:#00ffc4; display:block; width:100%; height:100%; padding:50px 0 0 45px; background:url(/color-solution/img/udbg.png);}
.colorSolution a:hover{text-decoration:none; opacity:0.7;}
.colorSolution p.serial{font-size:18px; margin-bottom:165px;}
.colorSolution h1{font-size:24px; margin-bottom:50px;}
.colorSolution h1 small{font-size:18px; display:block; margin-bottom:10px;}
body.color-solution article.colorIndex .snsBtns{padding:30px 0 0 0 !important; clear:both; text-align:left;}
/* nav */
nav.color-solution h1 a{background:#3b3932; display:block; height:142px; position:relative; color:#fff; text-align:center; font-family:'Pontano Sans', sans-serif; font-size:18px; letter-spacing:0.05em; padding-top:80px;}
nav.color-solution h1 a:before{background:url(/cmn/img/sprite.png) no-repeat -700px -150px; width:50px; height:110px; position:absolute; left:50%; top:50%; margin:-55px 0 0 -25px; display:block; content:'';}
nav.color-solution h1 a:hover{text-decoration:none; opacity:0.7;}
nav.color-solution ul{background:#f6f6ee;}
nav.color-solution ul li{border-bottom:1px #c0bdb3 solid; font-size:13px; line-height:1.4;}
nav.color-solution ul li a{display:block; padding:14px 10px 14px 1.75em; text-indent:-1em;}
nav.color-solution ul li a:before{content:'- '; padding-right:5px;}
nav.color-solution ul li ul li{border-bottom:none; border-top:1px #c0bdb3 solid; padding-left:1em;}
nav.color-solution ul li a.active,
nav.color-solution ul li a:hover{color:#29c9a4; text-decoration:none;}
/* common section */
section.colors{padding:0 40px 0 40px;}
section.colors h1{font-size:20px; margin-bottom:15px; padding-bottom:15px; border-bottom:2px #3b3932 solid; line-height:1.5;}
section.colors .lead{font-size:22px; margin:40px 0; line-height:1.5; clear:both;}
section.colors h1+.lead{margin-top:0;}
section.colors .example{border-top:1px #3b3932 solid; border-bottom:2px #3b3932 solid; padding:10px;}
section.colors .example h2{background:#3b3932; display:inline-block; padding:5px 10px; color:#fff; font-size:14px; margin-bottom:20px;}
section.colors .example .sample{padding-left:70px; margin-bottom:30px; position:relative;}
section.colors .example .sample:after{content:''; display:block; background:url(/cmn/img/sprite.png) no-repeat; width:50px; height:50px; position:absolute; left:0; top:50%; margin-top:-25px;}
section.colors .example .sample.gorgeous:after{background-position:-700px -300px;}
section.colors .example .sample.fun:after     {background-position:-750px -300px;}
section.colors .example .sample.soft:after    {background-position:-800px -300px;}
section.colors .example .sample div{position:relative; background:#f6f6ee; border:2px solid #9e9e95; padding:20px 25px;}
section.colors .example .sample div:after, section.colors .example .sample div:before{
right:100%; top:50%; border:solid transparent; content:''; height:0; width:0; position:absolute;	pointer-events:none;}
section.colors .example .sample div:after{
border-color:rgba(246, 246, 238, 0); border-right-color:#f6f6ee; border-width:8px; margin-top:-8px;}
section.colors .example .sample div:before{border-color:rgba(158, 158, 149, 0); border-right-color:#9e9e95; border-width:11px; margin-top:-11px;}
section.colors .example .sample div p{margin-bottom:0;}
section.colors .example .sample div h3{font-weight:bold; margin-bottom:10px;}
section.colors .example .sample div h3 em{font-size:18px; font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
/* color search */
.colorSearchPanel{background:url(/color-solution/image-color-search/img/searchPanel.png) no-repeat center center; height:386px; padding-top:95px; text-align:center; margin-bottom:25px;}
.colorSearchPanel h1{font-size:30px; font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; margin-bottom:55px;}
.colorSearchPanel h1 span:nth-child(1){color:#f034a3;}
.colorSearchPanel h1 span:nth-child(2){color:#00b4ff;}
.colorSearchPanel h1 span:nth-child(3){color:#ffc000;}
.colorSearchPanel h1 br{display:none;}
.colorSearchPanel input{width:420px; height:56px; background:#fff; border:1px #888881 solid; margin:0 auto; text-align:center; margin-bottom:35px; font-size:16px; display:block;}
.colorSearchPanel input::-webkit-input-placeholder{color:#b7b7b1;}
.colorSearchPanel input:-moz-input-placeholder{color:#b7b7b1;}
.colorSearchPanel input:placeholder{color:#e6e6dc;}
.colorSearchPanel button{border:2px #3b3932 solid; width:150px; height:33px; background:#fff; font-weight:bold; cursor:pointer;}
.colorSearchResult{padding:0 40px;}
.colorSearchResult h1{font-size:14px; letter-spacing:0.05em; text-indent:-1em; font-weight:bold; border-bottom:2px solid #3b3932; margin-bottom:25px; padding-bottom:20px;}
.colorSearchResult h1 em{font-size:26px; font-weight:normal; font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
.colorSearchResult .list{border-bottom:2px solid #3b3932; clear:both;}
.colorSearchResult .list:after{content:''; display:block; clear:both;}
.colorSearchResult .list figure{width:204px; height:290px; background:#fff; padding:10px; display:block; float:left; margin:0 34px 34px 0; overflow:hidden; position:relative;}
.colorSearchResult .list figure:nth-child(3n){margin-right:0;}
.colorSearchResult .list figure:nth-child(3n+1){clear:both;}
.colorSearchResult figure .color{height:160px; margin-bottom:0; overflow:hidden; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding:40px 0 0 10px; color:#fff; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;}
.colorSearchResult figure .color dl{display:none; font-size:14px;}
.colorSearchResult figure .color dt{float:left; clear:left; width:4em; padding-bottom:10px; text-align:right;}
.colorSearchResult figure .color dd{padding:0 0 10px 5em;}
.colorSearchResult figure .view{padding:28px 0 0 0; margin:0; text-align:center;}
.colorSearchResult figure .view a{padding-left:30px; position:relative; margin:0;}
.colorSearchResult figure .view span{display:none;}
.colorSearchResult figure .view a:hover{text-decoration:none; opacity:0.7;}
.colorSearchResult figure .view a:before{width:30px; height:30px; left:0; top:-5px; position:absolute; content:''; display:block; background:url(/cmn/img/sprite.png) no-repeat -700px -350px;}
.colorSearchResult figure .addFav{clear:both; width:100%; height:40px; position:absolute; left:0; bottom:0; text-align:center; margin:0;}
.colorSearchResult figure .addFav a{display:block; background:#3b3932; height:40px; line-height:40px; text-decoration:none; color:#fff; position:relative; padding-left:15px;}
.colorSearchResult figure .addFav a:hover{opacity:0.7;}
.colorSearchResult figure .addFav a:before{background:url(/cmn/img/sprite.png) no-repeat -750px -350px; content:''; display:block; position:absolute; width:15px; height:20px; left:0; top:50%; margin:-14px 0 0 2.5em;}
.colorSearchResult .list .viewMore{display:none;}
/* cud */
header.cud{background:url(/color-solution/ucd/img/header.png) no-repeat center top; height:286px; margin-bottom:10px;}
header.cud .inner{height:286px; color:#fff; margin:0 auto; padding:140px 0 0 60px; position:relative; width:800px;}
header.cud .inner:before{position:absolute; width:140px; height:55px; content:''; display:block; background:url(/cmn/img/sprite.png) no-repeat -650px 0; left:60px; top:50px;}
header.cud h2{font-size:24px; letter-spacing:0.05em;}
header.cud h2 small{font-size:15px; display:block; margin-bottom:15px;}

.colors .infoList{border:1px #3b3932 solid; border-width:1px 0 2px; padding:30px 0;}
.colors .infoList header{position:relative; margin-bottom:30px;}
.colors .infoList header h2{font-size:24px; position:relative; padding-left:50px;}
.colors .infoList header h2:before{background:url(/cmn/img/sprite.png) no-repeat 0 -150px; background-size:500px auto; width:50px; height:50px; position:absolute; left:-10px; top:-15px; content:''; display:block;}
.colors .infoList header p{position:absolute; right:30px; top:-5px;}
.colors .infoList header p a{padding:2px 10px; border:2px #3b3932 solid; font-weight:bold;}
.colors .infoList dl dt{float:left; font-size:18px; color:#29c9a4; width:6em;}
.colors .infoList dl dd{padding:0 0 30px 8em;}
.cudIndex{margin:0 40px; padding:40px 0;}
.cudIndex ul{clear:both;}
.cudIndex ul:after{content:''; clear:both; display:block;}
.cudIndex li{float:left; margin:0 23px 40px 0;}
.cudIndex li:nth-child(3n){margin-right:0;}
.cudIndex li img{margin-bottom:15px;}
.articleList.cud .listItem{background:#f6f6ee;}
/* color vision defect */
.colors .figureBlock{border-top:1px #3b3932 solid; padding:40px 25px;}
.colors .figureBlock h2{font-size:16px; font-weight:bold; text-align:center; margin-bottom:40px;}
.colors .figureBlock figure{width:303px; float:left; text-align:center; margin-bottom:15px;}
.colors .figureBlock figure:nth-child(2n){float:right;}
.colors .figureBlock figcaption{margin-bottom:20px;}
.colors .figureBlock figure+p{clear:both;}
.colors .figureBlock .note{text-indent:-1em; padding-left:1em;}
.colors h2.colorVisionDefects{font-size:18px; margin:0 0 15px; clear:both; padding-top:50px;}
.colors ul.udLink{border:1px #3b3932 solid; border-width:1px 0; padding:15px; margin:0 0 25px;}
.colors ul.udLink li{display:inline-block; font-weight:bold; margin-right:40px;}
.colors ul.udLink li a{}
.colors ul.udLink li a:before{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; margin-right:7px; border-color:transparent transparent transparent #3b3932;}
.colors ul.udLink li a:hover,
.colors ul.udLink li a.active{color:#29c9a4; text-decoration:none;}
.colors ul.udLink li a:hover:before,
.colors ul.udLink li a.active:before{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; margin-right:7px; border-color:transparent transparent transparent #29c9a4;}
ul.uding{clear:both;}
ul.uding:after{content:''; clear:both; display:block;}
ul.uding li{float:left; width:200px; margin:0 40px 20px 0; list-style:none;}
ul.uding li:nth-child(3n){margin-right:0;}
ul.uding li a{display:block;}
ul.uding li a:hover{opacity:0.5; text-decoration:none;}
ul.uding li img{margin-bottom:15px;}
ul.uding li p{line-height:1.4;}
ul.uding li .ttl{font-size:16px; margin-bottom:10px;}
/* virtual */
.tryVirtual{width:700px; margin:0 auto 50px -10px;}
.tryVirtual h2{text-align:center; margin-bottom:10px; font-size:24px;}
.tryVirtual ul.nav{border:1px #5996d7 solid; width:700px; margin-bottom:10px; clear:both;}
.tryVirtual ul.nav:after{content:''; display:block; clear:both;}
.tryVirtual ul.nav li{list-style:none; width:25%; text-align:center; float:left; border:1px #5996d7 solid; cursor:pointer; padding:10px 0; color:#5996d7; margin:0; font-weight:bold; background:#fff;}
.tryVirtual ul.nav li.active{background:#5996d7; color:#fff;}
.tryVirtual ul.data li{list-style:none; width:700px; height:480px;}
.tryVirtual ul.data li{display:none;}
.tryVirtual ul.data li.active{display:block;}
.colors h3{margin-bottom:10px; font-size:18px;}
/* links */
.udRelatedLinks{margin-bottom:40px; padding:0 40px; line-height:1.5;}
.udRelatedLinks dt{font-size:18px; margin:40px 0 20px;}
.udRelatedLinks dd{margin-bottom:20px; padding:0 15px;}
.udRelatedLinks dd a{position:relative; padding-left:15px; display:inline-block;}
.udRelatedLinks dd a:before{content:''; display:block; position:absolute; left:0; top:4px; width:10px; height:10px; background:url(/cmn/img/sprite.png) no-repeat -750px -400px;}

/* chromatics */
body.color-solution article.articleList{background:transparent;}
header.chromatics{background:url(/color-solution/chromatics/img/mainVisual.jpg) no-repeat right top #fff; height:260px; position:relative; padding:140px 0 0 60px; margin-bottom:20px;}
header.chromatics.content{background:url(/color-solution/chromatics/img/mainVisual.png) no-repeat center top transparent; height:286px; margin-bottom:0;}
header.chromatics:before{position:absolute; width:180px; height:56px; content:''; display:block; background:url(/cmn/img/sprite.png) no-repeat -750px -500px; left:60px; top:50px;}
header.chromatics h1{font-size:24px; letter-spacing:0.05em; color:#29c9a4;}
header.chromatics h1 small{font-size:15px; display:block; margin-bottom:15px;}
section.chromatics div.listItem{background:#f6f6ee; height:170px; position:relative;}
section.chromatics div.listItem a{height:170px; overflow:hidden; padding-left:250px;}
section.chromatics div.listItem .num{color:#29c9a4; font-size:48px; position:absolute; right:30px; top:10px;}
section.chromatics div.listItem figure{position:absolute; left:0; top:0; width:250px; height:170px;}
section.chromatics div.listItem figure img{width:250px; height:170px;}
section.chromatics div.listItem h2{padding-right:80px;}
section.chromatics div.listItem h2 em.new{background:#29c9a4; display:inline-block; margin:0 5px 0 0; font-size:12px; color:#fff; padding:2px 7px 1px; line-height:1.1;}
h1.chromaArchive{background:#3b3932; margin-bottom:20px; color:#fff; text-align:center; padding:10px; font-size:20px; text-align:center;}

body.color-solution article section.entry{padding:30px 40px;}
body.color-solution article section.entry .entryHeader{border:1px #3b3932 solid; border-width:2px 0 1px 0; padding:30px 0 20px 0; position:relative; padding-left:140px; margin-bottom:40px;}
body.color-solution article section.entry .entryHeader .num{font-size:78px; font-family:'Roboto',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:300; color:#29c9a4; letter-spacing:-0.05em; margin:0; padding:0; position:absolute; left:0; top:15px; line-height:1;}
body.color-solution article section.entry .entryHeader .ctg{display:inline-block; padding-right:10px; margin:0 5px 10px 0; border-right:1px #3b3932 solid; line-height:1.1;}
body.color-solution article section.entry .entryHeader h1{font-size:24px; line-height:1.4;}
body.color-solution article section.entry h2{font-size:20px; margin:40px 0 15px; line-height:1.5; font-weight:bold;} 
body.color-solution article section.entry h3{font-size:16px; margin:0 0 15px; line-height:1.5; font-weight:bold;}
body.color-solution article section.entry hr{border:none; clear:both; border-bottom:1px #dcd9cd solid; margin:40px 0;}
body.color-solution article section.entry .author{font-size:12px;}
body.color-solution article section.entry .author a{color:#29c9a4;}

/* not found */
article section.cList{padding:0 30px 0 40px;}
section.cList div{width:109px; margin:0 5px 20px 0; float:left; background:#fff;}
section.cList table{width:100%;}
section.cList table th{background:#3b3932; color:#fff; padding:10px 0; text-align:center;}
section.cList table td{padding:10px; font-size:12px;}


@media screen and (min-width:768px) and (max-width:1024px){
body.color-solution #mainHeader h1{margin-top:30px; padding-left:50px;}
body.color-solution #container{padding:0;}
body.color-solution article{width:100%;}
/* index */
.chromaticsBlock{margin-bottom:0; padding-left:230px;}
.chromaticsBlock header{width:230px; padding:50px 0 0 30px;}
.chromaticsBlock header:after{left:30px;}
.chromaticsBlock header h1{font-size:20px;}
.chromaticsBlock header h1 small{font-size:16px;}
.chromaticsBlock .articleList{width:100%; padding:40px 10px 10px 30px; position:relative; left:auto; right:auto;}
.chromaticsBlock .articleItem{margin-bottom:30px;}
.chromaticsBlock .articleItem figure{margin-right:15px;}
.chromaticsBlock .articleItem h2{margin-right:15px;}  
.colorSearch{width:50%; padding:50px 10px 0 30px;}
.colorSearch:after{width:30%; height:455px;}
.colorSearch:before{left:30px;}
.colorSearch h1{font-size:20px;}
.colorSearch h1 small{font-size:16px;}
.colorSolution{width:50%;}
.colorSolution a:before{left:30px;}
.colorSolution h1{font-size:20px; margin-bottom:50px;}
.colorSolution h1 small{font-size:16px;}
body.color-solution article.colorIndex .snsBtns{text-align:center;}

.colorSearchPanel{ height:386px; padding-top:95px; text-align:center; margin-bottom:25px;}
.myFavorite .list figure{width:23%; margin:0 1% 24px 1%;}
.colorSearchResult .list figure{width:30%; margin:0 3% 34px 2%;}
.colorSearchResult .list figure:nth-child(3n){margin-right:0;}
.colorSearchResult .list figure:nth-child(3n+1){clear:both; margin-left:0;}
.colorSearchResult figure .color{padding:40px 0 0 0;}
.colorSearchResult figure .color dl{display:block;}
.colorSearchResult figure .addFav a:before{left:8%; margin:-14px 0 0 0;}

.cudIndex{text-align:center;}
.cudIndex li{float:none; display:inline-block; margin:0 10px 40px;}
.cudIndex li:nth-child(3n){margin-right:10px;}
.cudIndex li img{margin-bottom:15px;}

ul.uding{clear:both;}
ul.uding:after,
ul.uding li:after{content:''; clear:both; display:block;}
ul.uding li{float:none; clear:both; width:100%; margin:0 0 20px 0;}
ul.uding li img{margin-bottom:0; float:left; margin-right:20px;}
ul.uding li p{line-height:1.4;}
ul.uding li .ttl{font-size:18px; margin-bottom:10px;}

/* virtual */
.tryVirtual{margin:0 auto 50px;}


section.cList div{width:15%; margin:0 1.5% 20px 0;}

}
@media screen and (max-width:767px){
body.color-solution #pageAside{margin:0 15px;}
body.color-solution #mainHeader h1{margin-top:15px; padding-left:25px;}
body.color-solution #mainHeader h1:before{background-position:-100px -75px; top:5px;}
/* index */
body.color-solution article.colorIndex{width:auto;}
.chromaticsBlock{margin-bottom:15px; height:auto; background:#f6f6ee;}
.chromaticsBlock header{width:100%; height:auto; position:relative; left:auto; top:auto; padding:70px 0 10px 0;}
.chromaticsBlock header:after{content:''; display:block; width:170px; height:56px; background:url(/cmn/img/sprite.png) no-repeat 0 -600px; position:absolute; left:50%; top:10px; margin-left:-85px;} 
.chromaticsBlock header p.serial{font-size:16px; margin-bottom:10px; text-align:center;}
.chromaticsBlock header h1{font-size:20px; text-align:center;}
.chromaticsBlock header h1 small{font-size:14px;}

.chromaticsBlock .articleList{width:100%; height:auto; position:relative; right:auto; top:auto; padding:15px;}
.chromaticsBlock .articleItem{margin-bottom:10px; padding-bottom:10px; border-bottom:1px #c2ffc8 solid;}
.chromaticsBlock .articleItem figure{float:none; display:inline-block; text-align:center; vertical-align:middle;}
.chromaticsBlock .articleItem h2{float:none; margin-right:0; display:inline-block; text-align:center; vertical-align:middle;}
.chromaticsBlock .articleItem .ttl{font-size:13px; margin:10px 0 0; clear:both;}
.chromaticsBlock .articleItem time{color:#c2ffc8; margin-bottom:10px; display:block;}
.chromaticsBlock .articleItem h3{line-height:1.5; font-size:15px;}
.chromaticsBlock .articleItem h3 i{color:#ffd800; border:1px #ffd800 solid; display:inline-block; padding:1px 2px 0; font-size:11px; font-weight:bold; line-height:1; margin-bottom:3px;}

.colorSearch{width:100%; height:auto; float:none; padding:30px 0 10px; text-align:center; margin-bottom:15px;}
.colorSearch:after{background:none; display:none;}
.colorSearch:before{left:50%; top:70px; margin-left:-85px;}
.colorSearch p.serial{font-size:18px; margin-bottom:80px;}
.colorSearch h1{font-size:22px; margin-bottom:30px;}
.colorSearch h1 small{font-size:16px;}

.colorSolution{width:100%; height:auto; float:none; text-align:center;}
.colorSolution a:before{left:50%; top:70px; margin-left:-85px;}
.colorSolution a{padding:30px 0;}
.colorSolution p.serial{font-size:18px; margin-bottom:100px;}
.colorSolution h1{font-size:20px; margin-bottom:30px;}
.colorSolution h1 small{font-size:14px;}
body.color-solution article.colorIndex .snsBtns{padding:30px 0 0 0 !important; clear:both; text-align:left;}



.colorSearchPanel{height:250px; padding-top:20px; background:url(/color-solution/image-color-search/img/searchPanelSp.png) no-repeat center top; background-size:500px auto; margin-bottom:12px;}
.colorSearchPanel h1{font-size:28px; margin-bottom:20px; line-height:1.35; text-indent:-0.75em;}
.colorSearchPanel h1 br{display:inline;}
.colorSearchPanel input{width:70%; height:37px; margin-bottom:20px; font-size:12px;}
.colorSearchPanel button{border:2px #3b3932 solid; width:30%; height:30px;}
section.colors{padding:0 15px;}
section.colors p{margin-bottom:1em;}
section.colors .lead{font-size:18px; margin-bottom:20px;}
section.colors h1{font-size:18px;}
section.colors .example{padding:15px 0px;}
section.colors .example h2{font-size:12px; margin:0 0 20px 50%; left:-2.5em; position:relative;}
section.colors .example .sample{padding:70px 0 20px; margin-bottom:0; position:relative;}
section.colors .example .sample:after{content:''; display:block; background:url(/cmn/img/sprite.png) no-repeat; width:50px; height:50px; position:absolute; left:50%; top:0; margin:0 0 0 -25px;}
section.colors .example .sample div{position:relative;	background:#f6f6ee;	border:2px solid #9e9e95;}
section.colors .example .sample div:after,
section.colors .example .sample div:before{bottom:100%; top:auto; left:50%; border:solid transparent;	content:''; height:0; width:0; position:absolute; pointer-events:none;}
section.colors .example .sample div:after{border-color:rgba(246, 246, 238, 0); border-bottom-color:#f6f6ee;	border-width:10px; margin-left:-10px;}
section.colors .example .sample div:before{border-color:rgba(158, 158, 149, 0); border-bottom-color: #9e9e95; border-width:13px;	margin-left:-13px;}
section.colors .example .sample div h3{font-size:12px;}
section.colors .example .sample div h3 em{font-size:16px; letter-spacing:-0.05em;}

.colorSearchResult{padding:0 15px;}
.colorSearchResult h1{margin-bottom:15px; padding-bottom:15px;}
.colorSearchResult h1 em{font-size:20px;}
.colorSearchResult .list figure{width:100%; height:300px; float:none; margin:0 0 10px 0;}
.colorSearchResult figure .color{height:100px; margin-bottom:0; overflow:hidden; font-size:12px; color:#3b3932; text-shadow:none;}
.colorSearchResult figure .color dl{display:block; font-size:14px; position:absolute; left:42px; top:165px;}
.colorSearchResult figure .color dt{text-align:left; padding-bottom:15px;}
.colorSearchResult figure .color dd{padding:0 0 15px 5em; font-weight:bold;}
.colorSearchResult figure .view{padding:15px 0 0; margin:0; text-align:left;}
.colorSearchResult figure .view i{display:none;}
.colorSearchResult figure .view a span{padding-left:0; position:relative; margin:0; display:inline-block;}

.colorSearchResult figure .addFav{clear:both; width:100%; height:40px; position:absolute; left:0; bottom:0; text-align:center; margin:0;}
.colorSearchResult figure .addFav a{display:block; background:#3b3932; height:40px; line-height:40px; text-decoration:none; color:#fff; position:relative; padding-left:15px;}
.colorSearchResult figure .addFav a:hover{opacity:0.7;}
.colorSearchResult figure .addFav a:before{background:url(/cmn/img/sprite.png) no-repeat -750px -350px; content:''; display:block; position:absolute; width:15px; height:20px; left:0; top:50%; margin:-14px 0 0 2.5em;}
.colorSearchResult .list .viewMore{display:block;}
.colorSearchResult .list .viewMore a{border:2px #3b3932 solid; width:150px; display:block; margin:10px auto; text-align:center; line-height:33px; height:33px; font-weight:bold;}
.colorSearchResult .list .viewMore a span.less{display:none;}
.colorSearchResult .list .viewMore a.open span.more{display:none;}
.colorSearchResult .list .viewMore a.open span.less{display:block;}
/* cud */
header.cud {height:143px;  background-size:840px auto;}
header.cud .inner{padding:65px 20px 0 20px; height:143px; width:auto;}
header.cud .inner:before{left:20px; top:20px; width:70px; height:30px; background:url(/cmn/img/sprite.png) no-repeat -325px 0; background-size:500px auto;}
header.cud h2{font-size:18px; text-shadow:2px 2px 3px rgba(0,0,0,1);}
header.cud h2 small{font-size:12px; margin-bottom:0;}

.colors .infoList{padding:20px 0;}
.colors .infoList header{margin-bottom:20px;}
.colors .infoList header h2{font-size:20px; margin-bottom:20px;}
.colors .infoList header p{position:relative; right:auto; top:0; text-align:center;}
.colors .infoList header p a{padding:4px 20px;}
.colors .infoList dl dt{float:none; margin-bottom:5px;}
.colors .infoList dl dd{padding:0 0 20px 0;}

.cudIndex{margin:0 40px; border-top:2px #3b3932 solid; padding:40px 0;}
.cudIndex{margin:0 15px; padding:20px 0;}
.cudIndex{text-align:center;}
.cudIndex li{float:left; display:block; width:50%; margin:0 0 40px 0; padding:0 5px;}
.cudIndex li:nth-child(2n){margin-right:0;}
.cudIndex li:nth-child(2n+1){margin-right:0; clear:both;}
.cudIndex li img{margin-bottom:15px; width:100%; height:auto;}

/* color vision defect */
.colors .figureBlock{padding:20px 0;}
.colors .figureBlock h2{margin-bottom:20px;}
.colors .figureBlock figure{width:100%; float:none; margin-bottom:30px;}
.colors .figureBlock figure:nth-child(2n){float:none;}
.colors .figureBlock figcaption{margin-bottom:10px;}
.colors .figureBlock figure img{width:100%; height:auto;}

.colors ul.udLink{padding:5px 0;}
.colors ul.udLink li{display:block; margin-right:0; clear:both;}
.colors ul.udLink li a{padding:10px 10px; display:block;}
.colors ul.udLink li a:before{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; margin-right:7px; border-color:transparent transparent transparent #3b3932;}
.colors ul.udLink li a:hover{color:#29c9a4; text-decoration:none;}
.colors ul.udLink li a:hover:before{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; margin-right:7px; border-color:transparent transparent transparent #29c9a4;}

ul.uding li{float:none; width:100%; margin:0 0 30px 0;}
ul.uding li img{margin-bottom:15px; width:100%; height:auto;}

/* virtual */
.tryVirtual{width:auto; margin:0 auto 30px;}
.tryVirtual h2{text-align:center; margin-bottom:10px; font-size:20px;}
.tryVirtual ul.nav{width:100%;}
.tryVirtual ul.nav li{padding:10px 2px; height:50px; font-size:2vw; line-height:30px;}
.tryVirtual ul.data li{width:100%; height:auto;}
.tryVirtual ul.data li img{width:100%; height:auto;}

/* links */
.udRelatedLinks{padding:0;}
.udRelatedLinks dt{font-size:18px; margin:40px 0 20px;}
.udRelatedLinks dd{margin-bottom:20px; padding-left:15px;}
.udRelatedLinks dd a{position:relative; padding-left:15px;}
.udRelatedLinks dd a:before{content:''; display:block; position:absolute; left:0; top:4px; width:10px; height:10px; background:url(/cmn/img/sprite.png) no-repeat -750px -400px;}

/* chromatics */

header.chromatics{background:url(/color-solution/chromatics/img/mainVisual.jpg) no-repeat right top #fff; background-size:cover; height:143px; padding:70px 20px; margin-bottom:20px;}
header.chromatics.content{background:url(/color-solution/chromatics/img/mainVisual.png) no-repeat center top transparent; background-size:cover; height:143px; margin-bottom:0;}
header.chromatics:before{position:absolute; width:180px; height:56px; content:''; display:block; background:url(/cmn/img/sprite.png) no-repeat -750px -500px; left:20px; top:20px;}
header.chromatics h1{text-shadow:1px 1px 0 rgba(255,255,255,1),-1px -1px 0 rgba(255,255,255,1);}

section.chromatics div.listItem{height:auto;}
section.chromatics div.listItem a{height:auto; overflow:visible; padding:20px;}
section.chromatics div.listItem .num{right:15px; bottom:15px; top:auto}
section.chromatics div.listItem figure{position:relative; left:auto; top:auto; width:100%; height:auto;}
section.chromatics div.listItem figure img{width:100%; height:auto;}

body.color-solution article section.entry{padding:10px 15px;}
body.color-solution article section.entry .entryHeader{padding:10px 0 15px 0; padding-left:0; margin-bottom:20px;}
body.color-solution article section.entry .entryHeader .num{font-size:36px; position:relative; left:auto; top:auto; display:inline-block; margin-right:15px;}

article section.cList{padding:0 30px 0 0;}
section.cList div{width:100%; margin:0 15px 20px; clear:both; float:none;}


}