@charset "utf-8";
.navbar-nav ul {padding: 0;}
.navbar-nav ul li {list-style: none;}
.navbar-nav a {
  text-decoration: none;
  display: block;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
@media screen and (min-width: 992px){
  .navbar {padding: 0;}
  .header-title {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .pro-contents-nav nav ul.navbar-nav li.nav-item {
    position: relative;
    height: 76px;
    display: flex;
    align-items: center;
  }
  .pro-contents-nav nav > ul > li > div {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background: #a1d3cd;
    transition: all .2s ease;
    opacity: 0;
  }
  .pro-contents-nav nav > ul > li:hover > div {
    opacity: 1;
  }
  .navbar-nav ul li a {
    width: 200px;
    padding: 10px 10px;
  }
  .navbar-nav ul li a:hover {
    background: rgba(60, 60, 60, 0.2);
  }
  .navbar-nav .collapse:not(.show) {display: block;}
  .navbar-light .navbar-nav .nav-link:focus,.navbar-light li:hover a,.navbar-light .navbar-nav .stay .nav-link {
    background: #ccefec;
    color: var(--color-gray100);
  }
}
@media screen and (max-width: 991px) {
  .pro-contents-nav .navbar-collapse {
    background: rgba(0, 147, 133, 0.9);
  }
  .pro-contents-nav nav > ul > li > div {width: 100%;}
  .pro-contents-nav nav > ul > li > div > ul  {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
  }
  .pro-contents-nav nav > ul > li > div > ul > li > a {
    padding: 5px;
  }
}

/*=========================

コンテンツヘッダー

=========================*/

/* コンテンツヘッダー共通
----------------------------------------------*/
#ContentsTitle {margin: 0;font-weight:900;}
#ContentsHeader a {text-decoration: none;}
#ContentsHeader nav ul > li > div > ul > li:before {
  font: normal normal normal 1em / 1 "Phosphor";
	content: "\f31c";
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	margin-right: 15px;
	vertical-align: middle;
}

@media screen and (min-width: 992px) {
	.Pro-Title {margin: 60px 0 30px;}
}
@media screen and (max-width: 991px) {
	.Pro-Title {margin: 70px 0 20px;}
	.Pro-Contents {margin-top: 40px;}
	#ContentsTitle h1 {
  	margin: 0;
  	font-size: 1.2rem;
  	line-height: 0;
	}
}


/* pc
----------------------------------------------*/
@media screen and (min-width: 992px){
	#ContentsHeader nav > ul {display: flex;flex-wrap:wrap}
	#ContentsHeader nav ul li button {
	  border: none;
	  background: none;
		display:inline-block;
		transition: all .3s;
	}
	#ContentsHeader nav ul li button:before,
	#ContentsHeader nav ul li:hover button:before {
		font: normal normal normal 1em / 1 "Phosphor";
		content: "\f31c";
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
	  color: #fff;
		vertical-align: middle;
	}
	#ContentsNav__btn,#ContentsHeader nav ul li button {transform: rotate(90deg);}
	#ContentsNav__btn,#ContentsHeader nav ul li:hover button {transform: rotate(-90deg);}
	#ContentsTitle {display:inline-block; margin: 30px 0;}
	#ContentsTitle p {font-size: 2rem;line-height:1;margin-top:19px;}
	#ContentsTitle img {
		height: 50px;
		width: auto;
	}
	.SubTitle {display:inline-block;vertical-align:bottom;margin-left:10px;margin-right:10px;}

	/*ナビ*/
	#ContentsHeader nav {position:relative;}
	#ContentsHeader nav > ul > li {margin:0px 30px 0px 0px;padding-top:15px;padding-bottom:15px;}
	#ContentsHeader nav > ul > li > a {display:inline-block;color: #fff;}
	#ContentsHeader nav > ul > li:last-child > a {margin-right:0;}
	#ContentsHeader nav ul > li > div {
		display:block;
		position: absolute;
		visibility: hidden;
		top: 100%;
		left: 0;
		width: 100%;
		padding-top: 30px;
		padding-bottom: 30px;
		background: rgba( 60, 60, 60, 0.1);
		transition: all .2s ease;
  		opacity: 0;
	}
	#ContentsHeader nav ul > li:hover > div {
		visibility: visible;
		z-index: 101;
		background: rgba( 60, 60, 60, 0.9);
		opacity: 1;
	}
	#ContentsHeader nav ul > li > div > ul {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 200px;
	}
	#ContentsHeader nav ul > li > div > ul > li {margin-bottom: 15px;}
	#ContentsHeader nav ul > li > div > ul > li:before {color:#fff;}
	#ContentsHeader nav ul > li > div > ul > li > a {
		color: #fff;
	}
}

