@charset "utf-8";

#showroom{}

#showroom nav#categoryNav ul li span{display:block;background: aliceblue;padding:10px 0 10px 25px;letter-spacing:0.05em;opacity:0.25;}
#sideNavi nav#categoryNav ul li.noLink:hover{ background:rgba(0,0,0,0);}

#showroom #contents .telArea{ background:#fff; border:1px solid #E89213; box-sizing:border-box; display: flex;}
#showroom #contents .telNumberWrap{ width:60%; display:block; padding:20px; box-sizing:border-box;}
#showroom #contents .telArea .telNum{ display: block; font-family: 'Open Sans', sans-serif; font-weight: 700; line-height:1em; color: #E79213;font-size: 25px; letter-spacing: 0em; position:relative; padding-left:60px; }
#showroom #contents .telArea .eigyouNum{ display: block;  font-weight: 700; line-height:1.2em; color: #E79213;font-size: 125%; letter-spacing: 0em; position:relative; top:0.15em; }
#showroom #contents .telArea .telNum:before{ content:"TEL"; position:absolute; left:0; top:0; line-height: 1.2em; width:50px; padding:5px 0; text-align:center; color:#fff; background:#E79213; font-size:13px; letter-spacing:0.1em;}
#showroom #contents .emergencyWrap{  width:40%; display:block; padding:20px; box-sizing:border-box; background:#FDF4E7; border-left:1px solid #E89213; position:relative; box-sizing: border-box; display: flex; flex-direction:column; justify-content:center; align-items:center;}
#showroom #contents .emergencyWrap h5{ display:inline-block; position:absolute; left:20px; top:20px; font-size:0.8rem;}
#showroom #contents .emergencyWrap .gasTel{ font-size:0.8rem; color:#000000;}
#showroom #contents .box.light{ padding:10px 15px; }

#showroom table td{ color:#8FADC5;}
#showroom table.w230{ width:230px;}
#showroom table.w230 th{ width:85%;}


#showroom.showroom #categoryNav li.showroomNav,
#showroom.shinonoi #categoryNav li.shinonoiNav,
#showroom.suzaka #categoryNav li.suzakaNav,
#showroom.toushin #categoryNav li.toushinNav,
#showroom.cookingtrrace #categoryNav li.cookingtrraceNav,
#showroom.exhibition #categoryNav li.exhibitionNav,
#showroom.modelroom #categoryNav li.modelroomNav{ background:rgba(242,246,251,1);}

#showroom #categoryNav li.naganoNav {}
#showroom #sideNavi nav#categoryNav ul li.naganoNav span.naganoNavLink a { background:none;}
#showroom #categoryNav li.naganoNav span.naganoNavLink,
#showroom.nagano.modelroom #categoryNav li.naganoNav span.naganoNavLink,
#showroom.nagano.cookingtrrace #categoryNav li.naganoNav span.naganoNavLink,
#showroom.nagano.exhibition #categoryNav li.naganoNav span.naganoNavLink {background: url(../img/arrow.svg) no-repeat 10px 1em;opacity: 1;}
#showroom #categoryNav li.naganoNav span.naganoNavLink:hover,
#showroom.nagano #categoryNav li.naganoNav span.naganoNavLink{background: url(../img/arrow.svg) no-repeat 10px 1em #f2f6fb;}

