@charset "UTF-8";

.pc-only{
	display: block;
}

.sp-only{
	display: none;
}


.flowsky_main{background:#f1eae4;}
.flowsky_main .commonparts_box{position:relative;width:960px;height:565px;background:url(https://toto.imagewave.pictures/%2Fproducts%2Fpublic_flowsky%2Fimages%2Findex_main.jpg) no-repeat 0 0;padding-top:0;}
.flowsky_main .commonparts_box .main_txt{
	position: absolute;
    top: 32px;
    left: 30px;
    color: #557997;
    font-size: 3.1rem;
    line-height: 1.4;
	margin-top: 0;
}
.flowsky_main .commonparts_box .product_details{
	position: absolute;
    bottom: 8px;
    right: 16px;
    color: #275574;
	text-align: right;
	font-weight: bold;
}
.flowsky_main .commonparts_box #logo img{width: 300px;height: auto;}

  @media screen and (max-width:767px) {
	  
	  
	.sp-only{
		display: block;
	}

	.pc-only{
		display: none;
	}

	  
	  
    .flowsky_main {
        background: none;
    }
    .flowsky_main .commonparts_box {
        width: 100%;
        height: auto;
        background: none;
    }
    .flowsky_main .commonparts_box {
        width: 100%;
        height: auto;
    }
	.flowsky_main .commonparts_box .main_txt{
    	top: 10px;
    	left: 0px;
    	font-size: 1.4rem;
    	line-height: 1.4;
		margin-top: 0;
	}
	.flowsky_main .commonparts_box .product_details{
	    bottom: 4px;
    	right:0px;
		font-size: 1.0rem;
	}
   .flowsky_main .commonparts_box #logo{
	   width: 110px; 
	   top: 10px; 
	   right: 10px; 
	   padding: 10px 0;
	  }
    .flowsky_main .commonparts_box h1 {
        top: 15.5%;
        left: 0;
        right: 0;
        width: 247px;
        height: 65px;
        background: url(/products/public_flowsky/images/top_main_h1_sp.png) no-repeat 0 0;
        background-size: 247px 65px;
        margin: 0 auto;
    }
}

/* GA flowsky common*/
#contents {
	padding-bottom: 90px;
}

p.ttl_black,span.ttl_black {
	text-align: left;
	font-size: 1.6rem;
	margin-top: 20px;
}
.fs_inner .ttl_black:before {
	content:"■ ";
}
.commonparts_box_inner.fs_inner {
	padding:0;
}
.commonparts_box_inner.fs_inner > p + p {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	.fs_inner {
		margin: 12px 16px 0;
	}
}

/* GA flowsky urology hostipal 特徴 */
.feature_sec > p + p {
	margin-top: 8px;
}

/* GA flowsky urology hostipal 測定項目 */
 .measurement_sec p {
	margin-top: 10px;
	font-size: 1.4rem;
    line-height: 1.6;
    color: #414141;
	text-shadow: 1px 1px 1px #fff;
}

/* GA flowsky urology hostipal 注釈 (数字) */
.commonparts_box .annot-bracketsNum {
	margin-left: 35px;
}
.annot-bracketsNum > *:before {
    counter-increment: number;
    content: "（"counter(number)"）";
	margin-right: 0;
	margin-left: -3.5rem;
}
.annot * {font-size: 1.4rem!important;}


/*GA flowsky urology hostipal 手順 */
.box_procedure_list p {
	font-size: 1.4rem;
    line-height: 1.6;
    color: #414141;
	text-shadow: 1px 1px 1px #fff;
}
.box_procedure_list p:first-child ,
.box_procedure_list img {
	padding-bottom: 20px;
}
.box_procedure_list .link_btn {
	font-size: 1.4rem;
	background-color: #0085cc;/*#2877CE*/
	line-height: 2;
	width: 85%;
	text-align: center;
	color: #fff;
	border: 1px solid #0085cc;
	font-weight: bold;
}
.box_procedure_list .link_btn:before {
	content: "▼ ";
}
.box_procedure_list .link_btn:hover {
	background: rgba(255,255,255,0.8);
    color: #0085cc;
    text-decoration: none;
}


    

@media screen and (max-width: 767px) {
	.box_procedure_list p:first-child ,
	.box_procedure_list img {
		padding-bottom: 4%;
	}
	.box_procedure_list .link_btn {
		width:96%;
	}
	.box_procedure_list .annot-single {
    	margin-left: 16px !important;
	}
}


/*GA flowsky reference*/
.border {
	display: block;
	border: 1px solid #ccc;
	padding: 6px 2px;
	margin: 6px 0!important;
}
.bg_yellow {background-color: #fffbc8; padding: 4px 2px;}
.bg_pink {background-color: #ffe4f0; padding: 4px 2px;}


/*GA flowsky inq*/
@media screen and (min-width: 768px) {
	#inq .split2:nth-child(1) {
		width: 213px;
	}
	#inq .split2:nth-child(2) {
    	width: 727px;
	}
	.btn_inq .commonparts_btn-inner {
		width:425px;
	}
}


/*GA flowsky urology*/
@media screen and (min-width: 768px) {
	#urology .measurement_sec .split2:nth-child(1) {
		/*width:380px;*/
		width:200px;
	}
	#urology .measurement_sec .split2:nth-child(2) {
		width:510px;
		padding-left: 60px;
	}
}


