@charset "utf-8";



/**************************************************
 common
**************************************************/
.btnHanger{
	margin-top: 80px;
	text-align: center;
}
.btnHanger a{
	position: relative;
	width: 500px;
	height: 82px;
	margin: 0 auto;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	color: #000000;
	border-radius: 20px;
	display:-webkit-box;
  	display:flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}
.btnHanger a::before{
	width: 39px;
	height: 39px;
	top: calc(50% - 20px);
	right: 20px;
	background: url("../../img/showroom/pointer1.svg") no-repeat 0 0;
}
.btnHanger a:hover{opacity: 0.5;}
.btnHanger a:hover::before{right: 10px;}



/**************************************************
 visualHanger
**************************************************/
.visualHanger{
	position: relative;
	overflow: hidden;
}

.visualPhoto{
	position: relative;
	width: calc(100% - 20px);
	height: 55vw;
	min-height: 750px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	overflow: hidden;
}
.visualPhoto img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.visualCopy{
	position: absolute;
	width: 796px;
	height: 796px;
	right: -165px;
	bottom: -440px;
	padding-right: 11%;
	background: var(--color1);
	border-radius: 100%;
	-webkit-box-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	align-items: center;
}
.visualCopy img{
	position: relative;
	display: block;
	width: 226px;
	margin-top: -65px;
}
.visualCopy p{
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	margin: 0;
	padding-top: 35px;
}
.visualCopy p small{
	display: block;
	font-size: 2.0rem;
	margin-bottom: 20px;
}



/**************************************************
 topInner_wh
**************************************************/
.topInner_wh{
	position: relative;
	width: 1300px;
	margin: 100px auto 40px auto;
	padding: 130px 150px 150px 150px;
	border-radius: 100px;
	background: #FFFFFF;
}
.topInner_wh::before{
	width: 136px;
	height: 274px;
	left: 15px;
	bottom: -50px;
	background: url("../../img/showroom/top/chara_g.png") no-repeat 0 0;
	background-size: 100% auto;
	z-index: 100;
}
.topInner_wh::after{
	width: 152px;
	height: 267px;
	right: 15px;
	bottom: -50px;
	background: url("../../img/showroom/top/chara_w.png") no-repeat 0 0;
	background-size: 100% auto;
	z-index: 100;
}

.intro h2{
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-align: center;
}
.intro h2 span{
	position: relative;
	display: inline-block;
	padding: 0 100px;
	z-index: 1;
}
.intro h2 span::before,
.intro h2 span::after{
	width: 61px;
	height: 95px;
	bottom: -20px;
	background: url("../../img/showroom/top/intro_obj1.svg") no-repeat 0 0;
	z-index: -1;
}
.intro h2 span::before{left: 0;}
.intro h2 span::after{
	right: 0;
	transform: scale(-1, 1);
}
.intro h2 span strong{
	position: relative;
	display: inline-block;
	padding: 0 10px;
	z-index: 1;
}
.intro h2 span strong:first-of-type{margin-bottom: 30px;}
.intro h2 span strong::after{
	width: 100%;
	height: 20px;
	left: 0;
	bottom: -5px;
	background: #FAEB82;
	z-index: -1;
}

.intro p{
	font-size: 2.0rem;
	line-height: 2.0;
	padding-top: 80px;
}

.movieHanger{
	position: relative;
	margin-top: 100px;
	padding: 55px 75px;
	border-radius: 20px;
	background: url("../../img/showroom/top/bg1.jpg") no-repeat top right;
}
.movieHanger::before,
.movieHanger::after{
	width: 24px;
	height: 78px;
	top: -30px;
	background: url("../../img/showroom/top/intro_obj2.svg") no-repeat 0 0;
}
.movieHanger::before{left: 20px;}
.movieHanger::after{right: 20px;}
.movieHanger div{
	position: relative;
	display: block;
  	width: 100%;
  	padding-top: 56.25%;
}
.movieHanger div iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.s_news{margin-top: 145px;}

