@charset "utf-8";

/* =======================================

	Others CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
	1.company
	2.concept
	3.hapiie
	4.collaboration
	5.privecy
	6.case
	7.event
	8.add

========================================== */

/*  1.company
========================================== */
#company{}

#company .mainBody{	margin-bottom: 75px;}
#company .mainBody figure{
	text-align: left;
	max-width: 700px;
	margin: auto;
}

#company .informationBody{	margin-bottom: 100px;}
#company .informationBody iframe{
	height: 400px;
}

#company .hapiieInfoBody{}
#company .hapiieInfoBody p{	margin-bottom: 20px;}
#company .hapiieInfoBody p img{
	max-width: 235px;
	margin: auto;
}
@media screen and (max-width:700px){
	#company .hapiieInfoBody p img{	max-width: 500px;}
}


/*  2.concept
========================================== */
#concept{}

#concept .mainBody{
	margin-bottom: 80px;
}
#concept .mainBody figure{	margin-bottom: 75px;}
#concept .mainBody p{	margin-bottom: 90px;}

#concept .conceptBody {
	margin: 0 0 140px;
	overflow: hidden;
}
#concept .conceptBody .cnpt {
	float: left;
	width: 31.3%;
	max-width: 380px;
	margin: 0 1%;
}
#concept .conceptBody .cnpt figcaption {	border-bottom: 1px solid #999;}
#concept .conceptBody .cnpt figcaption img {
	max-width: 270px;
	margin: auto;
}
#concept .conceptBody .cnpt p {
	text-align: left;
	margin-bottom: 40px;
}
@media screen and (max-width:700px){
	#concept .conceptBody .cnpt {
		width: 45.6%;
		margin: 0 2%;
	}
}
@media screen and (max-width:590px){
	#concept .conceptBody .cnpt {
		float: none;
		width: 90%;
		margin: auto;
	}
}


/*  3.hapiie
========================================== */
#hapiie{}

#hapiie > article > section{	margin-bottom: 60px;}

#hapiie .mainBody .hapiieInfo{	margin-bottom: 30px;}

#hapiie .mainBody .hapiieList ul{	overflow: hidden;}
#hapiie .mainBody .hapiieList li{
	list-style: none;
	float: left;
	overflow: hidden;
	width: 23.8%;
	max-width: 286px;
	margin: 5px 1.6% 0 0;
	border-radius: 5px;
}
#hapiie .mainBody .hapiieList li:nth-child(4n){	margin-right: 0;}

#hapiie .mainBody .hapiieList li img{
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
#hapiie .mainBody .hapiieList li img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
@media screen and (max-width:700px){
	#hapiie .mainBody .hapiieList li{	width: 49.1%;}
	#hapiie .mainBody .hapiieList li:nth-child(2n){	margin-right: 0;}
}

#hapiie .informationBody .catch img{	max-width: 900px;}
#hapiie .informationBody .catch + figure{	max-width: 760px; margin: auto;}
#hapiie .informationBody .informationBodyText{	margin: 30px auto;}
#hapiie .informationBody .informationBodyText img{	max-width: 281px; margin-top: 5px;}

#hapiie .modelhouse figure img{	max-width: 900px;}


/*  4.collaboration
========================================== */
#collaboration{}
#collaboration > article > section{	margin-bottom: 60px;}

#collaboration .informationBody .how{	display: flex;}
#collaboration .informationBody .how li{
	text-align: left;
	width: 25%;
	max-width: 300px;
	padding: 5px 20px;
	border-right: 1px solid #ccc;
	list-style: none;
}
#collaboration .informationBody .how li:last-child{	border-right: none;}

#collaboration .informationBody .how li figure{
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
}

#collaboration .informationBody .how + p{
	max-width: 203px;
	margin: 20px auto;
}

@media screen and (max-width:700px){
	#collaboration .informationBody .how{	display: block;}
	#collaboration .informationBody .how li{
		width: 100%;
		max-width: 700px;
		border: none;
	}
	#collaboration .informationBody .how li figure{	border: none;}
	#collaboration .informationBody .how + p{	max-width: 300px;}
}

#collaboration .memberList{	margin-bottom: 120px;}
#collaboration .memberList h3{	margin-bottom: 15px;}

