@charset "utf-8";

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

	hospitalization.css
	
=================================================================== */

/* --------------------------------
   □ 共通部分
-------------------------------- */ 

.contents main > section {
    padding: 45px 0 70px;
}

.subsection{
	margin-bottom:45px;
}

.explain{
	width:60%;
	float:left;
}

p.image{
	display:block;
	text-align:center;
	margin:30px 0;
}

p.image span{
	display: block;
    margin-top: 10px;
}

p.imageright{
	display: inline-block;
    float: right;
    margin-top: 0;
}

p.imageright span{
	display: block;
    margin-top: 10px;
	text-align:center;
}


/* ◇ title
-------------------------------- */	

.contents .accent{
    background:url(../../images/hospitalization/accent.jpg) no-repeat 50% 50%; 
    background-size:cover;
}

.contents .mainvisual h2 {
    background:url(../../images/hospitalization/title_icon.png) 0 50% no-repeat;
}


/* --------------------------------
   □ 入院・出産についてトップ
-------------------------------- */ 

#index ul.menu li{
	width:485px;
	float:left;
	margin-right:30px;
	margin-bottom:55px;
}

#index ul.menu li a{
	display:block;
	color:#333;
}

#index ul.menu li:nth-child(2n){
	margin-right:0;
}

#index ul.menu li p.image{
	margin-bottom:20px;
}

#index ul.menu li dl{
	text-align:center;
}

#index ul.menu li dl dt{
	font-size:157%;
	margin-bottom:5px;
	font-weight:700;
}

#index ul.menu li dl dd{
	font-size:107%;
}

#index ul.visitor li{
	width:485px;
	float:left;
	margin-right:30px;
	text-align: center;
}

#index ul.visitor li:nth-child(2n){
	margin-right:0;
}

#index ul.visitor li a{
	display: block;
    padding: 30px 40px;
    color: #fff;
    background: #555;
    text-decoration: none;
    transition: all 300ms 0s ease;
    font-size: 128%;
    border-radius: 4px;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);

}

#index ul.visitor li a span{
	background: none;
    padding-left: 14px;
    position: relative;
}

#index ul.visitor li a span:before{
	display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 0;
    height: 0;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left: 10px solid #fff;
}


#index ul.visitor li.firstvisit a{
	background:#eb6795;
}

#index ul.visitor li.repeat a{
	background:#aacd06;
}

/* --------------------------------
   □ 入院・出産について タブ
-------------------------------- */ 

#tabarea{
	overflow:hidden;
	margin-bottom:80px;
}

#tabarea ul.tab{
}

#tabarea ul.tab li{
	line-height:1.3;
	margin-right:20px;
	float:left;
	width:320px;
	text-align:center;
	border-radius:8px;
	font-size:135%;
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f483aa+0,eb6795+100,f483aa+100,eb6795+100,eb6795+101,eb6795+101 */
	background: #f483aa; /* Old browsers */
	background: -moz-linear-gradient(top, #f483aa 0%, #eb6795 100%, #f483aa 100%, #eb6795 100%, #eb6795 101%, #eb6795 101%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f483aa 0%,#eb6795 100%,#f483aa 100%,#eb6795 100%,#eb6795 101%,#eb6795 101%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f483aa 0%,#eb6795 100%,#f483aa 100%,#eb6795 100%,#eb6795 101%,#eb6795 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f483aa', endColorstr='#eb6795',GradientType=0 ); /* IE6-9 */
	position:relative;
	display:table;
}

#tabarea ul.tab li:after{
	position: absolute;
    content: "";
    display: block;
    right: 0;
    margin: auto;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 5px solid #ffccde;
}

#tabarea ul.tab li a,
#tabarea ul.tab li a:hover{
	color:#fff;
	padding:20px;
	box-sizing:border-box;
	display:table-cell;
	vertical-align:middle;
}

#tabarea ul.tab li:last-child{
	margin-right:0;
}


/* --------------------------------
   □ 入院・出産について 患者様の声
-------------------------------- */ 


