@charset "utf-8";
/* CSS Document */

body#case #container .mainArea,
body#case360 #container .mainArea,
body#highspeed #container .mainArea {
	margin-top:40px;

}

#containerIn .mainArea {
    width: 890px;
    padding: 40px 35px;
	margin: 0 auto 30px;
}

#containerIn .mainArea p{
	font-size: 13px;
}

/* -------------------- tablet  -------------------- */

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

#containerIn .mainArea {
    width: 90%;
    padding:0;
    margin: 20px auto 30px;
}
}

/* -------------------- smart phone  -------------------- */

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

.ch{
		text-align: center;
	}
}

/*	浅草50年ストーリー
--------------------------------------------------------------------------------------- */

#case .mainArea h2{
	margin-bottom: 40px;
	margin-top: 5px;
}

#case .mainArea h2 img{
	max-width: 100%;
}

#case .mainArea h2{
	margin-bottom: 15px;
}

#case .mainArea h2 img{
	max-width: 100%;
}

#case .mainArea h2{
	font-size: 160%;
	font-weight: bold;
	color: #111;
    font-family: 游明朝体, "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
}

#case .mainArea h2.st1{
	
}


#case .mainArea .st1 span{
	background-color: #2b84d2;
	color: #ffffff;	
	padding: 0 0.8em;
	font-size: 90%;
}

#case .mainArea .st2 span{
	background-color: #6fba2c;
	color: #ffffff;	
	padding: 0 0.8em;
	font-size: 90%;
}

#case .mainArea h3{
	margin-top: 30px;
	margin-bottom: 20px;
	color: #2b84d2;
	font-weight: bold;
}

#case .mainArea h3 img{
	max-width: 100%;
}

body#case #story {
	height: 700px;
	background: url(../../case/img/story_bg.jpg) no-repeat;
	background-size: 100%;
	position: relative;
	margin: 20px 0 40px;
}
body#case #story .st01 {
	position: absolute;
	top: 23px;
	left: 4.49%;
	background: url(../../case/img/story_01.png) no-repeat;
	width: 91.23%;
	background-size: 100%;
}
body#case #story .st02,
body#case #story .st03,
body#case #story .st04,
body#case #story .st05,
body#case #story .st06 {
	position: absolute;
	font-size: 85%;
	line-height:1.5em;
	color: #FFF;
}
body#case #story .st02 {
	width: 14%;
	top: 25.42%;
	left: 5.95%;
}
body#case #story .st03 {
	width: 21.34%;
	top: 18.57%;
	left: 25.28%;
}
body#case #story .st04 {
	width: 20.22%;
	top: 4%;
	left: 26.96%;
}
body#case #story .st05 {
	width: 18%;
	top: 33.42%;
	left: 61.23%;
}
body#case #story .st06 {
	width: 14.6%;
	top: 21.7%;
	right: 4.6%;
}

body#case #story p{
	font-size: 84%;
	line-height: 1.5;
}

body#case #storyTx{
	display: none;
}


/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {
	
body#case #story {
	height: 70vw;

}
}

/* -------------------- smart phone  -------------------- */

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

	#case .mainArea .title{
		width: 86px;
		margin: 0 auto;
		display: block;
		
	}	
	
	#case .mainArea h1 {
		margin-bottom: 20px;
	}

#case .mainArea h2 img {

}
	
	#case .mainArea h2{
		text-align: center;
		font-size: 160%;
	}
	
#case .mainArea .st1 span,
#case .mainArea .st2 span{
		display: block;
		padding: 0;
		width: 40%;
		margin: 0 30% 10px;
		text-align: center;
	}
	
body#case #story {
	margin-bottom: 20px;
}
	
body#case #story p{
	display: none;
}

body#case #storyTx{
	display: block;
	background-color: #f3f3f3;
	padding: 1em;
}
	
body#case #storyTx h3{
		margin: 0 0 0.5em;
	font-size: 90%;
	color: #56A1ED;
	}
	
body#case #storyTx dl{
	font-size: 84%;
	
	}
	
body#case #storyTx dt{
	font-weight: bold;
	}
	
body#case #storyTx dd{
	margin-bottom: 0.5em;
	margin-left: 1em;
	}
	
}

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

body#case .before01L  {
	width: 65%;
	float: left;
	overflow: hidden;
}
body#case .before01R  {
	float: right;
	margin-top: 60px;
	width:31.46%;
}

body#case .before01R img{
	max-width: 100%;
}

body#case .before02L  {
	float: left;
	width: 47.75%;

}
body#case .before02R  {
	float: right;
	width: 47.75%;
}

body#case #decision {
	clear: both;
	height: 108px;
	padding-top: 35px;
	background: url(../../case/img/decision_bg.gif) 50% top no-repeat;
}
body#case #decision div {
	padding: 12px 0;
	background: #FFF;
	text-align: center;
	color: #2b84d2;
	font-weight: bold;
}
body#case .cts {
	clear: both;
	border: #2b84d2 2px solid;
	position: relative;
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {
body#case .before01L  {
	width: 100%;
	float: none;
}
body#case .before01R  {
	float:none;
	margin-top: 20px;
	width:60%;
	margin-left: 20%;
}
	
body#case .before02L  {
	width: 100%;
	float: none;
	margin-bottom: 15px;
}
body#case .before02R  {
	width: 100%;
	float: none;
}	
	
	body#case .before02R{
		margin-bottom: 15px;
	}

}

/* -------------------- smart phone  -------------------- */

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


}


/*	タブボタン */

body#case .btn-tab {

	margin: 25px 0 0;
	overflow: hidden;
	zoom: 1;
}
body#case .btn-tab li {
	display: inline;