/* sp
----------------------------------------------*/
@media screen and (max-width: 991px) {
	[id^="anc"],#Member,#Faq {
	  display: block;
	  padding-top: 80px;
	  margin-top: -80px;
  }
	#ContentsHeader {
  	height: 50px;
	}
	#ContentsTitle {display:block;}
	#ContentsTitle p {font-weight:bold;font-size:20px;line-height:1;margin-top:5px;margin-bottom:5px;}
	.menu-btn span:after {content: attr(data-txt-menu);}
	.open .menu-btn span:after {content: attr(data-txt-close);}

	#ContentsTitle img {
		height: 30px;
		width: auto;
		margin: 0;
	}
	.SubTitle {display:none;}
	#ContentsHeader > div {
  	width: 100%;
		position: fixed;
		z-index: 100;
		left: 0px;
	}
	#ContentsHeader > div > div {
  	display: flex;
		max-width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
  	justify-content:space-between;
  	align-items: center;
		background: rgba( 255, 255, 255, 0.95);
	}
	#ContentsNav__btn {
		width: 32px;
		height: 21px;
	}
	#ContentsHeader nav {display: none;}
	#ContentsHeader nav {
		width: 100%;
		height:100%;
		padding-bottom: 91px;
		overflow-y: scroll;
		text-align: center;
		background: rgba( 60, 60, 60, 0.9);
		animation-duration: 0.5s;animation-name: fade-in;
	}
	#ContentsHeader nav ul {
		max-width: 100%;
		padding: 0;
	}
	#ContentsHeader nav ul > li {
	  display: flex;
		align-items: center;
	  flex-wrap: wrap;
	}
	#ContentsHeader nav > ul > li > a {
		width: calc(100% - 52px);
		color: #fff;
		padding: 15px 15px 15px 15px;
		display:block;
		text-align: left;
	}
	#ContentsHeader nav ul > li button {
		width: 52px;
		height: 45px;
	  border: none;
	  background: none;
	  cursor: pointer;
	}
	#ContentsHeader .navbar-nav > li > a {
		color: #fff;
	}
	#ContentsHeader nav > ul > li > div {
		width: 100%;
	}
	#ContentsHeader nav ul > li > div > ul {
		text-align: left;
		padding: 15px;
		background: #fff;
	}
	#ContentsHeader nav ul > li > div > ul > li {margin-bottom: 10px;}
	/* ナビが開いている時 */
	.ContentsOpen #ContentsHeader > div {
		height: 100%;
	}
	.ContentsOpen #ContentsHeader nav {
		display: block;
	}
	#ContentsHeader nav ul > li > div > ul > li a {
		color: #000;
	}
}



#ContentsHeader nav {background: #000;}
/*pc*/
@media screen and (min-width: 992px){
	#ContentsHeader nav {background: #000;}
	#ContentsHeader nav ul > li:hover > div {background: rgba( 0, 0, 0, 0.9);}
}

/*sp*/
@media screen and (max-width: 991px){
	#ContentsHeader nav {background: rgba( 0, 0, 0, 0.9);}
}

.color-toilet {color: #00ada2;}



/* タイトル */
.page-title-wrapper {
    background: #00ada2;
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
}
.page-title-wrapper,h2,h3,h4,h5 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}
h2 {color: #00ada2;}
h3 {color: #3B3939;}

/* メイン画像 */
.bg-main-visual {
	background: #00a79c;
}

/* トイレ鳥瞰図 */
.toilet-zone {
  position: relative;
}
.toilet-zone a {display: block;}
.toilet-zone a img {
  width: 10vw;
  max-width: 90px;
  height: auto;
}
.toilet-zone a:hover img {opacity: .9;}
.zone-nioi {
  position: absolute;
  top: -5%;
  left: 18%;
}
.zone-seisojokin {
  position: absolute;
  top: -4%;
  right: 20%;
}
.zone-benzajokin {
  position: absolute;
  top: 30%;
  left: 25%;
}
.zone-tearai {
  position: absolute;
  top: 24%;
  right: 10%;
}
.zone-ugai {
  position: absolute;
  top: 48%;
  right: 5%;
}

/* 目次ボタン */
.nav-btn-anc a {
  position: relative;
  display: block;
  background: #5abdb5;
  color: #fff !important;
  border-bottom: none !important;
  padding: 5px 35px 5px 15px !important;
  border-radius: 4px;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
}
.nav-btn-anc a:hover {
  opacity: .9 !important;
}
.nav-btn-anc i {
  position: absolute;
  right: 10px;
}
/* ボタン */
a.btn-xs {background: #00ada2;border-bottom: none !important;}
a.btn-xs:hover  {background: #00ada2;opacity: .9 !important;}
a.btn-md,a.btn-sm {color:#666 !important;background: #C5E3D7;border-bottom: none !important;}
a.btn-md:hover,a.btn-sm:hover  {background: #C5E3D7;opacity: .9 !important;}

/* 見出し */
.heading-toilet {
  background: #00ada2;
  color: #fff;
  padding: 10px !important;
  border-top: 0 !important;
  border-radius: 4px;
}
.entry-style p.text-lead-primary {
  color: #00ada2;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
}
.ug-border h4 {text-align: center;}

/* 商品 */
.toilet-items {
  background: var(--color-gray10);
  padding: 30px;
  border-radius: 4px;
}

.entry-style .toilet-items h4,.entry-style .toilet-items h5 {
  margin-right: 0px;
  margin-left: 0px;
}
.toilet-items p {
  margin-bottom: 0 !important;
}
.toilet-items-img {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
@media screen and (max-width: 575px){
  .toilet-items-img img {
    max-width: 150px;
  }
}