@charset "UTF-8";

    .roomot-tentative{
        font-size: 0.938em;       
        line-height: 1.65;
    }
	
/* ////////////////////////////////////////////////////
aboutRoomotWrap
//////////////////////////////////////////////////// */

/* aboutRoomot01 */
	.aboutRoomot01 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
        background: #FFF;
        padding: 40px 40px 80px 40px;
	}
	.aboutRoomot01 > * {
		width: 46%;
	}
	.aboutRoomot01 .txtbox p{
		display: block;
	}
	.aboutRoomot01 .txtbox .roomot_logo{
		margin: 1em auto;
        text-align: center;
	}
	.aboutRoomot01 .txtbox .ttl{
		margin: 0.5em auto 1em;
        text-align: center;
	}

@media (max-width: 768px) {
    .aboutRoomot01 {
        padding: 30px;
	}
	.aboutRoomot01 > * {
		width: 100%;
	}
    .aboutRoomot01 .picbox{
        max-width: 450px ;
        margin: 0 auto 2em;
    }
}

/* aboutRoomot02 */
	.aboutRoomot02 {
        position: relative;
	}
	.aboutRoomot02::after {
        content: "image photos";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        line-height: 1.5;
        color: #fff;
        font-weight: 470;
        padding: 5px 10px;
        opacity: .7;
        font-size: 0.55em;
        font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        letter-spacing: 0.05em;
	}
	.aboutRoomot02 .logo {
        position: absolute;
        top: -2.1em;;
        left: 50%;
        transform: translateX(-50%);
        max-width:   335px;
	}
@media screen and (max-width: 768px) { /*{SP}*/
    .aboutRoomot02 .logo {
        top: -1.6em;
        width: 260px;
	}
}
@media screen and (max-width: 480px) { 
	.aboutRoomot02 .logo {
        position: absolute;
        left: 5%;
        transform: none;
	}
}




/* ////////////////////////////////////////////////////
roomotListCont
//////////////////////////////////////////////////// */

.roomotListCont{
  /*margin: 0 calc(50% - 50vw) 5em;
  width: 100vw;*/
    margin: 80px auto;
}

/* roomotListWrap
------------------------------------------------------------------------ */

/* タブボタン
-------------------------------------------------------------- */
     .roomotListWrap .contentsTab__item {
         padding: 0;
      }
    .roomotListWrap .contentsTab__item::after {
      content: none;
    }  
	.roomotListWrap .contentsTab {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        margin: 35px auto 0;
        border-bottom: none;
        width: 90%;
	}
	.roomotListWrap .contentsTab > * {
		display: flex;
		width: 24%;
        border: 0 solid #ccc;
        border-width: 1px 1px 0 1px;
	}
	.roomotListWrap .contentsTab .name{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
        height: 100%;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.3;
		color: #333;
		font-size: clamp(1.8em, (30 / 1000 * 100vw), 2.14286em);
        font-family: "Libre Caslon Display", serif;
		text-align: center;
		padding: 15px 10px;
		transition: background .38s ease-out, border .38s ease-out;
        z-index:1;
	}
	.roomotListWrap .contentsTab .name::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		background: #fff;
        z-index: -1;
        width: auto;
        height: auto;
	}
	.roomotListWrap .contentsTab .name .label .ja {
		display: inline-block;
		font-size: .7em;
		margin: 0 .3em;
	}
	.roomotListWrap .contentsTab .name .btn,
	.roomotListWrap .contentsTab .name .btn::after {
		transition: border .22s ease-out, transform .22s ease-out;
	}

	/* is-active ----------------------- */
	.roomotListWrap .contentsTab .is-active .name {
		color: #fff;
	}
	.roomotListWrap .contentsTab .is-active .name::before {
		background: rgb(37, 43, 52);
	}

	/* hover ----------------------- */
	@media (hover: hover) and (pointer: fine) {
		.roomotListWrap .contentsTab:not(.is-active):hover::before {
			background: rgba(102, 102, 102, .25);
			transform: translate(13px, 13px);
		}

	}
	.roomotListWrap .contentsTab:not(.is-active):focus-visible::before {
		background: rgba(102, 102, 102, .25);
		transform: translate(13px, 13px);
	}

@media screen and (min-width: 769px) {

}
@media screen and (max-width: 768px) { /*{SP}*/
	.roomotListWrap .contentsTab {
        width: 100%;
	}
	.roomotListWrap .contentsTab .name {
		font-size: clamp(1.4em, (20 / 480 * 100vw), 1.6em);
        padding: 15px 6px;
        letter-spacing: -0.05em;
	}
      .contentsTab__item .name::before {
        margin-top:0;
      }
}
@media screen and (max-width: 630px) { /*{MinorBreakpoint}*/

	.roomotListWrap .contentsTab .name .label .ja {
		display: block;
	}

}


/* タブコンテンツ
-------------------------------------------------------------- */
    .roomotArea__item {
          display: none;
    }
    .roomotArea__item.is-active {
        -webkit-animation: openAnim .5s linear;
        animation: openAnim .5s linear;
        display: block;
        padding: 60px;
        background: #fff;
        border: 1px solid #ccc;   
    }
	.roomotArea__item .roomotTtl{
        margin: 0 auto 2em;
        text-align: center;
	}
	.roomotArea__item .roomotTtl .logo{
        max-width: 250px;
        margin: 0 auto;
	}
    .roomotArea__item .roomotCol {
        display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
    .roomotArea__item .roomotCol > *{
        width: 48%;
    }
	.roomotItem dl {
		margin-top: 1.2em;
	}
	.roomotItem dt {
		font-size: 1.6em;
		margin-bottom: 0.8em;
		padding-left: 0.5em;
		border-left: 5px solid #940906;
	}
	.roomotItem dt i {
		display: inline-block;
		width: 1.6em;
		color: #FFF;
		line-height: 1.6em;
		text-align: center;
		font-style: normal;
		background: #940906;
		margin-right: 0.5em;
	}
	.roomotItem dt span {
		display: inline-block;
		letter-spacing: 0;
		font-size: 0.8em;
		margin-left: 0.5em;
	}

	.roomotItem dl dd.btn {
        margin-top: 1.5em;
    }
	.roomotItem dl dd.btn a{
        display: block;
        z-index: 1;
        width: 100%;
        max-width: 280px;
        line-height: 1.3;
        color: #fff;
        font-size: 14px;
        text-align: center;
        text-decoration: none;
        background-color: #1a1a1a;
        padding: 15px ;
        border-radius: 50px;
        margin: 0 auto;
        font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        letter-spacing: .1em;
        white-space: nowrap;
    }
@media (hover: hover) and (pointer: fine) {
  .roomotItem dl dd.btn a:hover {
    background:#535353;
  }
}

@media (max-width: 768px) {
    .roomotArea__item.is-active {
         padding: 30px;
    }
	.roomotArea__item .roomotTtl .logo{
        max-width: 180px;
	}
    .roomotArea__item .roomotCol > *{
        width: 100%;
        margin: 0 auto;
        max-width: 450px;
    }
    .roomotArea__item .roomotCol .roomotItem{
        display: block;
        margin-top: 2em;
    }
    .roomotArea__item .roomotCol .pic{
        max-width: 360px;
        margin: 0 auto;
    }
	.roomotItem dt {
		font-size: 1.5em;
        line-height: 1.4;
	}
    .roomotItem dt span {
      margin-left: 0em;
    }
	.roomotItem dl dd.btn a{
        max-width: 220px;
        padding: 12px ;
    }
}