/*	width: 425px;*/
	width: 44.75%;
	margin: 0 2%;
	float: left !important;
}

body#case .btn-tab li img{

}

body#case .container-tab {
	height: 640px;
	margin-bottom: 50px;
}
body#case .container-tab #tab1 {
	border: #2b84d2 5px solid;
	height: 630px;
	position: relative;
}
body#case .container-tab #tab2 {
	border: #6fba2c 5px solid;
	height: 630px;
	position: relative;
}
body#case .container-tab #tab1 img,
body#case .container-tab #tab2 img {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90.45%;
}


body#case #beforeAfter {
/*	height: 2222px;*/
	margin-top: 65px;
	padding-top: 25px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;

	background: #f3f3f3;
	position: relative;
	font-size:93%;
	line-height:1.6em;
}

body#case #beforeAfter:after {
	content: ""; 
	display: block; 
	clear: both;
}
body#case #beforeAfter #ba01 {
	position: absolute;
	top: -10px;
	right: 20px;
	margin-top: -10px;
	margin-left: 48%;
	background-color: #56A1ED;
	color: #ffffff;
	font-size: 70%;
	padding: 5px 20px;

}

body#case #beforeAfter #ba01:after{
	border-style: solid;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
	left: 50%;
    bottom: -30px;
    border-width: 20px 15px 15px 0px;
    border-color: #56A1ED transparent transparent transparent ;	
}

body#case #beforeAfter p {
	margin-top: 5px;
	margin-bottom: 10px;
}
body#case #beforeAfter #ldk {
/*	position: absolute;
	top: 25px;
	left: 20px;*/

}
body#case #beforeAfter #ldkPht {
	margin-bottom: 10px;
/*	position: absolute;
	top: 125px;
	left: 2.4%;*/
	width: 100%
}
body#case #beforeAfter #bed {
/*	position: absolute;
	top: 911px;
	left: 674px;*/
	width: 22.13%;
	float: right;
	margin-bottom: 10px;
	margin-top: 18%;
}
body#case #beforeAfter #bedPht {
/*	position: absolute;
	top: 686px;
	left: 2.4%;*/
	width: 72.99%;
	margin-bottom: 10px;

}
body#case #beforeAfter #entrance {
/*	position: absolute;
	top: 1403px;
	left: 37px;*/
	width:25.28%;
	float: left;
	clear: both;
margin-top: 18%;
}
body#case #beforeAfter #entrancePht {
/*	position: absolute;
	top: 1146px;
	right: 0px;*/
	width: 66.09%;
	float: right;
	margin-bottom: 10px;
}
body#case #beforeAfter #sanitary {
/*	position: absolute;
	bottom: 173px;
	left: 675px;*/
	width: 22.13%;
	float:right;
	clear: both;
margin-top: 18%;
}
body#case #beforeAfter #sanitaryPht {
/*	position: absolute;
	bottom: 20px;
	left: 2.4%;*/
	width: 73.0%;
	float: left;
	
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {
	
body#case .btn-tab li {
	width: 50%;
	margin: 0 0;
}
	
	body#case .btn-tab li img{
		width: 100%;
	}
	
body#case #beforeAfter #ba01 {
	margin-left: 36%;
	padding: 3px 6px;
	right: 0;
}
body#case .container-tab {
	height:68vw;
}
body#case .container-tab #tab1,
body#case .container-tab #tab2 {
	height:68vw;
}	
	
}

/* -------------------- smart phone  -------------------- */

@media screen and (max-width:767px) {
	
/*body#case #beforeAfter #ldk img,
body#case #beforeAfter #bed img,
body#case #beforeAfter #entrance img,
	body#case #beforeAfter #sanitary img{
		width: 100%;
		
	}*/
	
	body#case #beforeAfter{
		padding-top: 15px;
	}
	
	body#case #beforeAfter #ldk,
body#case #beforeAfter #bed, 
body#case #beforeAfter #entrance,
	body#case #beforeAfter #sanitary  {
		width: 100%;
		    margin-top:25px;
	}
	
body#case #beforeAfter #bedPht,
body#case #beforeAfter #sanitaryPht{
    width: 100%;
}
	
body#case #beforeAfter #entrancePht {
    width: 80%;
    float:none;
	margin: 0 10%;

}
	
}


/*	高速動画
--------------------------------------------------------------------------------------- */

.day {
	clear:both;
	overflow: hidden;
}

.day .video {
	width: 890px;
	height: 668px;
/*	float: left;*/
	z-index:1;
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {
	
.day .video {
	width: 100%;
	height: auto;
}

.day .video video{
	width: 100%;
	height: auto;		
}
	
.day .video #movie_1{
	width: 100%;
	height:50vw;		
}

}

/* -------------------- smartphone -------------------- */

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

	#highspeed .mainArea h2{
		text-align: center;
		margin-bottom: 2em;
	}
#highspeed .mainArea h2 img{
	width: 80%;
}	
}


/*	360度まるわかり事例
--------------------------------------------------------------------------------------- */

#panoDIV {
	height: 600px;
}


#panoDIV,#tour {
	z-index: 0 !important;
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {
	
#panoDIV {
	height: 60.6vw;
}

	#krpanoSWFObject pre{
		display: none !important;
	}
	
	#krpanoSWFObject > div > div {
		background-color:transparent !important;
    box-shadow: none !important;
	}
	
}

/* -------------------- smartphone -------------------- */

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

	#case360 .mainArea h2{
		text-align: center;
		margin-bottom: 2em;
	}
#case360 .mainArea h2 img{
	width: 60%;
}		
}