@charset "utf-8";

/* common
------------------------------------------------------*/
div#contents {
	max-width: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../../room/img/room.gif),linear-gradient(90deg, #0073ff, #00d097);
	background-attachment:fixed;
	background-size:cover;
}
div.room div#contents div#room{
	max-width:1024px;
	margin:0 auto;
	padding:30px 60px 60px;
	border-radius:30px;
	background-color:rgba(255,255,255,0.85);
}
div.room div#contents div#room div.inner{
	max-width:1024px;
	position:relative;
}

/* ttl
------------------------------------------------------*/
div.room h1#cttl{
	color:#464646;
	background:none;
}
div.room h1#cttl span{
	background-image:url(../img/ttl/room.gif),none;
	background-position: center top 80px,center center;
	background-size:auto 93px,auto;
}
div.room div#room h2.ttl {
	position:relative;
	margin-bottom:15px;
	padding-top:60px;
	text-align:left;
	background:none;
}

/* room_tab
------------------------------------------------------*/
div.room ul#room_tab {
	width:100%;
	max-width:820px;
	margin:0 auto;
	padding-top:15px;
}
div.room ul#room_tab li {
	width:calc(33.33% - 10px);
	position:relative;
	margin:15px 15px 0 0;
	padding-top:60px;
	border-radius:30px 30px 0 0;
	background-color:#f8c605;
	background-repeat:no-repeat;
	background-position:center top 15px;
	background-size:auto;
	transition:all 0.3s linear;
	cursor:pointer;
}
div.room ul#room_tab li:nth-child(3) {
	margin-right:0;
}
div.room ul#room_tab li:nth-child(1)        {background-image:url(../../room/img/tab_profile_w.webp);}
div.room ul#room_tab li:nth-child(2)        {background-image:url(../../room/img/tab_kids_w.webp);}
div.room ul#room_tab li:nth-child(3)        {background-image:url(../../room/img/tab_diary_w.webp);}
div.room ul#room_tab li.active:nth-child(1) {background-image:url(../../room/img/tab_profile.webp);}
div.room ul#room_tab li.active:nth-child(2) {background-image:url(../../room/img/tab_kids.webp);}
div.room ul#room_tab li.active:nth-child(3) {background-image:url(../../room/img/tab_diary.webp);}
div.room ul#room_tab li.active:nth-child(1):hover{background-image:url(../../room/img/tab_profile_w.webp);}
div.room ul#room_tab li.active:nth-child(2):hover{background-image:url(../../room/img/tab_kids_wwebp);}
div.room ul#room_tab li.active:nth-child(3):hover{background-image:url(../../room/img/tab_diary_w.webp);}

div.room ul#room_tab li.active {
	margin-top:0;
	margin-bottom:0;
	padding-top:75px;
	background-color:#fff;
}
div.room ul#room_tab li.active:before{
	width:110px;
	content:"";
	padding-top:131px;
	position:absolute;
	top:-70px;
	left:-30px;
	display:block;
	background:url(../../room/img/chara_tab.webp) no-repeat center center;
	opacity:0;
	transition:all 0.3s linear;
}
div.room ul#room_tab li.active:hover:before{
	top:-110px;
	left:-70px;
	opacity:1;
}
div.room ul#room_tab li:hover {
	margin-top:0;
	margin-bottom:0;
	padding-top:75px;
	background-color:orange;
}



/* indroduction
------------------------------------------------------*/
div.room div#room div#introduction{
	width:calc(100% - 300px - 60px);
	float:left;
	margin-bottom:60px;
}
div.room div#room div#introduction p strong{
	color:#824600;
	font-weight:bold;
	background-color:#f8c605;
}

div.room div#room div#introduction h2 + p + h2:before,
div.room div#room div#introduction h2 + p + h2 + p + h2:before,
div.room div#room div#introduction h2 + p +h2 + p + h2 + p + h2:before{
	width:125px;
	content:"";
	position:absolute;
	top:0;
	left:-130px;
	display:block;
	padding-top:150px;
	background:url(../../room/img/chara1.webp) no-repeat center center;
}
div.room div#room div#introduction h2 + p + h2 + p + h2:before{
	width:114px;
	left:-120px;
	padding-top:137px;
	background:url(../../room/img/chara2.webp) no-repeat center center;
}
div.room div#room div#introduction h2 + p +h2 + p + h2 + p + h2:before{
	width:122px;
	padding-top:150px;
	background:url(../../room/img/chara3.webp) no-repeat center center;
}
div.room div#room div#introduction h2 + p +h2 + p + h2 + p + h2 + p + h2:before{
	display:none;
}

/* profile
------------------------------------------------------*/
div.room div#room ul#profile{
	width:300px;
	position:relative;
	float:right;
	padding-top:calc(446px + 30px);
}
div.room div#room ul#profile.fixed{
	position:fixed;
	top:30px;
	right:calc(50vw - 512px);
}
div.room div#room ul#profile.bottom{
	position:absolute;
	top:auto;
	bottom:60px;
	right:0;
}
div.room div#room ul#profile:before {
	width:437px;
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	padding-top:446px;
	background:url(../../room/img/chara_main.webp) no-repeat center center / 100% auto;
}
div.room div#room ul#profile li{
	min-height:22px;
	padding-left:30px;
	color:#b37b30;
	font-weight:bold;
	background:url(../img/arr_y.png) no-repeat left center;
}
@media screen and (max-width:1384px){
	div.room div#room ul#profile.fixed {
		right: calc(50vw - 50% + 180px);
	}
}