#collaboration .memberList ul{	margin: 0 -0.7%; overflow: hidden;}
#collaboration .memberList li{
	list-style: none;
	max-width: 134px;
	min-width: 100px;
	width: 10.6%;
	margin: 0 0.75% 10px;
	display: inline-block;
}

#collaboration .hapikenMember p{	margin-bottom: 50px;}

#collaboration .hapikenMember .mbr {	overflow: hidden; margin-bottom: 70px;}
#collaboration .hapikenMember .mbr ul{
	list-style: none;
	width: 58%;
	float: left;
	overflow: hidden;
}
#collaboration .hapikenMember .mbr li{
	width: 49.0%;
	float: left;
	margin: 0 0.5% 0.5% 0;
}
#collaboration .hapikenMember .mbr li a{
	display: block;
	overflow: hidden;
	border-radius: 5px;
	width: 100%;
	height: 100%;
}
#collaboration .hapikenMember .mbr li a img{
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
#collaboration .hapikenMember .mbr li a img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

#collaboration .hapikenMember .mbr figure{
	float: right;
	width: 40%;
}
#collaboration .hapikenMember .mbr table{
	line-height: 1.8;
	float: right;
	width: 40%;
}
#collaboration .hapikenMember .mbr th{
	width: 20%;
	min-width: 80px;
	text-align: left;
}

#collaboration .colaboLinkBody li{
	display: inline-block;
	width: 33%;
	max-width: 400px;
}

@media screen and (max-width:850px){
	#collaboration .hapikenMember .mbr ul{
		float: none;
		width: 100%;
		margin-bottom: 20px;
		}
	#collaboration .hapikenMember .mbr li{
		width: 24.5%;
	}
	#collaboration .hapikenMember .mbr figure{
		float: none;
		width: 100%;
	}
	#collaboration .hapikenMember .mbr table{
		float: none;
		width: 100%;
	}
}

@media screen and (max-width:700px){
	#collaboration .hapikenMember .mbr th{	width: 100%;}
	#collaboration .colaboLinkBody li{
		width: 47%;
		max-width: 400px;
	}
}


/*  5.privecy
========================================== */
#privecy{}

#privecy .mainBody{	margin-bottom: 80px;}

#privecy .mainBody p{	margin: 50px auto;}
#privecy .mainBody ul{
	text-align: left;
	max-width: 650px;
	margin: 50px auto;
}


/*  6.case
========================================== */
#case{}

#case .linkbtn {max-width: 163px;margin: auto;}

.manywoodLink ul ,.fewwoodLink ul{
	overflow: hidden;
	margin-bottom: 60px;
}
.manywoodLink li ,.fewwoodLink li{
	list-style: none;
	width: 18%;
	float: left;
	margin-right: 2.5%;
	margin-bottom:  15px;
}
.manywoodLink li:nth-child(5n) ,.fewwoodLink li:nth-child(5n){	margin-right: 0;}

.manywoodLink li a ,.fewwoodLink li a{
	display: block;
	overflow: hidden;
	border-radius: 5px;
	width: 100%;
	height: 100%;
}
.manywoodLink li a img ,.fewwoodLink li a img{
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.manywoodLink li a img:hover ,.fewwoodLink li a img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

#case .informationBody section{	overflow: hidden;}
#case .caseLeft{
	float: left;
	width: 60.8%;
}
#case .caseRight{
	float: right;
	width: 38%;
}
#case .caseRight div{	overflow: hidden;}

#case .informationBody a{
	display: block;
}
#case .informationBody a:hover{	opacity: 0.7;}
#case .caseRight div a:nth-child(1) ,#case .caseRight div a:nth-child(2){
	width: 49%;
	float: left;
	margin-bottom: 1.5%;
}
#case .caseRight div a:nth-child(1){margin-right: 1%;}

#case .informationBody section{
	background: url(../../images/common/bg-01.png) no-repeat 50% 100% ;
	margin-bottom: 50px;
	padding-bottom: 10px;
}

