@charset "UTF-8";

/* ************************************************************
Title: style.css
Since: 2008-05-13
Last Modified: 2008-00-00
************************************************************ */


/*===============================
タブレット（768px以下）
タブレット（640px以下）
スマホ（480px以下）
===============================*/

/* ページタイトル
====================================================*/
#pageTitle img {
	width: 44%;
	max-width: 533px;
}

/* キャッチ
====================================================*/
#chach {
	margin: 2% 0 5%;
	text-align: center;
}
#chach img{
	display: block;
	margin: 0 auto;	
}
#chachText {
	display: inline-block;
	width: 100%;
	margin-top: 6.5%;
	vertical-align: top;
}
#chach h2 {	/*コンセプトルームの居心地は？　働き女子座談会*/
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0 2% 0;
	background: url(../img/dot.png) repeat-x bottom;
	background-size: 3px 1px;
	-webkit-background-size: 3px 1px;
	-moz-background-size: 3px 1px;
	-o-background-size: 3px 1px;
	-ms-background-size: 3px 1px;
}
#chach h2 .imgWrapper {
	width: 60%;
	max-width: 542px;
	margin: 0 auto;
}
#chach h2 img {	
	/*width: 60%;
	max-width: 542px;*/
}
#chach .pImgWrapper {
	width: 80%;
	max-width: 872px;
	margin: 0 auto;
}
#chach img.chach_p {
	 /*width: 80%;
	 max-width: 872px;*/
	 padding: 2% 0 0 0;
}
#chach .imgWrapper {
	width: 80%;
	max-width: 1004px;
	margin: 0 auto;
	text-align: center;
}
#chach img.chach_img {
	/*display: inline-block;
	width: 80%;
	max-width: 1004px;
	height: auto;*/
	margin: 0 auto 4%;
}
#chach #chachNext {
	background: #FCE5EA;
	padding: 2.8% 0 1.0%;
}
#chach #chachNext img {
	width: 70%;
	max-width: 801px;
	height: auto;
}
#chach #chachNextImg {
	width: 6%;
	max-width: 105px;
	height: auto;
	margin: 0 auto 0;
}
#chach #chachNextImg img{
	width: 100%;
}

