@charset "utf-8";
/*--------------------------------------
	copyright : Lampros co.,Ltd.
	-----------------------------------*/

@import url(./reset.css);
@import url(./font-awesome.min.css);
@import url(./common.css);
@import url(./page_common.css);


/*
 共通
==============================*/
#contents h1{margin-bottom: 3%;}

div.nav{position: relative;}
/*div.nav:after{content:url(https://paradia.jp/_img/feature/ruby.png); position: absolute; top: 22px; right:272px; line-height:0;}*/

h3 sup{font-size: 10px; vertical-align: super;}

#contents #feature_nav {background-color: transparent;}
#contents #feature_nav ul{text-align: center; overflow: hidden;}
#contents #feature_nav li{text-align: center; display: inline-block; float: none;}
#contents #feature_nav li a {display: block;}

@media screen and (min-width: 641px) {
	#contents #feature_nav li + li{margin-left: 20px;}
}

@media screen and (max-width: 640px) {
	#contents #feature_nav li{float: left; width: 32%;}
	#contents #feature_nav li + li{margin-left: 2%;}
	#contents h2 {font-size: 6vw;}
	#contents h2 span{height: 2.4em;}
}

#contents .inner816 {width:816px; margin-left: auto; margin-right: auto; max-width: 94%;}
#contents .inner840 {width:840px; margin-left: auto; margin-right: auto; max-width: 94%;}

#contents h1 img{ width:100%;}
#contents h2 img.h2{padding-top: 28px;}
#contents h2 {margin-bottom: 4%;}

#contents section p{ font-size: 15px;}
#contents section p.p10,
#contents section p.p10 span{font-size: 10px !important;}

#contents p a {color:#2ea2db;}
#contents p a:hover {opacity:0.7;}

div.nav{margin-bottom: 16px;}

#contents h3 { font-size: 22px; margin-bottom: 8px;}
#contents h3:before {content:"■";}

#contents h4:after{content: normal;}
#contents h4{border-bottom: 1px solid; font-size: 18px}

@media screen and (max-width: 640px) {
	#contents h3 {font-size: 16px;}
	#contents section p{ font-size: 14px;}
	#contents h4{font-size: 15px;}
}



/*comfortable*/
#contents_comfortable h2 span,
#contents_comfortable h3,#contents_comfortable h4{color: #59c2e1;}

#contents_comfortable h2 { border-color:#59c2e1;}
#contents_comfortable h2 img.bg_color{ background-color: #59c2e1;}
#contents_comfortable figure {margin-bottom: 5%;}
#contents_comfortable p.p10{width: 820px; max-width: 100%;}
#contents_comfortable section div{padding-left: 90px;}


@media screen and (max-width: 640px) {
	#contents_comfortable section div{padding-left: 0;}

}

/*clean*/

#contents_clean h2,
#contents_clean h3,
#contents_clean h4,
#contents_clean h4,
#contents_clean figcaption strong,
#contents_clean .green_bg strong,
#contents_clean p a,
#contents_clean .key_color{color: #8bc56c;}
#contents_clean h2 { border-color:#8bc56c;}
#contents_clean h2 sup{font-size: 50%;vertical-align: super;}
#contents_clean h2 img.bg_color{ background-color: #8bc56c;}
#contents_clean .sec1 figcaption {height:150px; background:url(https://paradia.jp/_img/feature/clean/caption.png) no-repeat right top ; box-sizing:border-box; padding: 50px 20px 0 290px; margin-bottom: 3%;}

#contents_clean figcaption strong,
#contents_clean .green_bg strong{font-size: 18px;}

#contents_clean .green_bg{background-color: #f4f9ec; padding: 16px 20px 25px 20px;}
#contents_clean .green_bg p {font-size: 13px;}
#contents_clean .sec1{margin-bottom: 7%;}

#contents_clean .sec2 {margin-bottom: 1%;}
#contents_clean .sec2 .figure { padding-left: 80px;}
#contents_clean .sec2 .figure ul li{float: left; margin-right: 20px;margin-bottom: 2%;}
#contents_clean .sec2 .figure figcaption{font-size: 12px; margin-top: -10px; font-weight: bold;}
#contents_clean .sec2 p.mini{font-size: 10px !important; width: 850px; max-width: 100%;}
#contents_clean section.caption ol li{font-size: 10px; list-style-type: none; text-indent: -2em;  padding-left: 2em;}
#contents_clean section.caption ol li.nono{ text-indent: -1em;  padding-left: 2em;}
#contents_clean section.caption { /* background-color:#d7d7d7; */ padding: 0;}
#contents_clean section.caption .bg_zone{height:40px; background-repeat: repeat-x;}
#contents_clean section.caption .bg_zone.zone1{background-image:url(https://paradia.jp/_img/common/top_shadow.png);background-position:left top;}
#contents_clean section.caption .bg_zone.zone2{background-image:url(https://paradia.jp/_img/common/bottom_shadow.png);background-position:left bottom;}


@media screen and (max-width: 640px) {
	#contents_clean .sec2 .figure{padding-left: 3%;}
	#contents_clean .sec2 .figure ul li{margin-right: 0; margin-bottom: 4%;}
	#contents_clean .sec2 .figure li img{width: 100%;}
}

