@charset "utf-8";
/* ===================================================================
CSS information

 file name  :  concept.css
 style info :  スタイル指定
=================================================================== */
body { background:#5ddbf6;}

#concept_bg {
	padding-top:230px;
	overflow:hidden;
}
#concept_bg img.fixImg {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:-1;
	opacity:0.75;
}
.txt {
	margin: 0 0 50px;
	font-size: 15px;
	color: #262626;
	line-height: 2.5;
}

/*-----.fiveSenses-----*/
.fiveSenses {
	position:relative;
    height: 700px;
}
.fiveSenses .txt {
    padding-top: 300px;
    margin: 0 auto 20px;
}
.fiveSenses .upper { position:absolute; top:0; left:0; right:0;}
.fiveSenses .upper > div,
.fiveSenses .lower > div { display:inline-block; margin:0 45px;}
.fiveSenses .upper > div:first-child { vertical-align:-70px;}
.fiveSenses .upper > div:last-child { vertical-align:-80px;}

/*-------#conts-------*/
/*#conts { overflow:visible;}*/
#conts article { max-width:1065px; margin:0 auto; position:relative;}
#conts article h3 { margin:50px 0;}
#conts article h3 img,
#conts article h3 span {
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-weight:normal;
	display:inline-block;
	vertical-align:bottom;
}
#conts article h3 span { text-align:left; margin-left:35px; line-height:1.8;}
#conts .senses02 h3,
#conts .senses04 h3 { text-align:left;}
#conts .senses02 h3 span,
#conts .senses04 h3 span { text-align:right; margin-right:35px; line-height:1.8; float: left; margin-left: 160px;}

#conts article .imgBox > div { display:inline-block; background-size:contain !important;}
#conts article .imgBox > div img { opacity:0; -webkit-transition: all 2.5s; transition: all 2.5s;}
#conts article .point .illustration { opacity:0; -webkit-transition: all 3.0s; transition: all 3.0s; z-index:100;}
#conts .senses01 .active+.point .illustration,
#conts .senses02 .active+.point .illustration,
#conts .senses03 .active+.point .illustration,
#conts .senses04 .active+.point .illustration,
#conts .senses05 .active+.point .illustration { opacity:1;}

#conts article .imgBox > div figure { position:relative;}
#conts article .imgBox > div figure figcaption { position:absolute; bottom:0; font-size:0.7em; padding:3px;}
#conts .senses01 .imgBox > div figure figcaption,
#conts .senses03 .imgBox > div figure figcaption,
#conts .senses05 .imgBox > div figure figcaption { right:0;}
#conts .senses01 .imgBox > div figure figcaption { bottom:-18px; color:#666;}

/*---.senses01---*/
#conts .senses01 { max-width:1400px;}
#conts .senses01 h3 img { width:353px;}
#conts .senses01 .imgBox { margin-bottom:360px;}
#conts .senses01 .imgBox > div { background:url(../../../img/pages/concept/senses01Off.png) 0 0 no-repeat;}
#conts .senses01 .active > div img { opacity:1;}

#conts .senses01 .point { max-width:460px;}
#conts .senses01 .point { position:absolute; bottom:-315px; left:15.2%;}
#conts .senses01 .point .illustration { position:absolute; right:-320px; top:120px;}
#conts .senses01 .point .illustration img { width:226px;}

/*---.senses02---*/
#conts .senses02 h3 img { width:353.5px;}
#conts .senses02 .imgBox { text-align:left; margin-bottom: 100px;}
#conts .senses02 .imgBox > div { background:url(../../../img/pages/concept/senses02Off.png) 0 0 no-repeat;}
#conts .senses02 .active > div img { opacity:1;}

#conts .senses02 .point { position:absolute; top:150px; right:0;}
#conts .senses02 .point .illustration { position:absolute; bottom:-155px; right:-35px;}
#conts .senses02 .point .illustration img { width:193px;}

/*---.senses03---*/
#conts .senses03 h3 img { width:447px;}
#conts .senses03 .imgBox { text-align:right; margin-bottom:90px;}
#conts .senses03 .imgBox > div { background:url(../../../img/pages/concept/senses03Off.png) 0 0 no-repeat;}
#conts .senses03 .active > div img { opacity:1;}

#conts .senses03 .point { position:absolute; bottom:-50px; left:0;}
#conts .senses03 .point .illustration { position:absolute; top:-180px; left:20px;}
#conts .senses03 .point .illustration img { width:168.5px;}

/*---.senses04---*/
#conts .senses04 h3 img { width:312px;}
#conts .senses04 .imgBox { text-align:left; margin-bottom: 60px;}
#conts .senses04 .imgBox > div { background:url(../../../img/pages/concept/senses04Off.png) 0 0 no-repeat;}
#conts .senses04 .active > div img { opacity:1;}