/*GA flowsky hospital*/
@media screen and (min-width: 768px) {
	.option_sec .commonparts_table .split2:nth-child(1) {
		width:400px;
	}
	.option_sec .commonparts_table .split2:nth-child(2) {
		width:490px;
		padding-left: 60px;
	}
}


/*GA flowsky maintenanace*/
@media screen and (min-width: 768px) {
	#maintenance .multiple .commonparts_cell.split2:nth-child(1) {
    	width:700px;
	}
	#maintenance .multiple .commonparts_cell.split2:nth-child(2) {
		width:240px;
	}
}

/*GA flowsky form_check*/

#form_check form {
  text-align:center;
  width:500px;
  margin:60px auto 20px;
  font-size: 1.4rem;
}
#form_check form > div {
  background:#f2f2f2;
  padding:10px 20px;
  margin-bottom: 20px;
}
#form_check form > div p {
  text-align:center;
  margin-bottom: 20px;
}
#form_check form .r_yes {
  padding: 10px 40px;
  border-right:1px solid #ccc;
}
#form_check form #r_yes {
  margin-right:10px;
}
#form_check form .r_no {
  padding: 10px 40px;
}
#form_check form #r_no {
  margin-right:10px;
}
#form_check form .lnkbox {
  padding:15px 60px;
  text-align:center;
}

/*GA flowsky attention*/
html,body {
	position: relative;
}

.layer_board_bg {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0;
	left: 0;
	background: #000;
	display: none;
}
.layer_board {
	position: fixed;
	top: 10%;
	left: 0;
	right: 0;
	overflow-y: auto;
	margin: 0 auto;
	z-index: 2000;
	max-width:900px;
	width:80%;
	background-color: #fffdf5;
	padding: 3rem 3rem 6rem;
	box-sizing: border-box;
	display: none;
}
.layer_board h1 {
	margin-bottom: 0px;
}
.layer_board .commonparts_box_inner p {
	font-size: 1.6rem;
}
.layer_board .ttl_red {
	color:#ff0000;
	font-size: 2.4rem!important;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}