/*stylish*/
#contents_stylish h2,
#contents_stylish h3,
#contents_stylish h4,
#contents_stylish figcaption strong,
#contents_stylish .green_bg strong,
#contents_stylish p a,
#contents_stylish .key_color{color: #c88912;}
#contents_stylish h2 { border-color:#c88912; margin-bottom: 4%; font-size: 26px; }
#contents_stylish h2 img.bg_color, #contents_stylish .sec4 figcaption div{ background-color: #c88912;}

#contents_stylish .right_box{width:auto; box-sizing:border-box;}
#contents_stylish .right_box section{padding: 0; line-height: 1.4; }
#contents_stylish .right_box section p{width:45%; padding: 0 20px; float: left;}

#contents_stylish div.bottom{padding-left: 60px; padding-right: 30px;}
#contents_stylish div.bottom .sec3{width:420px;}
#contents_stylish div.bottom .sec4{width:470px;}
#contents_stylish div.bottom section p{padding-right: 30px;}
#contents_stylish div.bottom section figure img {margin-bottom: 8px;}
#contents_stylish div.bottom .sec3 figure.fr{padding-right:26px;}
#contents_stylish div.bottom .sec3 .nega_m{}
#contents_stylish div.bottom .sec3 .fukidashi_space{padding: 0.6em; background-color: #b68727; font-weight: bold; color: #fff; text-align: center; width: 185px; max-width: 48%; border-radius: 0.5em; font-size: 13px; line-height: 2; margin-bottom: 1em; position: relative;}
#contents_stylish div.bottom .sec3 .fukidashi_space:after{content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 1.4em 0.7em; border-color: #b68727 transparent transparent #b68727; position: absolute; top: 100%; left: 30%; transform: skewX(-20deg); transform-origin: top; -webkit-transform-origin: top;}
#contents_stylish div.bottom .sec4 .fr figcaption{width: 210px; }
#contents_stylish div.bottom .sec4 figcaption div {height: 90px; width: 210px;  margin-top: 5px; display:table-cell;  vertical-align:middle; line-height: 1.3; }
#contents_stylish div.bottom .sec4 figcaption div strong{color:white; line-height: 1.8;}
#contents_stylish .sec4 .img{height: 180px;}
#contents_stylish div.bottom .sec3 figure.fl img,
#contents_stylish div.bottom .sec3 figure.fr img{width: 185px;}

@media screen and (min-width: 641px) {
	#contents_stylish .right_box section{width: 50%;float: left;}
	#contents_stylish .right_box .sec1{width: 420px;}
	#contents_stylish .right_box .sec2{float: right;}
	#contents_stylish .right_box .sec2 p{width: 47%;}
	#contents_stylish .right_box section img.fr{max-width: 230px;}
	#contents_stylish .right_box{padding-left: 60px;padding-right: 30px;}
	#contents_stylish div.bottom .sec4 figure.fr figcaption{position: relative; left: 10px;}

}

@media screen and (max-width: 640px) {
	#contents_stylish div.bottom .sec3 .fukidashi_space{font-size: 11px !important;}
	#contents_stylish .right_box{width: auto; background-color: rgba(255,255,255,0.9);}
	#contents_stylish h2{}
	#contents_stylish .right_box section{padding-left: 3%;padding-right: 3%;}
	#contents_stylish .right_box section p{padding: 0 0 2%; width: auto; }
	#contents_stylish .right_box section img{width: 100%;}
	#contents_stylish div.bottom{padding-left: 3%;padding-right: 3%;}
	#contents_stylish div.bottom .sec3{width: auto;}
	#contents_stylish div.bottom .sec4{width: auto;}
	#contents_stylish div.bottom .sec4 .fl,
	#contents_stylish div.bottom .sec4 .fr{width: 48%;}
	#contents_stylish div.bottom section p{padding-right: 0;}
	#contents_stylish div.bottom .sec3 figure.fl,
	#contents_stylish div.bottom .sec3 figure.fr{width: 48%; padding-right: 0;}
	#contents_stylish h3{padding-left: 3%;}
	#contents_stylish div.bottom .sec4 .fr figcaption{width: 100%;}
	#contents_stylish div.bottom .sec4 figcaption div{width: 1000px;}
	#contents_stylish .sec4 .img{height: 37vw;}
	#contents_stylish .sec3 figcaption strong{font-size: 12px; vertical-align: baseline;}
	#contents_stylish .sec4 figcaption strong{font-size: 12px; vertical-align: baseline;}
	#contents_stylish div.bottom .sec4 figcaption div strong{font-size: 11px;}


}

/*mechanism*/
.mechanism #contents h2,
.mechanism #contents h3,
.mechanism figcaption strong,
.mechanism .green_bg strong,
.mechanism #contents p a,
.mechanism .key_color{color: #8cc66d;}
.mechanism #contents h2 { border-color:#8cc66d; margin-bottom: 4%; }
.mechanism #contents h2 img.bg_color{ background-color: #8cc66d;}

.mechanism #contents h2 img.h2 {
    padding-top: 20px;
}
.mechanism #contents h3:before {content:"";}
.mechanism map area { cursor:pointer;}
.mechanism div.rel{position: relative;}
.mechanism .mask{position: absolute; bottom:0; left: 119px;}
.mechanism .parts{}


#contents section p.kajogaki {
		position: relative;
		padding-left: 2em;
}
#contents section p.kajogaki span {
		position: absolute;
		left: 0;
		top: 0;
}