#voice h3{
	clear:both;
}

	#voice h3 span.rightarea{
		font-size:50%;
		float:right;
	}
	
		#voice h3 span.rightarea em{
			background:#ffbebe;
			padding:2px 3px;
			border-radius:8px;
			margin-right:10px;
		}

	#voice ul.userbox{
		margin-left:-30px;
	}
	
	#voice ul.userbox > li{
		width:485px;
		margin-left:30px;
		border:3px solid #ffe4ee;
		border-radius:8px;
		padding:15px;
		box-sizing:border-box;
		float: left;
		margin-bottom:30px;
	}
		
		#voice .userbox ul.text-box{
			margin-bottom:25px;
		}
		
		#voice .userbox ul.text-box li{
			margin-bottom:25px;
		}

		#voice .userbox ul.text-box li dl dt{
			background:#ffccde;
			padding:0 10px;
			border-radius:8px;
			margin-right:10px;
			display:inline-block;
			margin-bottom:5px;
		}

		#voice .userbox ul.text-box li dl dd{
			padding-left:10px;
		}
	
		#voice .userbox .top p.img{
			display:inline-block;
			float:left;
			margin-right:20px;
		}

		#voice .userbox .top{
			margin-bottom: 10px;
			overflow: hidden;
		}
		
		#voice .userbox .top ul.text-box {
			margin-bottom: 25px;
			width: 39%;
			float: right;
		}


		#voice .userbox .bottom{
		}

/* --------------------------------
   □ 入院・出産について よくある質問
-------------------------------- */ 

#qa h3.q1 {
    background: url(../../images/qa/q1.gif) 0 0 no-repeat;
    padding: 2px 0 2px 57px;
}

	#qa #faq ul.qa li{
		padding: 25px 30px;
		margin-bottom:20px;
	}

	#qa #faq ul.qa li dl{
		margin-bottom: 10px;
	}
	
	#qa #faq ul.qa li dl dt{
		background:url(../../images/service/infertility/arrow-on.png) 97% 20% no-repeat; 
		position: relative;
		padding: 0 65px;
		color: #8ec555;
		font-size:135%;
		cursor: pointer;
		font-weight:700;
	}
	
		#qa #faq ul.qa li.open dl dt{
			background:url(../../images/service/infertility/arrow-off.png) 97% 20% no-repeat; 
			margin-bottom: 25px;
		}

		#qa #faq dl dt span{
			color: #fff;
			background:#8ec555;
			padding: 0;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			display: inline-block;
			border-radius: 50%;
			margin-right: 15px;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		#qa #faq dd{
			margin-top: 10px;
			padding: 20px;
			background:#f7f2e6;
			display:none;
			padding-left: 45px;
			font-size:114%;
			position:relative;
		}
		
		#qa .subsection a{
			color:#2e9ae6;
		}

		#qa .subsection a:hover{
			text-decoration:underline;
		}

/* --------------------------------
   □ 入院・出産について 各種教室
-------------------------------- */ 

#institution .subsection{
	border-top:1px dotted #8f8f8f;
	padding:30px 0;
	clear: both;
	margin-bottom: 0;
}

#institution .subsection.none{
	border:none;
	padding-top:0;
}

#institution .subsection .leftarea{
	width: 33%;
    float: left;
}

#institution .subsection .rightarea{
	width: 67%;
    float: right;
}

#institution .subsection .rightarea h4{
	font-size:171%;
}

#institution .subsection .rightarea h4 span{
	font-size:62%;
	color:#fff;
	display:inline-block;
	background:#8ec555;
	border-radius:50px;
	padding: 5px 10px;
    margin-left: 10px;
    vertical-align: top;
}

#institution .subsection .rightarea table{
	margin-bottom:0;
}

.institution .contactarea{
	position: fixed;
    bottom: 0;
    background: #fff;
    padding: 35px 0 30px;
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
	width: 100%;
	z-index: 11;
}

.institution .contactarea p.txt{
	margin-bottom:0;
	font-size:122%;
	font-weight:700;
}

.institution .contactarea p.txt span.tel{
	font-size:123%;
	border-bottom:4px solid #fcc800;
	padding-bottom:5px;
}

.institution .contactarea p.txt span.img{
	float:right;
	margin-top: -15px;
}


/* --------------------------------
   □ 入院・出産について アフターケア
-------------------------------- */ 