.layer_board .box_list.flex {
	width:100%;
	justify-content: space-around;
	margin-bottom: 50px;
}
.layer_board .commonparts_btn-inner {
	width:36.9%;
	text-align: center;
	margin: auto;
}
.layer_board .commonparts_btn-inner a {
	text-decoration: none;
	background: none;
	padding: 1.4rem 10px;
	color:#414141;
	font-size: 1.4rem;
}
.layer_board .commonparts_btn-inner a:hover {
	color:#fff;
}
.layer_board .commonparts_btn-inner a span {
	font-size: 3.6rem;
	transition: none;
}
@media screen and (max-width: 767px) {
	.layer_board {
		width:90%;
		padding: 3rem 2rem;
		top:5%;
		bottom: 5%;
	}
	.layer_board .box_list.flex {
		margin-left:0;
		margin-bottom: 0;
	}
	.layer_board .commonparts_btn-inner{
		width:100%;
	}
}


.Function_area,
.Function_area_hospital{
    display: flex;
    flex-wrap: wrap;
    width: 960px;
    margin: 30px auto 60px;
}

.Function_area .Function {
    padding: 5px;
    border-radius: 10px;
    color: #fff !important;
    text-align: center;
    font-size: 2rem;
    margin: 0px 0 10px 30px;
    background-color: #21a392;
    width: 29%;
    font-weight: bold;
	box-shadow: 1px 5px 5px rgba(0,0,0,0.3);
}

.Function_area .Function:first-child{
    margin: 0px 0 10px 10px;	
}


.Function_area_hospital .Function {
    padding: 5px;
    border-radius: 10px;
    color: #fff !important;
    text-align: center;
    font-size: 2rem;
    margin: 10px auto!important;
    background-color: #61a7f6;
    width: 90%!important;
    font-weight: bold;
	box-shadow: 1px 5px 5px rgba(0,0,0,0.3);
}

.Function_area_hospital h5 {
	font-weight: bold;
	text-align: center;
	font-size: 2rem;
	margin: 0;
}
.Function_area_hospital img {
	width: 80%!important;
	display: block;
	margin: 0 auto;
 }

.Function_area_hospital .Function:first-child{
    margin: 0px 0 10px 10px!important;	
}

.Function_area_hospital img:first-child {
	width: 85%!important;
	display: block;
	margin: 0 auto;
}


.Function_area_hospital .movie{
	width: 280px!important;
	background-color: #c0deff;
	padding: 5px 5px 20px ;
	margin-top:20px; 
	margin-bottom: 20px;
}

.Function_area_hospital .movie h5{
	width: 280px!important;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
}


.Function_area_hospital .movie h5 .red{
	font-weight: bold;
	color: #cc0000;
	
}


.Function_area_hospital .movie .mov_box {
    width: 280px;
    margin: 24px auto 0 auto;
    text-align: center;
}