#conts .senses04 .point { position:absolute; top:160px; right:0;}
#conts .senses04 .point .illustration { position:absolute; bottom:-95px; left:50px;}
#conts .senses04 .point .illustration img { width:215px;}

/*---.senses05---*/
#conts .senses05 h3 img { width:435px;}
#conts .senses05 .imgBox { text-align:right; margin-bottom: 100px;}
#conts .senses05 .imgBox > div { background:url(../../../img/pages/concept/senses05Off.png) 0 0 no-repeat;}
#conts .senses05 .active > div img { opacity:1;}

#conts .senses05 .point { position:absolute; bottom:-20px; left:0;}
#conts .senses05 .point .illustration { position:absolute; top:-172px; left:-60px;}
#conts .senses05 .point .illustration img { width:226px;}

/*---point---*/

.point {
	background:url(../../../img/elements/point_bg.jpg) 0 0 repeat;
	max-width:312px;
	position:relative;
	border-radius:3px;
	-webkit-box-shadow: 0 1px 10px #777;
	-moz-box-shadow: 0 1px 10px #777;
	box-shadow: 0 1px 10px #777;
	color:#333;
	padding:40px 25px;
	z-index:1;
}
.point p {
	text-align:left;
    font-size: 0.9em;
    letter-spacing: 0.08em;
    line-height: 2;
}
.point strong {
    display: block;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align:center;
    font-size: 1.6em;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 20px;
}
.point::before {
	content:'';
	display:block;
	width:27px;
	height:27px;
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	top:10px;
	left:10px;
	z-index:10;
}
.point::after {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
}
.point p::before {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:10;
}
.point p::after {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	bottom:10px;
	left:10px;
	z-index:10;
}
.point .caption { text-align:left;font-size: 0.8em;}


@media screen and (max-width: 1280px) {
#conts .senses01 .imgBox { margin-bottom: 400px;}
#conts .senses01 .point { bottom: -360px;}
}
@media screen and (max-width: 1105px) {
.fiveSenses .upper > div,
.fiveSenses .lower > div { margin: 0 35px;}
}
@media screen and (max-width: 1080px) {
.point { margin:0 auto;}

.fiveSenses { height:auto;}
.fiveSenses .txt { padding-top: 0; margin: 0 auto 30px;}
.fiveSenses .upper { position:static;}
.fiveSenses .upper > div,
.fiveSenses .lower > div { margin:0 5px;}
.fiveSenses .upper > div:first-child,
.fiveSenses .upper > div:last-child { vertical-align:top;}
}
@media screen and (max-width: 980px) {
.fiveSenses .upper > div,
.fiveSenses .lower > div { width:30%;}

#conts article h3 { margin: 80px 0 50px;}
#conts .senses02 h3,
#conts .senses04 h3 { text-align:center;}
#conts .senses02 h3 span,
#conts .senses04 h3 span { float:none;}
#conts article h3 span { display:block; text-align:center!important; margin:20px 0!important;}

#conts article .imgBox { margin-bottom:0!important; text-align:center!important;}
#conts article .point { position:relative!important; top:auto!important; bottom:auto!important; left:auto!important; right:auto!important; max-width:100%!important; margin:20px;}
#conts article .point .illustration { position:relative!important; top:auto!important; bottom:auto!important; left:auto!important; right:auto!important;}
#conts article .point p { display:inline-block; width:72.5%; vertical-align:middle;}
#conts article .point .illustration { display:inline-block; width:24.5%; margin-left:2%; vertical-align:middle;}
}
@media screen and (max-width: 640px) {
#concept_bg { padding-top:150px;}
.txt { padding: 0 20px; text-align:left;}
.txt br { display:none;}

#conts article h3 { padding:0 15px;}

.point { margin: 0 10px;}
#conts article .point { margin:12px;}
#conts .senses01 .point { margin:20px;}
#conts article .point p { width:100%; margin-bottom:20px;}
#conts article .point .illustration { width:100%;}

#concept_bg > .pcOnly {
	display:none;
}
#concept_bg > .smpOnly {
	display:inline-block!important;
}
}
@media screen and (max-width: 480px) {
.fiveSenses .upper > div,
.fiveSenses .lower > div { width:49%; margin:0;}

#conts article .point p strong { font-size:1.4em;}
#conts .senses01 .point p strong br { display:none;}

#conts article h3 br { display:none;}
#conts article h3 span { text-align:left !important;}
}
@media screen and (max-width: 320px) {
.point {
	padding:40px 17px;
}
.point p > br {
	display:none;
}
}