a.black { color: #000;}
a.black span { color: #000;}

@media screen and (max-width: 767px) {
#showroom{}
#showroom #contents .telArea {display: block;}
#showroom #contents .telNumberWrap{ width:100%; padding:10px; float:none;}
#showroom #contents .emergencyWrap{ width:100%; padding:10px; border-top:1px solid #E89213; border-left:none; position:relative; float:none; display: block;}

}

/*nagano*/
#contact .telArea{ background:#fff; border:1px solid #E89213; box-sizing:border-box;}
#showroom #contents #contact .telNumberWrap{ width:38%; display:block; padding:20px; box-sizing:border-box;}
#contact .telArea .telNum{ display: block; font-family: 'Open Sans', sans-serif; font-weight: 700; line-height:1em; color: #E79213;font-size: 25px; letter-spacing: 0em; position:relative; padding-left:60px; }
#contact .telArea .telNum:before{ content:"TEL"; position:absolute; left:0; top:0;     line-height: 1.2em; width:50px; padding:5px 0; text-align:center; color:#fff; background:#E79213; font-size:13px; letter-spacing:0.1em;}
.nagano#showroom #contents .telArea {border:none;}
.nagano#showroom #contents .telNumberWrap {width:100%;padding: 0;}
#showroom #contents #contact .emergencyWrap{  width:62%; display:block; padding:20px; box-sizing:border-box; background:#FDF4E7; border-left:1px solid #E89213; position:relative; padding-left:115px;}
#contact .emergencyWrap h5{ display:inline-block; position:absolute; left:20px; top:20px; font-size:0.8rem; margin-bottom: 0;}
#contact .emergencyWrap h5:before{ content:""; width:50px; height:50px; display:block; box-sizing:border-box; position:absolute; left:-5px; top:0.3em; font-size:0.8rem;}
#contact .emergencyWrap h5 span{ color:#F82D00; display:block; margin-left:0; font-size:0.8rem; position:relative;}
@media screen and (max-width: 767px) {
    .nagano#showroom #contents .telArea { margin-bottom:1em;}
    #showroom #contents #contact .telNumberWrap{ width:auto; float:none; padding:10px;}
    #showroom #contents #contact .emergencyWrap{  width:auto; border-left:none; border-top:1px solid #E89213; padding:10px; float:none; display:block;}
    #showroom #contents #contact  .emergencyWrap h5{ display:block; position:relative; left:0; top:0; font-size:0.8rem;}
    #contact .emergencyWrap h5 br{ display:none;}
    #contact .emergencyWrap h5 span{ min-height:30px; line-height:30px;}
    #contact .emergencyWrap h5 span:before{ top:15px;}
    .eigyoWrap .w460{ margin-bottom:10px;}
}
#showroom #contents .addArea {border:none; margin: 0px 0 20px 0;}
#showroom #contents .addArea div {/*display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify;*/}
#showroom #contents .addArea div:not(:last-child) { margin-bottom: 10px;}
#showroom #contents .addArea div dt { font-weight: bold; line-height: 160%; margin: 0; padding: 0; /*width: 6rem;*/width:auto;}
#showroom #contents .addArea div dd { line-height: 160%; margin: 0; padding: 0; /*width: calc(100% - 6rem);*/width:auto;}
#showroom #contents .addArea div dd br { /*display: none;*/}
@media screen and (max-width: 767px) {
	#showroom #contents .addArea {border:none; margin: 20px 0 15px 0;}
    #showroom #contents .addArea { margin-top:20px;}
	#showroom #contents .addArea div {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify;}
	#showroom #contents .addArea div dt { width: 5.5rem;}
	#showroom #contents .addArea div dd { width: calc(100% - 5.5rem);}
	#showroom #contents .addArea div dd br { display:block;}
}


/*brown*/
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');
.brown {}
.brown #contents { padding-top:0;}
.brown #contents a { color:#7F4E20;}
.brown #contents h2 {background:#7F4E20;position: relative;}
.brown #contents h2:before {content:"";display:block;width: 0;height: 0;border-style: solid;border-width: 15px 15px 0 0;border-color: #f7b32c transparent transparent transparent;position: absolute;left: 0;top: 0;}
.brown #contents .pagetitleType2 { background:none;}
.brown #contents .pagetitleType2:before { display:none;}
.brown #contents .pagetitleType2 h1 {position:absolute;text-align:center;display:block;top: 0;left: 0;z-index:1000;background: #fff;padding: 15px 20px;width: 180px;}
.modelroom.brown #contents .pagetitleType2 h1 ,
.exhibition.brown #contents .pagetitleType2 h1 ,
.cookingtrrace.brown #contents .pagetitleType2 h1 {width: 220px;}
.brown .read {line-height:2.5;margin-bottom: 1.5em;}
.brownList {border-left:solid 1px #7f4e20;}
.brownList li {float:left;display:block;width:33.3%;text-align:center;font-size: 1.25rem;font-weight: bold;box-sizing: border-box;border-right: solid 1px #7f4e20;position: relative;}
.brownList li a {padding: 1em 0; display:block;;}
.brownList li:before{content:"";position:absolute;left: 50%;bottom: 0;width: 10px;height: 10px;margin-left: -5px;border-top: 2px solid #f7b32c;border-right: 2px solid #f7b32c;-webkit-transform: rotate(45deg);transform: rotate(135deg);}
.arrBrown{position:relative;/* padding-left:15px; */padding: 0 15px;width: 100%;display: block;margin: 1em 0 .5em;font-weight: bold;}
.arrBrown:before{content:"";width:6px;height:100%;display:block;background: url(../img/arrow_brown.svg) no-repeat 0em 0.3em;background-size:6px;top:0;left:0;position:absolute;}
.brownNum {counter-reset: brownnum 0;}
.brownNum li {padding-left: 5.5rem;position: relative;margin-bottom: 3rem;}
.brownNum li:before {counter-increment: brownnum;content: counter(brownnum)"F";font-family: 'Ropa Sans', sans-serif;color: #7F4E20;background: #f7b32c;font-size: 1.6rem;display: inline-block;text-align: center;padding: .8em;line-height: 1;position: absolute;left: 0;}
.brownNum li h3 { color:#7F4E20; padding-top:1rem;}
.brownNum li p { margin-bottom:1rem;}
.brownNum li > dl > dd {padding:0;}
@media screen and (max-width: 767px) {
    .brown .swiper-slide {background-size: contain;background-position-y: 0;background-size: cover;}
    .brown #contents .pagetitleType2 { margin-bottom:2em;}
    .brown #contents .pagetitleType2 h1 {width: 70px;line-height: 0;padding: 5px;}
    .modelroom.brown #contents .pagetitleType2 h1 ,
	.exhibition.brown #contents .pagetitleType2 h1 ,
	.cookingtrrace.brown #contents .pagetitleType2 h1 {position: static;text-align: center;display: block;margin: 0 auto;width: 40%;padding: .5em 0;}
    .brown .read {line-height: 1.6;text-align:left !important;}
    .brownList li { font-size:.8rem;}
    .brownNum li h3 { padding-top:0;}
    .brownNum li h3 .fr {float:none;padding-top:1em;display: block;}
    .brownNum li {padding:0;}
    .brownNum li:before {font-size:1.2rem;}
    .brownNum li > dl > dt { padding-left:4rem;}






}

/*nagano-slider*/
.swiper-container {/*height: 400px;*/ /*background-size: contain !important;*/}
@media screen and (max-width:1176px){
	.swiper-container { height: 30vw; width: 95vw;}
}
.swiper-container img { width: 100%; height: auto;}
.swiper-slide {background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}
.swiper-slide img { width: 100%; height: auto;}
.slide-logo {position:absolute;top: 30px;right: 30px;width: 120px;}
/*slider*/
.slider .list li.next-num, .slider .list li.prev-num {	z-index: 20;}
.slider .list li.prev-num {	transform: translateX(80px);}
.slider .list li.next-num {	transform: translateX(-80px);}
.slider .pager {/*position:absolute;*/ top: 0;width: 100%;display: block;z-index: 10000;}
.slider .next, .slider .prev {position: absolute; top: 50%; width: 30px; height:50px; z-index: 100;}
.slider .prev {left: 250px;}
.slider .next {right: 250px;}
.slider .next img, .slider .prev img {
	-webkit-transition: all .2s cubic-bezier(.165, .84, .44, 1); transition: all .2s cubic-bezier(.165, .84, .44, 1);
	-webkit-box-sizing: border-box;	box-sizing: border-box; 
	overflow: hidden; display: block; position: relative; backface-visibility: hidden; width: 30px; height:50px;
}
.slider .next img, .slider .prev img {
	width: 20px; height:auto; position:absolute;
	-webkit-transition: all .2s cubic-bezier(.165, .84, .44, 1);
	transition: all .2s cubic-bezier(.165, .84, .44, 1);
}
.slider .next img{ left:0; top:0;}
.slider .prev img{ right:0; top:0;}
.slider .next img:hover { left:5px; }
.slider .prev img:hover { right:5px;}
.swiper-pagination-bullet {  width: 15px;  height: 15px;  display: inline-block;  border-radius: 100%;  background: #fff; border:1px solid #ccc;}
.swiper-pagination-bullet-active {  opacity: 1;  background: #E89213; border:1px solid #E89213;}

@media screen and (max-width:1460px){
	.slider .prev {left: 50px;}
	.slider .next {right: 50px;}
}

/* @media screen and (max-width:1176px){
	.slider .next, .slider .prev {position: absolute; top: 0; width:30px; height:100%; margin-bottom:0; z-index: 100;}
	.slider .prev {left: 0px;}
	.slider .next {right: 0px;}
	.slider .pager { height:100%;}
	.slider .next img, .slider .prev img { width:12px; height:100%; display:block; }
	.slider .pointer-wrap{ display:none;}
}

@media screen and (max-width:767px){
	.slide-logo {top:10px;width: 80px;right: 10px;}
	.swiper-container {height: auto; padding-top: 50%;}
	.swiper-wrapper {top:0;position: absolute !important;}
	.slider .next, .slider .prev {position: absolute; top: 0; width:30px; height:100%; margin-bottom:0; z-index: 100;}
	.slider .prev {left: 0px;}
	.slider .next {right: 0px;}
	.slider .pager {height: 100%;}
	.slider .next img, .slider .prev img { width:100%; height:100%; display:block; width:10px; top:50%; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%);}
	.slider .swiper-pagination-bullet{ display:none;}
} */

/*popupImg*/
.popupImg {position:relative;display:block;}
.popupImg a { position:relative;display:block;}
.popupTop {position:relative;z-index:2;}
.popupBg {position:absolute;top:0;z-index:1;left:0;}