.newsHeader{
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
}
.newsHeader h2{
	position: relative;
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 3px;
	padding-left: 40px;
}
.newsHeader h2::before{
	width: 30px;
	height: 30px;
	top: calc(50% - 15px);
	left: 0;
	background: #FFEE74;
	border-radius: 100%;
}
.newsHeader h2::after{
	width: 105px;
	height: 1px;
	top: calc(50% - 0px);
	right: -120px;
	background: #000000;
}
.newsHeader nav button{
	width: 210px;
	height: 60px;
	margin-left: 15px;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #000000;
	border: 2px solid #BEBEBE;
	border-radius: 10px;
	cursor: pointer;
	display:-webkit-box;
  	display:flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}
.newsHeader nav button.active{
	border: none;
	background: #FFEE74;
	pointer-events: none;
}

.newsList{
	margin-top: 70px;
	display: none;
}
.newsList[data-cat="all"]{
display:block;
}
.newsList ul li{
	width: calc((100% - 60px) / 3);
	margin-right: 30px;
}
.newsList ul li:last-of-type{margin-right: 0;}
/* .newsIndex ul{
	margin: 0;
	list-style: none;
}
.newsIndex ul li a{
	display: block;
	height: 100%;
	padding: 25px;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.6;
	color: #000000;
	background: #F6F5F2;
	border-radius: 20px;
}
.newsIndex ul li a div{
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	overflow: hidden;
}
.newsIndex ul li a div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.newsIndex ul li a small{
	position: relative;
	display: block;
	margin-top: 20px;
	font-size: 1.6rem;
	font-weight: 400;
	padding-left: 18px;
}
.newsIndex ul li a small::before{
	width: 14px;
	height: 14px;
	top: 6px;
	left: 0;
	border-radius: 100%;
	background: #5683FF;
}
.newsIndex ul li a small.event::before{background: #E04414;}
.newsIndex ul li a strong{
	display: block;
	margin: 20px 0 5px 0;
	font-size: 1.6rem;
}
.newsIndex ul li a span{
	display: block;
	text-decoration: underline;
}
.newsIndex ul li a:hover{box-shadow: 0 0 15px rgba(0,0,0,0.16);}
.newsIndex ul li a:hover span{text-decoration: none;} */

