@charset "UTF-8";

/*---------------------------------------------

Lower Page CSS

for cameojapan.co.jp
coded by d-spica at 2016-01-25

---------------------------------------------*/


@import url(default.css);
@import url(base.css);


nav.topicpath {
	margin: 0 auto 1em;
	max-width: 1024px;
}

nav.topicpath p {
	padding: 0 2em;
}

nav.topicpath a,
nav.topicpath em {
	white-space: nowrap;
}

article > h1 {
	margin: 0 0 2em;
	background: #000;
	padding: 0.85em 1em;
	font-size: 124%;
	font-weight: normal;
	color: #fff;
}

article .nav-contact {
	margin-bottom: 5em;
	text-align: center;
}

article .nav-contact img {
	border: solid 1px #000;
	width: 15em;
}

article p.nav-items {
	margin: 5em auto;
	max-width: 23em;
}

article p.nav-items a {
	display: block;
	border: solid 1px #000;
	padding: 2em 1em;
	text-align: center;
}

article p.nav-items a:before {
	content: '\25B6';
	margin-right: 0.3em;
}

section {
	padding: 0 2em;
}

section h1 {
	margin-bottom: 1em;
	border: solid 1px #ccc;
	background: #eee;
	padding: 0.75em 1.2em;
	font-size: 108%;
	font-weight: normal;
}