/* disp
====================================================*/
/*タブ*/
#tab {
	display: block;
	width: 100%;
	height: 94px;
	margin-top: 60px;
	background: #EEEDEB; /*色はaiからピックアップ*/
	/*IE8*/
	/*min-width: 900px\9;*/
}
#tab ul {
	width: 100%;
	max-width: 1000px;
	height: 94px;
	margin: 0 auto;
}
#tab ul li {
	display: inline-block;
	width: 16%;
	height: 100%;
}
#tab ul li p{
	display: block;
	width: 95%;
	height: 82px;
	margin: 12px auto 0;
	cursor: pointer;
}
#tab ul li p {
    -webkit-border-top-left-radius: 5px;  
    -webkit-border-top-right-radius: 5px;  
    -webkit-border-bottom-right-radius: 0px;  
    -webkit-border-bottom-left-radius: 0px;  
    -moz-border-radius-topleft: 5px;  
    -moz-border-radius-topright: 5px;  
    -moz-border-radius-bottomright: 0px;  
    -moz-border-radius-bottomleft: 0px; 
	/*border-radius: 5px 5px 0px 0px;       /* CSS3草案 */  
	/*-webkit-border-radius: 5px 5px 0 0;    /* Safari,Google Chrome用 */  
	/*-moz-border-radius: 5px 5px 0 0;   /* Firefox用 */  
}
#tab ul li p:hover,
#tab ul li.select p {
	background-color: #fff;
}
#tab1{
	background: url(../img/vol3_tab_01_off.png) no-repeat;
	/*background-size: 121px 61px;
	-webkit-background-size: 121px 61px;
	-moz-background-size: 121px 61px;
	-o-background-size: 121px 61px;
	-ms-background-size: 121px 61px;*/	
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
li #tab1:hover,
li.select #tab1{
	background: url(../img/vol3_tab_01_on.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
#tab2{
	background: url(../img/vol3_tab_02_off.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
li #tab2:hover,
li.select #tab2{
	background: url(../img/vol3_tab_02_on.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
#tab3{
	background: url(../img/vol3_tab_03_off.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
li #tab3:hover,
li.select #tab3{
	background: url(../img/vol3_tab_03_on.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
#tab4{
	background: url(../img/vol3_tab_04_off.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
li #tab4:hover,
li.select #tab4{
	background: url(../img/vol3_tab_04_on.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
#tab5{
	background: url(../img/vol3_tab_05_off.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
li #tab5:hover,
li.select #tab5{
	background: url(../img/vol3_tab_05_on.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
#tab6{
	background: url(../img/vol3_tab_06_off.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}
li #tab6:hover,
li.select #tab6{
	background: url(../img/vol3_tab_06_on.png) no-repeat;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	-o-background-size: 80% auto;
	-ms-background-size: 80% auto;
	background-position: 50% 50%;
}

/* タブ内
====================================================*/
/*タブ内共通*/
.disp {
	margin-top: 6%;
	/*height: 100%;*/
}
.disp.disnon {	/*タブデフォルト設定*/
	display: none;
}
.disp .accordion {
	display: block;
}
.disp .title {
	text-align: center;
	margin-bottom: 4%;
	line-height: 0;
}
.disp .mainImage {
	text-align: center;
	margin-bottom: 4%;
	line-height: 0;
}

/*対談*/
.popup {
	position: relative;
    display: table;
    margin: 0 auto 5px;
    width: 90%;
    max-width: 800px;
}
/*.popup:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}*/
.popup .pic, .popup .desc {
    display: table-cell;
    vertical-align: middle;
}
.popup .pic {
	width: 18%;
	max-width: 115px;
}

.popup .pic img {
	/*width: 100%;
	max-width: 115px;*/
	height: auto;
}
.popup .desc {
	width: 82%;
}
.popup .desc span {
	position: relative;
    display: block;
    padding: 15px 20px;
    border: 1px solid #938780;
    border-radius: 6px;        /* CSS3草案 */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 6px;   /* Firefox用 */ 
    font-size: 14px;
    line-height: 140%;
}
.popup.left .desc span {
    margin-left: 16px;
}
.popup.right .pic {
	/*position: absolute;
	right: 0;*/
    text-align: right;
}
.popup.right .desc {
	/*position: absolute;
	left: 0;*/
}
.popup.right .desc span {
    margin-right: 16px;
    margin-left: 0;
}
@media screen and (min-width:640px){
.popup.left .desc span:after {
	content: '';
	position: absolute;
	margin-top: -8px;
	border-right: 16px solid #938780;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	left: -16px;
	top: 50%;
}
.popup.right .desc span:after {
	content: '';
	position: absolute;
	margin-top: -8px;
	border-left: 16px solid #938780;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	right: -16px;
	top: 50%;
}
}
/*IE8ハック*/
.popup.left .desc span:after {
	content: ' ';
	position: absolute\9;
	margin-top: -8px\9;
	border-right: 16px solid #938780\9;
	border-top: 7px solid transparent\9;
	border-bottom: 7px solid transparent\9;
	left: -16px\9;
	top: 50%\9;
}
.popup.right .desc span:after {
	content: ' ';
	position: absolute\9;
	margin-top: -8px\9;
	border-left: 16px solid #938780\9;
	border-top: 7px solid transparent\9;
	border-bottom: 7px solid transparent\9;
	right: -16px\9;
	top: 50%\9;
}
.checkPoint {
	margin: 20px auto;
	text-align: center;
	width: 90%;
	max-width: 789px;
}
.checkPoint.spOnly {
	display: none;
}
.checkPoint img{
	/*width: 90%;
	max-width: 789px;*/
	height: auto;
}

.comment {
	margin: 30px auto 20px;
	padding-top: 5px;
	text-align: center;
	background-color: #ebe8e6;
	line-height: 0;
}
.comment img{
	/*width: 90%;
	max-width: 805px;
	height: auto;*/
	margin: 0;
}

/*タブトップへ戻る*/
div.toTab {
	display: block;
	width: 83.3%;
	max-width: 1000px;
	margin: 2.2% auto 0;
	text-align: right;
}
div.toTab img {
	/*width: 20.4%;
	max-width: 204px;*/
	max-width: 100%;
	height: auto;
}


/* 座談会の様子
====================================================*/
#photo {
	background: #ebd4d9;
	margin: 50px 0 0 0;
	padding: 30px 0;
}
#photo .inner {
	width: 90%;
	max-width: 790px;
	margin: 0 auto;
}
#photo .inner h2 {
	margin-bottom: 10px;
}
#photo .inner h2 img {
	width: 134px;
	height: auto;
}

/* 次回
====================================================*/
#next .vol3_nextWrapper {
	display: inline-block;
	width: 60%;	
}
#next img.vol3_next {
	/*width: 60%;
	max-width: 429px;
	height: auto;*/
	margin: 0;
}
#next .nextContents img {
	width: 88.3%;
	max-width: 422px;
	height: auto;
}

#next .nextTitle {
	padding-top: 4%;
}
/*===============================
タブレット（768px～）
タブレット（640px～）
スマートフォン（480px～）
===============================*/
/*@media screen and (min-width:480px){*/
/*@media screen and (min-width:768px){*/
@media screen and (max-width:640px){

/* ページタイトル
====================================================*/
#pageTitle img {
}
/* キャッチ
====================================================*/
#chach {
	margin: 50px 0 20px;
	text-align: center;
}
#chach img{
	display: block;
	margin: 0 auto;	
}
#chachText {
	display: block;
	margin : 0 auto;
	vertical-align: top;
}
#chach h2 {	/*コンセプトルームの居心地は？　働き女子座談会*/
	width: 80%;
	margin: 0 auto;
	padding: 0 0 20px 0;
	background: url(../img/dot.png) repeat-x bottom;
	background-size: 3px 1px;
	-webkit-background-size: 3px 1px;
	-moz-background-size: 3px 1px;
	-o-background-size: 3px 1px;
	-ms-background-size: 3px 1px;
}
#chach h2 .imgWrapper {
	width: 100%;
	max-width: 100%;
}
#chach h2 img {	
	width: 349px;
}
#chach .pImgWrapper {
	width: 100%;
	max-width: 100%;
}
#chach img.chach_p {
	 width: 486px;
}
#chach .imgWrapper {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 4%;
}
#chach img.chach_img {
	display: block;
	width: 520px;
	margin: 30px auto 20px;
}
#chach #chachNext {
	background: #FCE5EA;
	padding: 30px 0 10px;
}
#chach #chachNext img {
	width: 490px;
	height: auto;
}
#chach #chachNextImg {
	/*width: 53px;
	margin-top: -26px;*/
	width: 53px;
	height: 53px;
	margin: 0 auto 0;
}
#chach #chachNextImg img{
	width: 53px;
}