.s_news .btnHanger a{background: #FFEE74;}



/**************************************************
 topInner_obj
**************************************************/
.topInner_obj{
	position: relative;
	padding: 270px 0 370px 0;
	background: url("../../img/showroom/top/bg2.jpg") repeat center center;
}
.topInner_obj::before{
	width: 100%;
	height: 145px;
	top: 0;
	left: 0;
	background: url("../../img/showroom/top/wave.svg") repeat-x center top;
}

.twoColumn{
	width: 1250px;
	margin: 150px auto 0 auto;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	
}
.twoColumn.facility{margin-top: 0;}
.twoColumn .inner {
    width: 500px;
    height: auto;
    display: block;
}
.twoColumn.facility .inner,
.twoColumn.cooking .inner{order: 2;}
.twoColumn .inner dl{ margin: 0;}
.twoColumn.facility .inner dl dt{color: #006BBA;}
.twoColumn.device .inner dl dt{color: #007B5E;}
.twoColumn.cooking .inner dl dt{color: #A25100;}
.twoColumn .inner dl dt {
    text-align: center;
    display: block;
    width: 100%;
    height: auto;
}
.twoColumn .inner dl dt img{
	display: block;
	margin: 0 auto 20px auto;
}
.twoColumn .inner dl dt span{
	display: inline-block; 
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	height: max-content;
	min-height: 6em; 
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 5px;
	line-height: 1.2;
	margin: 0 auto !important;
	text-align: left;
	text-orientation: mixed;
	-webkit-text-orientation: mixed;
}

.twoColumn .inner dl dd{
	font-size: 2.0rem;
	line-height: 1.8;
	padding-top: 70px;
}
.twoColumn.facility .inner .btnHanger a{background: #7EC8FF;}
.twoColumn.device .inner .btnHanger a{background: #61DEC1;}
.twoColumn.cooking .inner .btnHanger a{background: #F9CF8A;}
.twoColumn .photoHanger{width: 660px;}
.twoColumn.facility .photoHanger,
.twoColumn.cooking .photoHanger{order: 1;}
.twoColumn .photoHanger img{width: 100%;}

.movieCorner{
	position: relative;
	width: 970px;
	margin: 250px auto 0 auto;
	padding: 20px;
	background: #FFE3E3;
	border-radius: 20px;
}
.movieCorner::before{
	width: 136px;
	height: 284px;
	top: -100px;
	right: -166px;
	background: url("../../img/showroom/top/chara_g2.png") no-repeat 0 0;
	background-size: 100% auto;
}
.movieCorner::after{
	width: 176px;
	height: 276px;
	bottom: -60px;
	left: -196px;
	background: url("../../img/showroom/top/chara_w2.png") no-repeat 0 0;
	background-size: 100% auto;
}
.mcInner{
	padding: 100px 110px;
	background: #FFFFFF;
	border-radius: 20px;
}
.mcInner h2{
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 3px;
	color: #D81920;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}
.mcInner h2 img{margin-right: 20px;}
.mcInner p{
	font-size: 2.0rem;
	line-height: 1.8;
	letter-spacing: 1px;
	padding-top: 40px;
}

.movieCorner .btnHanger{margin-top: 20px;}
.movieCorner .btnHanger a{width: 330px;}



/**************************************************
 snsWrapper
**************************************************/
.snsWrapper{
	position: relative;
	padding: 90px 0 2px 0;
	background: #A5DFE8;
}
.snsWrapper h2{
	position: absolute;
	width: 820px;
	height: 101px;
	top: -100px;
	left: calc(50% - 410px);
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 5px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background: #A5DFE8;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: end;
	align-items: flex-end;
}
.snsWrapper h3{
	font-size: 2.0rem;
	font-weight: 700;
	letter-spacing: 2px;
	padding-left: 46px;
	-webkit-box-align: center;
	align-items: center;
}
.snsWrapper h3 img{
	width: 42px;
	height: 42px;
	margin-right: 10px;
}
.snsWrapper ul{margin-top: 20px;}
.snsWrapper ul li{
	width: calc((100% - 32px) / 5);
	margin-right: 8px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #FFFFFF;
}
.snsWrapper ul li:last-of-type{margin-right: 0;}
.snsWrapper ul li a{
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
}
.snsWrapper ul li a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.snsWrapper .btnHanger{margin-top: 40px;}
.snsWrapper .btnHanger a{
	font-size: 2.0rem;
	background: #FFFFFF;
	text-decoration: none;
}
.snsWrapper .btnHanger a::before{
	width: 42px;
	height: 42px;
	top: calc(50% - 21px);
	right: auto;
	left: 20px;
	background: url("../../img/showroom/facebook.svg") no-repeat 0 0;
	background-size: 100%;
}
.snsWrapper .btnHanger a:hover::before{right: auto;}
#sb_instagram .sbi_photo{padding: 0 !important;}


/**************************************************
 access
**************************************************/
.access{
	position: relative;
	padding: 260px 15px 130px 15px;
	background: #FFFFFF;
}
.access::before{
	width: 100%;
	height: 141px;
	top: -1px;
	left: 0;
	background: url("../../img/showroom/top/wave2.svg") repeat-x center bottom;
}

.access section{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}
.access section h2{
	position: relative;
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 3px;
	padding-left: 40px;
}
.access section h2::before{
	width: 30px;
	height: 30px;
	top: 3px;
	left: 0;
	border-radius: 100%;
	background: #147861;
}
.access section p{
	position: absolute;
	font-size: 2.0rem;
	letter-spacing: 1px;
	top: 0;
	left: 250px;
	margin: 0;
}

.accessInner{padding-top: 20px;}
.accessInner dl{
	width: 480px;
	margin: 40px 40px 0 0;
}
.accessInner dl:nth-of-type(2n){margin: 40px 0 0 0;}
#wrapper.showroom .accessInner dl dt{
	font-size: 2.0rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	padding: 15px 10px;
	color: #FFFFFF;
	background: #147861;
	border-radius: 10px;
}
.accessInner dl dd{
	font-size: 2.0rem;
	line-height: 1.8;
	padding-top: 15px;
}

.mapHanger{
	margin-top: 50px;
	height: 400px;
}
.mapHanger iframe{
	width: 100%;
	height: 100%;
}