/* comment
------------------------------------------------------*/
div.room div#comment{
	max-width:calc(820px - 183px);
	clear:both;
	margin:0 auto;
	padding:20px 30px 20px calc(108px + 45px);
	border: 5px solid;
	border-radius:10px;
	border-image: linear-gradient(to right, #ed3d89, #ff5903) 1;
	background:#fff url(../../room/img/sunmark.webp) no-repeat left 30px center;
	mask: linear-gradient(black, black);
}


/* Responsive Design
------------------------------------------------------*/

/* 1280px以下 */
@media screen and (max-width:1280px){
	div.room div#room ul#profile.fixed {
		right: calc(50vw - 50% + 150px);
	}
}

/* 1060px以下 */
@media screen and (max-width:1060px){
	div.room div#contents div#room{
		padding:30px 45px 60px;
	}
	div.room div#room div#introduction{
		width:calc(100% - 250px - 45px);
	}
	div.room div#room ul#profile{
		width:250px;
		padding-top:calc(372px + 30px);
	}
	div.room div#room ul#profile:before {
		width:364px;
		padding-top:372px;
	}
	div.room div#room ul#profile.fixed {
		right: calc(50vw - 50% + 135px);
	}
}

/* 860px以下 */
@media screen and (max-width:860px){
	div.room ul#room_tab li {
		width:calc(33.33% - 10px);
		padding-top:50px;
		background-position:center top 10px;
		background-size:auto 30px;
	}
	div.room ul#room_tab li.active {
		padding-top:65px;
	}
	div.room div#room div#introduction{
		width:calc(100% - 200px - 30px);
	}
	div.room div#room div#introduction h2 + p + h2:before,
	div.room div#room div#introduction h2 + p + h2 + p + h2:before,
	div.room div#room div#introduction h2 + p +h2 + p + h2 + p + h2:before{
		width:100px;
		left:-105px;
		padding-top:120px;
		background-size:100px auto;
	}
	div.room div#room div#introduction h2 + p + h2 + p + h2:before{
		width:91px;
		left:-96px;
		padding-top:110px;
		background-size:91px auto;
	}
	div.room div#room ul#profile{
		width:200px;
		padding-top:calc(297px + 30px);
	}
	div.room div#room ul#profile:before {
		width:291px;
		padding-top:297px;
	}
	div.room div#room ul#profile.fixed {
		right: calc(50vw - 50% + 110px);
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div.room div#contents div#room{
		max-width:100%;
		padding:30px 5vw 60px;
	}
	div.room ul#room_tab {
		max-width:100%;
	}
	div.room ul#room_tab li {
		width:calc(33.33% - 7px);
		margin:10px 10px 0 0;
		padding-top:45px;
		background-position:center top 8px;
		background-size:auto 28px;
	}
	div.room ul#room_tab li:nth-child(3) {
		margin-right:0;
	}
	div.room ul#room_tab li.active {
		margin-top:0;
		padding-top:60px;
	}
	div.room ul#room_tab li.active:before{
		width:90px;
		padding-top:107px;
		top:-60px;
		left:-25px;
	}
	div.room ul#room_tab li.active:hover:before{
		top:-90px;
		left:-50px;
	}
	div.room div#room div#introduction{
		width:100%;
		float:none;
		margin-bottom:30px;
	}
	div.room div#room div#introduction h2 + p + h2:before,
	div.room div#room div#introduction h2 + p + h2 + p + h2:before,
	div.room div#room div#introduction h2 + p +h2 + p + h2 + p + h2:before{
		display:none;
	}
	div.room div#room ul#profile{
		width:100%;
		position:relative!important;
		top:auto!important;
		right:auto!important;
		bottom:auto!important;
		float:none;
		margin:0 auto;
		padding-top:calc(297px + 30px);
		text-align:center;
	}
	div.room div#room ul#profile:before {
		width:291px;
		left:calc(50% - 145.5px);
		padding-top:297px;
	}
	div.room div#room ul#profile li{
		display:inline-block;
		margin:0 10px 10px;
		text-align:left;
	}
	div.room div#comment{
		max-width:calc(100% - 60px);
		padding:20px 30px;
		background-position:center top 20px;
		background-size:80px auto;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div.room h1#cttl span{
		background-size:auto 70px,auto;
	}
	div.room ul#room_tab li {
		width:100%;
		margin:0 0 10px 0;
		padding-top:40px;
		background-position:left 15px center;
		background-size:auto 25px;
		text-align:left;
		padding-left:50px;
	}
	div.room ul#room_tab li:nth-child(3) {
		margin-bottom:10px;
	}
	div.room ul#room_tab li.active {
		margin-top:0;
		margin-bottom:0;
		padding-top:55px;
		padding-left:50px;
	}
	div.room ul#room_tab li.active:before{
		width:70px;
		padding-top:83px;
		top:-40px;
		left:-10px;
	}
	div.room ul#room_tab li.active:hover:before{
		top:-60px;
		left:-30px;
	}
	div.room div#room h2.ttl {
		padding-top:45px;
		font-size:20px;
	}
	div.room div#room ul#profile{
		padding-top:calc(223px + 20px);
	}
	div.room div#room ul#profile:before {
		width:218px;
		left:calc(50% - 109px);
		padding-top:223px;
	}
	div.room div#comment{
		max-width:calc(100% - 40px);
		padding:60px 20px 20px;
		background-position:center top 15px;
		background-size:60px auto;
		font-size:14px;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div.room div#contents div#room{
		padding:20px 5vw 45px;
	}
	div.room ul#room_tab li {
		padding-top:35px;
		padding-left:45px;
		font-size:14px;
	}
	div.room ul#room_tab li.active {
		padding-top:50px;
		padding-left:45px;
	}
	div.room div#room h2.ttl {
		padding-top:40px;
		font-size:18px;
	}
	div.room div#comment{
		padding:50px 15px 15px;
		background-position:center top 10px;
		background-size:50px auto;
		font-size:13px;
	}
}