.Function_area_hospital .movie .commonparts_btn a {
    display: block;
    font-size: 1.6rem;
    text-decoration: underline;
    line-height: 1.4;
    color: #13449d;
    background: url(https://toto.imagewave.pictures/%2Fproducts%2Fcommon%2Fimages%2Fbtn_arrow.png) no-repeat right center;
    padding: 16px 74px 15px 75px;
    transition: all .1s ease-in-out;
}

.Function_area_hospital .movie .commonparts_btn a:hover {
    color: #fff;
    background: url(https://toto.imagewave.pictures/%2Fproducts%2Fcommon%2Fimages%2Fbtn_arrow_on.png) no-repeat right center;
    text-decoration: none;
}


.mt32 {
	margin-top: 51px!important;
}


@media screen and (max-width: 767px) {
	
	
	.Function_area,
	.Function_area_hospital{
		display: block;
		flex-wrap: wrap;
		width: 100%;
		margin: 30px auto 60px;
	}

	.Function_area .Function {
		padding: 5px;
		border-radius: 10px;
		color: #fff !important;
		text-align: center;
		font-size: 2rem;
		margin: 0px 0 30px 30px;
		background-color: #21a392;
		width: 80%;
		font-weight: bold;
		box-shadow: 1px 5px 5px rgba(0,0,0,0.3);
	}

	.Function_area .Function:first-child{
		margin: 0px 0 30px 30px;
	}


	.Function_area_hospital .Function {
		padding: 5px;
		border-radius: 10px;
		color: #fff !important;
		text-align: center;
		font-size: 2rem;
		margin: 10px auto!important;
		background-color: #61a7f6;
		width: 90%!important;
		font-weight: bold;
		box-shadow: 1px 5px 5px rgba(0,0,0,0.3);
		margin: 0 auto;
	}

	.Function_area_hospital li {margin-top: 10%;}
	
		.Function_area_hospital li:first-child {margin-top: 5%;}


	
	.Function_area_hospital h5 {
		font-weight: bold;
		text-align: center;
		font-size: 2rem;
		margin: 0;
	}

	.Function_area_hospital img {
		width: 80%!important;
		display: block;
		margin: 0 auto;
	 }

	.Function_area_hospital .Function:first-child{
		margin: 0px 0 10px 10px!important;	
	}

	.Function_area_hospital img:first-child {
		width: 85%!important;
		display: block;
		margin: 0 auto;
	}


	.Function_area_hospital .movie{
		display: block;
		width: 100%!important;
		background-color: #c0deff;
		padding: 5px 5px 20px ;
		margin-top:20px; 
		margin-bottom: 20px;
	}

	.Function_area_hospital .movie h5{
		width: 100%!important;
		font-size: 1.5rem;
		font-weight: bold;
		text-align: center;
		margin-top: 10px;
	}


	.Function_area_hospital .movie h5 .red{
		font-weight: bold;
		color: #cc0000;

	}


	.Function_area_hospital .movie .mov_box {
		width: 90%;
		margin: 24px auto 0 auto;
		text-align: center;
	}


	.Function_area_hospital .movie .commonparts_btn a {
		display: block;
		font-size: 1.6rem;
		text-decoration: underline;
		line-height: 1.4;
		color: #13449d;
		background: url(https://toto.imagewave.pictures/%2Fproducts%2Fcommon%2Fimages%2Fbtn_arrow.png) no-repeat right center;
		padding: 16px 74px 15px 75px;
		transition: all .1s ease-in-out;
	}

	.Function_area_hospital .movie .commonparts_btn a:hover {
		color: #fff;
		background: url(https://toto.imagewave.pictures/%2Fproducts%2Fcommon%2Fimages%2Fbtn_arrow_on.png) no-repeat right center;
		text-decoration: none;
	}


	.mt32 {
		margin-top: 51px!important;
	}

	
	.mov_box .commonparts_btn {
    margin: 12px auto;
    width: 90%!important;
	}
	
	.commonparts_btn-inner {
    display: inline-block;
    background: #fff;
    border: solid #13449d 1px;
    box-shadow: none;
    margin-top: 5%!important;
	width: 100%;
	}
	
	.commonparts_btn a {
    padding: 16px 40px 15px 20px;
    text-align: center!important;
		font-size: 1.6rem;
}
}


#agreement01 .pf_list01{
	margin-top: 2em;
	font-size: 1.4rem;
	border-bottom: 1px solid #CCC;
}
#agreement01 .pf_list01 li{
	display: flex;
}
#agreement01 .pf_list01 .clm_tr01 div{
	padding: 1em;
	background: #e4eaf4;
	box-sizing: border-box;
	border-top: 1px solid #CCC;
}
#agreement01 .pf_list01 .clm_th{
	text-align: center;
	width: 25%;
	border-right: 1px solid #CCC;
}
#agreement01 .pf_list01 .clm_th2{
	text-align: center;
	width: 20%;
	margin-left: 5%;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
#agreement01 .pf_list01 .clm_td{
	width: 75%;
}

#agreement01 .pf_list01 .clm_tr02 div{
	padding: 1em;
	background: #FFF;
	border-collapse: collapse;
	box-sizing: border-box;
	border-top: 1px solid #CCC;
}