/* disp
====================================================*/
/*タブ*/
#tab {
	display: none;
}

/* タブ内
====================================================*/
/*タブ内共通*/
.disp {
	margin-top: 2px;
}
.disp.disnon {	/*タブデフォルト設定*/
	display: block;
}
.disp .accordion {
	display: none;
}
.disp .title {
	/*margin-left: 5%;*/
	text-align: left;
	padding: 20px 0;
	margin-bottom: 2px;
	background: url(../img/vol3_tab_title_down.png) no-repeat right center #eeecea;
	background-size: 40px 13px;
	-webkit-background-size: 40px 13px;
	-moz-background-size: 40px 13px;
	-o-background-size: 40px 13px;
	-ms-background-size: 40px 13px;
	cursor: pointer;
}
.disp .title.open {
	background: url(../img/vol3_tab_title_up.png) no-repeat right center #eeecea;
	background-size: 40px 13px;
	-webkit-background-size: 40px 13px;
	-moz-background-size: 40px 13px;
	-o-background-size: 40px 13px;
	-ms-background-size: 40px 13px;
}
.disp .title img {
	margin-left: 20px;
}
#disp1 .title img {
	width: 113px;
	height: auto;
}
#disp2 .title img {
	width: 418px;
	height: auto;
}
#disp3 .title img {
	width: 414px;
	height: auto;
}
#disp4 .title img {
	width: 163px;
	height: auto;
}
#disp5 .title img {
	width: 163px;
	height: auto;
}
#disp6 .title img {
	width: 163px;
	height: auto;
}
.disp .mainImage {
	margin-bottom: 26px;
}
.disp .mainImage img{
	max-width: 420px;
	height: auto;
}


/*対談*/
.popup {
    width: 90%;
    max-width: 320px;
    overflow: hidden;
}
/*.popup:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}*/
.popup .pic, .popup .desc {
    display: table-cell;
    vertical-align: top;
}
.popup .pic {
	width: 24%;
}

.popup .pic img {
	width: 100%;
	max-width: 115px;
	height: auto;
}
.popup .desc {
	width: 76%;
}
.popup .desc span {
	font-size: 14px;
}
.popup.left .desc span {
}
.popup.right .pic {
	/*position: absolute;
	right: 0;*/
    text-align: left;
    float: left;
}
.popup.right .desc {
	/*position: absolute;
	left: 0;*/
	float: right;
}
.popup.right .desc span {
    margin-right: 0;
    margin-left: 16px;
}
.popup.left .desc span:after {
	content: '';
	position: absolute;
	/*margin-top: -8px;*/
	border-right: 16px solid #938780;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	left: -16px;
	top: 30px;
}
.popup.right .desc span:after {
	content: '';
	position: absolute;
	/*margin-top: -8px;*/
	border-right: 16px solid #938780;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	left: -16px;
	top: 30px;
}

.checkPoint {
	width: 100%;
	max-width: auto;
}
.checkPoint.spOnly {
	display: block;
}
.checkPoint img{
	max-width: 420px;
	height: auto;
}

.comment {
	margin-bottom: 0;
	padding-top: 10px;
}
.comment img{
	width: 100%;
	max-width: 380px;
	height: auto;
	margin: 0;
}


/*タブトップへ戻る*/
div.toTab {
	display: none;
}

/* 座談会の様子
====================================================*/
#photo {
}
#photo .inner {
	max-width: 480px;
}
#photo .inner h2 {
	margin: 0 auto 10px;
	text-align: center;
}
#photo .inner h2 img {
	width: 154px;
	height: auto;
}

/* 次回
====================================================*/
#next img.vol3_next {
	width: 322px;
	margin: 0 auto;
}

#next .nextContents img.vol2_next1 {
	width: 227px;
}
#next .nextContents img.vol2_next1_p {
	width: 249px;
}
#next .nextContents img.vol2_next2 {
	width: 217px;
}
#next .nextContents img.vol2_next2_p {
	width: 249px;
}

}