@media screen and (max-width:700px){
	.manywoodLink li figcaption ,.fewwoodLink li figcaption{	display: none;}
	.manywoodLink ul ,.fewwoodLink ul{	margin-bottom: 0;}
	.manywoodLink ul + p ,.fewwoodLink ul + p{	margin-bottom: 60px;}
}


/*  7.event
========================================== */
#event{}

#event section{	margin-bottom: 80px;}
#event .hapiieEvent > figure{
	max-width: 887px;
	margin: auto;
}

#event .how{
	display: flex;
	margin: 50px auto;
}
#event .how li{
	text-align: left;
	width: 25%;
	max-width: 300px;
	padding: 5px 20px;
	border-right: 1px solid #ccc;
	list-style: none;
}
#event .how li:last-child{	border-right: none;}

#event .how li figure{
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
}
#event .hapiieEvent p{margin-bottom: 10px;}

@media screen and (max-width:700px){
	#event .how{	display: block;}
	#event .how li{
		width: 100%;
		max-width: 700px;
		border: none;
		margin-bottom: 40px;
	}
	#event .how li figure{	border: none;}
}

#event .youtubeBody {}
#event .youtubeBody section {	text-align: left;}
#event .youtubeBody .youtubeCont {
	max-width: 810px;
	margin: 15px auto 0;
	overflow: hidden;
}
#event .youtubeBody .youtubeCont figure{
	width: 18%;
	float: left;
}
#event .youtubeBody .youtubeCont div{
	width: 79%;
	float: right;
}
#event .youtubeBody .youtubeCont div img{	max-width: 440px;margin: 10px 0;}

@media screen and (max-width:700px){
	#event .youtubeBody .youtubeCont figure{	width: 22%;}
	#event .youtubeBody .youtubeCont div{	width: 73%;}
}

#event .hapiieInfoBody iframe{	height: 400px;}

#event .hapiieInfoBody strong{	color: #c00;}
#event .hapiieInfoBody p{	margin: 20px auto;}
#event .hapiieInfoBody p img{	max-width: 281px;;}

#event .eventList li{	list-style: none;}


/*  8.add
========================================== */
#add{}
#add section{	margin-bottom: 50px;}

#add section h2 + figure{	margin-bottom: 20px;}
#add section p{
	margin-bottom: 20px;
}

#add .mainBody{
	margin-bottom: 80px;
}

#add .box1{}
#add .box1 p{	margin-bottom: 50px;}
#add .box1 h2 + p{	margin-bottom: 30px;}
#add .box1 p img{	max-width: 900px;}

#add .box2 {	overflow: hidden;}
#add .box2 .list-mv07{
	margin: 0 -20px;
	display: flex;
	flex-wrap: wrap;
}

#add .box2 .cnpt {
	float: left;
	width: calc( 50% - 40px);
	max-width: 580px;
	margin: 0 20px;
}
#add .box2 .cnpt figcaption {	border-bottom: 1px solid #999;}
#add .box2 .cnpt figcaption img {
	max-width: 270px;
	margin: auto;
}
#add .box2 .cnpt p {
	text-align: left;
	margin-bottom: 40px;
}
@media screen and (max-width:590px){
	#add .box2 .cnpt {
		float: none;
		width: 90%;
		margin: auto;
	}
}

#add .conceptBody {	overflow: hidden;}
#add .conceptBody .list-mv07{	margin: 0 -9px 100px;}
#add .conceptBody .cnpt {
	float: left;
	width: 31.3%;
	max-width: 380px;
	margin: 0 1%;
}
#add .conceptBody .cnpt figcaption {	border-bottom: 1px solid #999;}
#add .box3 .cnpt figcaption{
	font-size: 116%;
	font-weight: bold;
	text-align: left;
}
#add .box5 .cnpt figcaption img {
	max-width: 270px;
	margin: auto;
}
#add .conceptBody .cnpt p {
	text-align: left;
	margin-bottom: 40px;
}
#add .conceptBody .cnpt p span{
font-weight: bold;
font-size: 108%;
}
@media screen and (max-width:700px){
	#add .conceptBody .cnpt {
		width: 45.6%;
		margin: 0 2%;
	}
}
@media screen and (max-width:590px){
	#add .conceptBody .cnpt {
		float: none;
		width: 90%;
		margin: auto;
	}
}