#aftercare .box{
	background:#ffecec;
	padding:35px 30px;
}

	#aftercare .box .boxarea{
		margin-bottom:30px;
		overflow: hidden;
	}
	
	#aftercare .box ul.date{
		background:#fff;
		padding:20px;
		clear: both;
		overflow: hidden;
		border-radius:8px;
		margin-bottom:25px;
	}
	
		#aftercare .box ul.date li{
			width:33%;
			float:left;
			border-left:3px solid #eb6795;
			padding-left:15px;
			box-sizing:border-box;
		}
		
		#aftercare .box ul.date li dl dt{
			font-weight:700;
			color:#eb6795;
			width:2.5em;
			float:left;
		}
		#aftercare .box ul.date li dl dd{
			width:85%;
			float:right;
		}
		#aftercare .box table{
			background:#fff;
		}
	
	#aftercare .box table td dl.target{
		margin-bottom:25px;
	}
	
		#aftercare .box table td dl.target dt{
			display:inline-block;
			padding:3px 30px;
			color:#fff;
			border-radius:50px;
			margin-bottom:10px;
		}
		
		#aftercare .box table td dl.baby dt{
			background:#eb6795;
		}
		
		#aftercare .box table td dl.mother dt{
			background:#8ec555;
		}
	
	#aftercare .box table td ul.responsible{
		list-style-type: disc;
		margin-left: 20px;
	}
		#aftercare .box table td ul.responsible li{
			line-height:1.5;
			margin-bottom:15px;
		}
		
		#aftercare .box table td ul.responsible li:last-child{
			margin-bottom:0;
		}

@media only screen and
(max-width : 767px) {


.explain {
    width: auto;
    float: none;
}

p.imageright {
    display: block;
    float: none;
	text-align:center;
    margin-top: 15px;
}

    /* --------------------------------
       □ 入院・出産についてトップ
    -------------------------------- */ 
    #index ul.menu li{
        width:auto;
        float:none;
        margin-right:0;
        margin-bottom:10%;
    }
    #index ul.menu li p.image{
        margin-bottom:5%;
    }
    #index ul.menu li dl dt{
        font-size:140%;
    }
    #index ul.menu li dl dd{
        font-size:114%;
        width: 80%;
        margin: 0 auto;
    }

/* --------------------------------
   □ 入院・出産について タブ
-------------------------------- */ 
#tabarea {
    margin-bottom: 45px;
	width: auto;
}


#tabarea ul.tab li{
	width:32%;
	margin-right:2%;
	margin-bottom:2%;
}

#tabarea ul.tab li a, 
#tabarea ul.tab li a:hover {
    font-size: 86%;
}

/* --------------------------------
   □ 入院・出産について よくある質問
-------------------------------- */ 


	#qa #faq ul.qa li{
		padding: 3%;
		margin-bottom: 10px;
	}

	#qa #faq ul.qa li dl{
		margin-bottom: 10px;
	}
	
	#qa #faq ul.qa li dl dt{
		    padding: 0 45px;
	}
	
		#qa #faq ul.qa li.open dl dt{
			background:url(../../images/service/infertility/arrow-off.png) 97% 20% no-repeat; 
			margin-bottom: 25px;
		}

		#qa #faq dl dt span{
			width: 35px;
			height: 35px;
			line-height: 35px;
			border-radius: 50%;
			font-size: 85%;
		}

		#qa #faq dd{
			margin-top: 10px;
			padding: 20px;
			background:#f7f2e6;
			display:none;
			padding-left: 45px;
			font-size:114%;
			position:relative;
		}
		
		#qa .subsection a{
			color:#2e9ae6;
		}

		#qa .subsection a:hover{
			text-decoration:underline;
		}

/* --------------------------------
   □ 入院・出産について 各種教室
-------------------------------- */ 
#institution .subsection .leftarea,
#institution .subsection .rightarea{
    width: auto;
    float: none;
}

#institution .subsection .leftarea p.imageleft{
	display:block;
	text-align:center;
	margin-bottom:20px;
}


/* --------------------------------
   □ 入院・出産について アフターケア
-------------------------------- */ 

#aftercare .box{
	padding: 3%;
}

	#aftercare .box .boxarea{
		margin-bottom:30px;
		overflow: hidden;
	}
	
	#aftercare .box ul.date{
		padding:4%;
	}
	
		#aftercare .box ul.date li{
			width: auto;
			float: none;
			overflow: hidden;
			margin-bottom: 15px;
		}
		

.institution .contactarea{
	display:none;
}

/* --------------------------------
   □ 入院・出産について 患者様の声
-------------------------------- */ 

#voice h3 span.rightarea {
    float: none;
    display: block;
    line-height: 1.7;
    margin-top: 5px;
}

#voice ul.userbox {
    margin-left: 0;
}

#voice ul.userbox > li {
    width: auto;
    margin-left: 0;
    float: none;
}

#voice .userbox .top p.img {
    display: block;
    float: none;
    margin-right: 0;
	text-align: center;
}

#voice .userbox .top ul.text-box {
    width: auto;
    float: none;
}









	
}