section.policy {
	margin: 0 2em;
	padding: 0;
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

section.policy div {
	display: inline-block;
	padding: 0 16em 0 2em;
	max-width: 40em;
	vertical-align: middle;
	text-align: left;
	line-height: 1.7;
}

section.policy h1 {
	margin-bottom: 0.6em;
	border: none;
	background: none;
	padding: 0;
	font-size: 231%;
}

section.policy p {
	margin-bottom: 1.5em;
}

section.lifestyle {
	background: #000 url(../img/bg-policy-lifestyle.jpg) no-repeat 100% 0;
	height: 480px;
	line-height: 480px;
	color: #fff;
}

section.lifestyle div {
	position: relative;
	overflow: hidden;
	padding: 0 2em 0 18em;
	max-width: 38em;
}

section.lifestyle .logo {
	position: absolute;
	top: 0.5em;
	left: 2em;
	width: 11em;
}

section.material {
	background: #f6f6f6 url(../img/bg-policy-material.jpg) no-repeat 100% 100%;
	height: 350px;
	line-height: 350px;
}

section.value {
	background: #f6f6f6 url(../img/bg-policy-value.jpg) no-repeat 50% 0;
	height: 350px;
	line-height: 350px;
}

section.case {
	background: #000 url(../img/bg-policy-case.jpg) no-repeat 0 100%;
	height: 350px;
	line-height: 350px;
	color: #fff;
}

section.summary {
	margin-bottom: 3em;
}

section.summary p.photo {
	display: inline-block;
	margin-right: 4%;
	width: 41%;
	vertical-align: middle;
}

section.summary div {
	display: inline-block;
	margin-bottom: 2em;
	width: 54%;
	vertical-align: middle;
}

section.summary h1 {
	margin-bottom: 0.6em;
	border: none;
	background: none;
	padding: 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 216%;
}

section.summary p {
	margin-bottom: 1em;
}

section.experience {
	margin: 0 auto 5em;
	max-width: 60em;
}

section.experience h1 {
	margin-bottom: 1.5em;
	border: none;
	background: #444;
	padding: 0.4em;
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 124%;
	color: #fff;
}

section.experience h1 .sp {
	display: none;
}

section.experience ul {
	margin-bottom: 1.5em;
	padding: 0 1em 2.5em;
	background: url(../img/ar-d.png) no-repeat 50% 100%;
	column-count: 2;
	font-size: 108%;
}

section.experience li {
	background: url(../img/mk-check.png) no-repeat 0 0.4em;
	padding: 0 1.2em;
}

section.experience .point {
	background: #eee;
	padding: 2em;
	font-size: 108%;
}

section.quality {
	margin-bottom: 5em;
}

section.quality h1 {
	margin-bottom: 2em;
	background: #000 url(../img/bg-hd-oem-quality.jpg) no-repeat 100% 0;
	height: 200px;
	line-height: 200px;
	text-align: center;
}

section.quality h1 img {
	max-width: 25em;
	vertical-align: middle;
}

section.quality .point {
	margin-bottom: 1.7em;
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 147%;
}

section.quality .spot {
	overflow: hidden;
	margin-bottom: 2.5em;
	background: url(../img/bg-oem-spot.png) no-repeat 0 0;
	background-size: 48.5% auto;
}

section.quality .spot dl {
	float: left;
	width: 48.5%;
}

section.quality .spot dt {
	padding: 1.6em 1.6em 0.8em;
	line-height: 1.4;
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 247%;
}

section.quality .spot dd {
	padding: 0 4em;
}

section.quality .spot .photos {
	float: right;
	padding-bottom: 41.6%;
	width: 48.5%;
}

section.quality .spot .photos ul {
	position: relative;
}

section.quality .spot .photos li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

section.quality .spot .photos p.exists {
	margin-top: 10px;
	line-height: 23px;
	text-align: center;
}

section.quality .spot .photos p.exists img {
	margin: 0 0.2em;
	padding: 5px;
	opacity: 0.4;
	cursor: pointer;
}

section.quality .spot .photos p.exists img.current {
	opacity: 1;
}

section.quality .points {
	overflow: hidden;
	margin: 0 -1.05%;
}

section.quality .points li {
	float: left;
	margin: 0 1%;
	width: 31.33%;
}

section.quality .points li dl {
	border: solid 1px #ccc;
	padding: 3em;
}

section.quality .points li dt {
	margin-bottom: 0.8em;
	line-height: 1.4;
	text-align: center;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 247%;
}

section.workflow {
	margin-bottom: 5em;
}

section.workflow h1 {
	margin-bottom: 1.5em;
	border: none;
	border-left: solid 0.4em #000;
	background: none;
	padding: 0.4em 1.2em;
	font-size: 124%;
	font-weight: bold;
}

section.workflow .figure {
	margin-bottom: 3em;
	text-align: center;
}

section.workflow .figure img {
	width: 100%;
}

section.workflow .sp {
	display: none;
}

section.workflow ol {
	list-style: none;
}

section.workflow li {
	position: relative;
	margin-bottom: 2em;
	padding-left: 28em;
}

section.workflow li span {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1.5em;
	background: #eee;
	padding: 0.65em 1em 0.65em 7em;
	width: 17em;
	font-weight: bold;
}

section.workflow li span em {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #444;
	padding: 0.1em 0;
	width: 4em;
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 154%;
	font-weight: lighter;
	color: #fff;
}

section.faq {
	margin-bottom: 5em;
}

section.faq h1 {
	margin-bottom: 1.5em;
	border: none;
	border-left: solid 0.4em #000;
	background: none;
	padding: 0.4em 1.2em;
	font-size: 124%;
	font-weight: bold;
}

section.faq dl {
	margin-bottom: 3em;
}

section.faq dt {
	position: relative;
	padding: 1.5em 1.5em 1.5em 4em;
}

section.faq dd {
	position: relative;
	background: #f3f3f3;
	padding: 1.5em 1.5em 1.5em 4em;
}

section.faq dl em {
	position: absolute;
	top: 0.4em;
	left: 0.8em;
	font-family: "Times New Roman", Times, serif;
	font-size: 185%;
	color: #bbb;
}
	
section.company {
	margin: 0 auto 4em;
	max-width: 54em;
}

section.company dl {
	border: solid 1px #ccc;
	padding: 1em 3.5em;
}

section.company dt {
	padding: 2em 0;
	width: 11em;
}

section.company dd {
	margin-top: -5.7em;
	border-bottom: solid 1px #ccc;
	padding: 2em 0 2em 12em;
}

section.company dd:last-child {
	border-bottom: none;
}

section	.wpcf7 {
	margin: 0 auto !important;
	max-width: 54em;
}

section	.wpcf7 form {
	border: solid 1px #ccc;
	padding: 1em 3.5em;
}

section	.wpcf7 dl {
	border-bottom: solid 1px #ccc;
	padding: 1.5em 0;
	white-space: nowrap;
}

section	.wpcf7 dt {
	display: inline-block;
	width: 14em;
	vertical-align: middle;
}

section	.wpcf7 dd {
	display: inline-block;
	vertical-align: middle;
}

section	.wpcf7 dd input {
	width: 16em;
}

section	.wpcf7 dd select {
	width: 16em;
}

section	.wpcf7 dd textarea {
	width: 32em;
}

section	.wpcf7 p.button {
	text-align: center;
}

section	.wpcf7 p.button input {
	margin: 3em 0 2em;
	border: solid 1px #000;
	width: 15em;
}

section.privacy div {
	margin: 0 auto 5em;
	border: solid 1px #ccc;
	padding: 4em 4em 2.5em;
	max-width: 46em;
}

section.privacy p,
section.privacy dd {
	margin-bottom: 1.5em;
}

section.privacy dd p {
	margin-bottom: 0;
}

section.privacy dd ul {
	padding-left: 1.5em;
	list-style: disc;
}

section.privacy p.address {
	margin: 1.5em 0;
}

section.special {
	margin-bottom: 5em;
}

section.special h1 {
	margin-bottom: 1.5em;
	border: none;
	border-left: solid 0.4em #000;
	background: none;
	padding: 0.4em 1.2em;
	font-size: 124%;
	font-weight: bold;
}

section.special.eyecatch {
	overflow: hidden;
}

section.special.eyecatch h1 {
	float: left;
	margin-bottom: 3em;
	border-left: none;
	padding: 1% 0 0;
	width: 53%;
	text-align: center;
	font-size: 100%;
}

section.special.eyecatch p.photo {
	float: right;
	margin-bottom: 3em;
	width: 46%;
}

section.special.eyecatch p.summary {
	clear: both;
	background: #333;
	padding: 1em 6em;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 139%;
	color: #fff;
}

section.special.points li {
	overflow: hidden;
	margin-bottom: 1.5em;
}

section.special.points li .photo {
	float: left;
	width: 41%;
}

section.special.points li .photo img {
	width: 100%;
}

section.special.points li dl {
	margin-left: 47%;
}

section.special.points li dt {
	position: relative;
	z-index: 1;
	padding: 1.8em 0 1.5em;
	line-height: 1.4;
	font-size: 147%;
}

section.special.points li dt em {
	position: absolute;
	top: 0;
	left: -0.1em;
	z-index: -1;
	line-height: 1;
	font-family: "Times New Roman", Times, serif;
	font-size: 450%;
	font-style: italic;
	color: #ddd;
}
	
section.special.points li dd {
	font-size: 108%;
}
	
section.special.points li dd span {
	display: block;
	margin-top: 1.5em;
	text-align: center;
}
	
section.special.functions ul {
	overflow: hidden;
	margin: 0 -1.1%;
}

section.special.functions li {
	float: left;
	margin: 0 1% 3em;
	width: 30.33%;
}

section.special.functions li img {
	margin-bottom: 1em;
	width: 100%;
}

section.special.define p.photo {
	float: left;
	width: 32%;
}

section.special.define dl {
	margin-left: 36%;
}

section.special.define dt {
	margin-bottom: 0.8em;
	background: #f6f6f6;
	padding: 0.2em 0.7em;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 231%;
}

section.special.copy {
	margin: 5em auto;
	max-width: 41em;
}

section.special.copy h1 {
	margin-bottom: 1.5em;
	border-left: none;
	padding: 0;
}

section.special.series {
	overflow: hidden;
	margin-bottom: 6.5em;
	padding: 0 4em;
}

section.special.series h1 {
	margin: 0 -3.5em 1.5em;
	font-size: 114%;
	font-weight: normal;
}

section.special.series.ds h1 {
	margin: 0 -2em 1.5em;
	background: url(../img/bg-dot-gy.png) repeat 0 0;
	border-left: none;
	padding: 0.8em 1em;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 146%;
}

section.special.series .eyecatch {
	margin-bottom: 2em;
}

section.special.series .eyecatch img {
	width: 100%;
}

section.special.series .photo {
	float: left;
	width: 33%;
}

section.special.series dl {
	margin: 0 0 2em 39%;
}
	
section.special.series dt {
	margin-bottom: 1em;
	min-height: 3.4em;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 169%;
}

section.special.series dd {
	border: solid 1px #DDD;
	padding: 2em 2.5em 0.5em;
}
	
section.special.series dd p {
	margin-bottom: 1.7em;
}
	
section.special.series dd p.price {
	background: url(../img/mk-list2.png) no-repeat 0 0.2em;
	background-size: 1.1em 1.1em;
	padding-left: 1.6em;
}

section.special.series .banners {
	clear: left;
}

section.special.series .banners li {
	float: left;
	margin-bottom: 0.8em;
	width: 49%;
}

section.special.series .banners li:nth-child(2n+1) {
	margin-right: 2%;
}

section.search dl {
	border-bottom: solid 1px #ccc;
	padding: 0.8em 0;
}

section.search dt {
	margin-bottom: 0.5em;
	font-size: 116%;
	font-weight: bold;
}

section.search .more {
	text-align: right;
}

section p.nav-privacy {
	margin: 1.5em auto 4em;
	max-width: 54em;
}

section p.nav-privacy a {
	display: block;
	background: #eee;
	padding: 0.2em 1em;
	text-align: center;
}


@media screen and (max-width:1050px) {

section.special.series h1 {
	margin: 0 -1.75em 1.5em;
}

section.special.series.ds h1 {
	margin: 0 -1.34em 1.5em;
}

}

@media screen and (max-width:800px) {

section.policy div {
	padding: 0 2em 0 2em;
}

section.lifestyle div {
	max-width: 40em;
}

section.lifestyle .logo {
	position: static;
	margin: 0 auto 3em;
	width: 8em;
}

section.summary p.photo {
	width: 37%;
}

section.summary div {
	width: 58%;
}

section.summary h1 {
	font-size: 159%;
}

section.quality .spot {
	margin: 0 auto 1em;
	background: none;
	max-width: 42em;
}

section.quality .spot dl {
	float: none;
	margin-bottom: 1em;
	border: solid 1px #ccc;
	width: auto;
}

section.quality .spot dt {
	padding: 1em 1.8em;
	font-size: 167%;
}

section.quality .spot .photos {
	overflow: hidden;
	float: none;
	padding-bottom: 0;
	width: 100%;
}

section.quality .spot .photos ul {
	overflow: hidden;
	width: 800%;
}

section.quality .spot .photos li {
	position: static;
	float: left;
	width: 12.5%;
}

section.quality .spot dd {
	padding: 0 3em 2em;
}

section.quality .points {
	margin: 0 auto;
	max-width: 42em;
}

section.quality .points li {
	float: none;
	margin: 0 0 1em;
	width: auto;
}

section.quality .points li dl {
	padding: 2em 3em;
}

section.quality .points li dt {
	font-size: 167%;
}

section.workflow .figure {
	margin: 0 auto 3em;
	max-width: 12.5em;
}

section.workflow .pc {
	display: none;
}

section.workflow .sp {
	display: block;
}

section.workflow ol {
	margin: 0 auto;
	max-width: 42em;
}

section.workflow li {
	margin-bottom: 1.5em;
	padding-left: 0;
}

section.workflow li span {
	display: block;
	box-sizing: border-box;
	position: static;
	margin: 0 0 0.5em;
	width: 100%;
}

section	.wpcf7 dd textarea {
	width: 24em;
}

section.special.eyecatch p.summary {
	padding: 1em 3em;
}

}

@media screen and (max-width:640px) {

nav.topicpath p {
	padding: 0 1.5em;
	font-size: 75%;
}

article > h1 {
	margin: 0 0 1.5em;
	font-size: 117%;
}

article .nav-contact {
	margin: 0 1.5em 3em;
}

article .nav-contact img {
	box-sizing: border-box;
	width: 100%;
}

section {
	padding: 0 1.5em;
}

section.policy {
	margin: 0;
}

section.policy h1 {
	font-size: 200%;
}

section.lifestyle {
	background: #000 url(../img/bg-policy-lifestyle-sp.jpg) no-repeat 0 0;
	background-size: 100% 100%;
	height: 40em;
	line-height: 40em;
}

section.lifestyle div {
	padding-left: 2em;
}

section.lifestyle .logo {
	width: 5em;
}

section.material {
	background: #000 url(../img/bg-policy-material-sp.jpg) no-repeat 0 0;
	background-size: 100% 100%;
	height: 29em;
	line-height: 29em;
}

section.value {
	background: #000 url(../img/bg-policy-value-sp.jpg) no-repeat 0 0;
	background-size: 100% 100%;
	height: 29em;
	line-height: 29em;
}

section.case {
	background: #000 url(../img/bg-policy-case-sp.jpg) no-repeat 100% 0;
	background-size: 100% 100%;
	height: 29em;
	line-height: 29em;
}

section.summary p.photo {
	display: block;
	width: auto;
}

section.summary div {
	display: block;
	width: auto;
}

section.experience {
	margin-bottom: 3em;
}

section.experience h1 .sp {
	display: inline;
}

section.experience ul {
	column-count: auto;
	font-size: 100%;
}

section.experience .point {
	font-size: 100%;
}

section.quality {
	margin-bottom: 3em;
}

section.quality h1 {
	margin: 0 -1.5em 2em;
	background: #000 url(../img/bg-hd-oem-quality-sp.jpg) no-repeat 100% 0;
	background-size: 100% auto;
	height: 12em;
	line-height: 12em;
}

section.quality h1 img {
	max-width: 21em;
}

section.quality .point {
	font-size: 109%;
}

section.workflow {
	margin-bottom: 3em;
}

section.faq {
	margin-bottom: 3em;
}

section.faq h1 {
	margin-bottom: 0.5em;
}

section.faq dl {
	margin-bottom: 2em;
}

section.faq dt {
	padding: 1em;
}

section.faq dd {
	padding: 1em;
}

section.faq dl em {
	position: static;
	display: block;
}
	
section.company dl {
	padding: 0.5em 1.5em;
}

section.company dt {
	padding: 1.5em 0 0;
	width: auto;
}

section.company dd {
	margin-top: 0;
	padding: 0 0 1.5em;
}

section	.wpcf7 form {
	padding: 0.5em 1.5em;
}

section	.wpcf7 dl {
	border-bottom: none;
	padding: 1em 0;
}

section	.wpcf7 dt {
	display: block;
	margin-bottom: 0.5em;
	width: auto;
}

section	.wpcf7 dd {
	display: block;
}

section	.wpcf7 dd input {
	width: 98%;
}

section	.wpcf7 dd select {
	width: 98%;
}

section	.wpcf7 dd textarea {
	width: 98%;
}

section	.wpcf7 p.button input {
	box-sizing: border-box;
	width: 100%;
}

section.privacy div {
	padding: 1.5em 1.5em 0;
}
	
section.special.eyecatch {
	padding: 0;
}

section.special.eyecatch h1 {
	float: none;
	margin-bottom: 0;
	padding: 0;
	width: auto;
}

section.special.eyecatch p.photo {
	float: none;
	margin-bottom: 0;
	width: auto;
}

section.special.eyecatch p.summary {
	padding: 1em 1.5em;
	font-size: 109%;
}

section.special.points li {
	margin-bottom: 3em;
}

section.special.points li .photo {
	float: none;
	width: auto;
}

section.special.points li dl {
	margin-left: 0.5em;
}

section.special.points li dt {
}

section.special.functions ul {
	margin: 0;
}

section.special.functions li {
	float: none;
	margin: 0 0 3em;
	width: auto;
}

section.special.define p.photo {
	float: none;
	margin-bottom: 1em;
	width: auto;
}

section.special.define dl {
	margin-left: 0;
}

section.special.define dt {
	font-size: 180%;
}

section.special.copy,
section.special.series {
	padding: 0 1em;
}

section.special.copy {
	margin: 2.5em auto;
}

section.special.copy h1 {
	margin-bottom: 1em;
}

section.special.series {
	margin-bottom: 5.5em;
}

section.special.series h1 {
	margin: 0 0 0.8em;
}

section.special.series.ds h1 {
	margin: 0;
	padding: 0.5em 0.8em;
	font-size: 133%;
}

section.special.series .eyecatch {
	margin-bottom: 0;
}

section.special.series .photo {
	float: none;
	width: auto;
}

section.special.series .photo img {
	width: 100%;
}

section.special.series dl {
	margin: 0 0 1.5em;
}

section.special.series dt {
	margin-bottom: 0.6em;
	min-height: 1em;
	line-height: 1.4;
	font-size: 158%;
}

section.special.series dd {
	padding: 1em 1.5em 0.5em;
	font-size: 91%;
}

section.special.series dd p {
	margin-bottom: 0.5em;
}

section.special.series .banners {
	margin-bottom: 1.5em;
}

section.special.series .banners li {
	float: none;
	margin: 0 0 0.8em !important;
	width: auto;
}

section.special.series .banners li img {
	width: 100%;
}

}