#agreement01 .pf_list02{
	margin-top: 2em;
	font-size: 1.4rem;
}
#agreement01 .pf_list02 li{
	display: flex;
}
#agreement01 .pf_list02 li div{
	width: 12%;
	text-align: center;
	padding: 1em;
	box-sizing: border-box;
}
#agreement01 .pf_list02 li div:first-child{
	width: 16%;
}
#agreement01 .pf_list02 li div:nth-of-type(n+2){
	border-left: 1px solid #CCC;
}
#agreement01 .pf_list02 .clm_tr01 div{
	background: #e4eaf4;
}
#agreement01 .pf_list02 .clm_tr02 div{
	border-bottom: 1px solid #CCC;
}
#agreement01 .pf_list02 .clm_tr02 .dw{
	width: 24%;
}
#agreement01 .pf_list03{
	margin-top: 2em;
	font-size: 1.4rem;
}
#agreement01 .pf_list03 li{
	display: flex;
}
#agreement01 .pf_list03 li div{
	padding: 1em;
	box-sizing: border-box;
	border-bottom: 1px solid #CCC;
}
#agreement01 .pf_list03 li.clm_tr01 {
	background: #e4eaf4;
	border-top: 1px solid #CCC;
}
#agreement01 .pf_list03 li.clm_tr01 div{
	background: #e4eaf4;
	text-align: center;
}
#agreement01 .pf_list03 .clm_th{
	background: #EEE !important;
	text-align: center;
	width: 24%;
}
#agreement01 .pf_list03 .clm_td{
	width: 38%;
	border-left: 1px solid #CCC;
}
#agreement01 .pf_list03 .clm_td2{
	margin-top: 1em;
	padding: 0.5em !important;
	vertical-align: text-bottom;
	border-top: 1px solid #CCC;
}
#agreement01 .pf_list03 .clm_tr02 div{
	border-bottom: 1px solid #CCC;
}
#agreement01 .pf_list04{
	margin-top: 2em;
	font-size: 1.4rem;
}
#agreement01 .pf_list04 li{
	border-top: 1px solid #CCC;
	display: flex;
}
#agreement01 .pf_list04 li div{
	padding: 1em;
	box-sizing: border-box;
	border-bottom: 1px solid #CCC;
}
#agreement01 .pf_list04 .clm_th{
	background: #e4eaf4;
	text-align: center;
	width: 24%;
	border-right: 1px solid #CCC;
}
#agreement01 .pf_list04 .clm_td{
	width: 76%;
}
@media screen and (max-width: 767px) {
	#agreement01 .pf_list01,
	#agreement01 .pf_list02,
	#agreement01 .pf_list03,
	#agreement01 .pf_list04{
		margin: 0 2vw;
	}
	#agreement01 .pf_list02 ul{
		display: flex;
		border-bottom: 1px solid #CCC;
	}
	#agreement01 .pf_list02 li{
		display: block;
	}
	#agreement01 .pf_list02 li:nth-of-type(n+2){
		border-left: 1px solid #CCC;
	}
	#agreement01 .pf_list02 li div{
		height: 10vw;
		line-height: 6vw;
		padding: auto;
		vertical-align: middle;
	}
	#agreement01 .pf_list02 li.clm_tr01{
		width: 24%;
	}
	#agreement01 .pf_list02 li.clm_tr02{
		width: 38%;
	}
	#agreement01 .pf_list02 .clm_tr01 div{
		border-bottom: none;
		border-top: 1px solid #CCC;
		width: 100% !important;
	}
	#agreement01 .pf_list02 li div:nth-of-type(n+2){
		border-left: none;
	}
	#agreement01 .pf_list02 .clm_tr02 div{
		border-bottom: none;
		border-top: 1px solid #CCC;
		width: 100% !important;
	}
	#agreement01 .pf_list02 .clm_tr02 .dw{
		height: 20vw;
		line-height: 12vw;
	}
}
/*-- agreement01 common --*/
#agreement01 .txt_LB{
	font-size: 1.8rem;
	color: #13449d;
}
#agreement01 .txt_S{
	font-size: 1.2rem
}
#agreement01 .txt_B{
	color: #13449d;
}