/* ==========================================================
*
* 介護保険について
*
========================================================== */

@charset "UTF-8";


.pc #sideNavi > ul > li:nth-child(3) span,
.pc #sideNavi > ul > li:nth-child(4) span,
.pc #sideNavi > ul > li:nth-child(5) span{
    letter-spacing: -.04em;
}


/* ---------------------------------------------
*   テーブル
---------------------------------------------*/
table.wcellTbl{
	width:100%;
	margin-top:1em;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
}

table.wcellTbl th{
	padding:1em;
	font-weight: bold;
	width:25%;
	background-color:#f5f5f5;
	border-top:1px solid #cccccc;
}

table.wcellTbl td{
	padding:1em 2em;
	width:75%;
	border-top:1px solid #cccccc;
	line-height:155%;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	table.wcellTbl{
		border-bottom:1px solid #cccccc;
	}

	table.wcellTbl th{
		display:block;
		width:100%;
	}

	table.wcellTbl td{
		display:block;
		width:100%;
		padding:1em 1em;
		border-top:none;
	}
}


/* ---------------------------------------------
*   ページ内リンク
---------------------------------------------*/
ul.innerLinks{
	display:block;
	overflow:hidden;
}

ul.innerLinks > li{
	display:inline-block;
	overflow:hidden;
	width:14%;
	padding:0.5em 0;
	border-right:1px solid #cccccc;
	letter-spacing:normal;
	float:left;
}


ul.innerLinks > li > a{
	display:block;
	overflow:hidden;
	/*text-align: center;*/
	padding:0 1em;
	font-weight:bold;
	text-decoration:none;
}

ul.innerLinks > li > a > span::before{
	font-family: 'ycota_ift';
    content: "\e911";
    font-size: 0.8em;
    margin-right: 0.5em;
    color: #ec7731;
}



/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	ul.innerLinks{
		border-right:none;
	}

	ul.innerLinks > li > a{
		padding:0 1em;
	}
}


/* ---------------------------------------------
*   スクロール画像（SP)
---------------------------------------------*/
.imgcopy{
	display:none;
	font-size:1.2rem;
}

.zoomImg{
	display:block;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	.imgcopy{
		display:block;
	}

	.zoomImg{
		width:100%!important;
		overflow-x:scroll;
	}
}


/******************************************
*
介護保険について TOP
*
******************************************/

/* ---------------------------------------------
*   メインタイトル
---------------------------------------------*/

#titleBox.bkPict{
	background-color:#f2f2f2;
	background-image:url('../../kaigo/images/titlebg.png');
	/*background-position: 50% 50%;*/
	background-size:cover;
}



/* for Tb --------------------*/
@media screen and (max-width:980px) {
    /**/

}


/* for Sp --------------------*/
@media screen and (max-width: 738px) {

	#titleBox.bkPict{
		background-position: 0% 50%;
	}

}


/* ---------------------------------------------
*   コーナータイトル
---------------------------------------------*/

#kaigoIndex{
    display:block;
    overflow:hidden;
    width:100%;
    padding:30px 0 0;
}


#kaigoIndex h2.lined{
	display:block;
	overflow:hidden;
	text-align:center;
	line-height:155%;
	color:#0c1544;
	font-size:2.4rem;
	margin:0 0 30px;
}

#kaigoIndex h2.lined > span::after {
	margin: 0.5em auto;
}

#kaigoIndex h2 small{
	display:block;
	font-size:0.6em;
}


/* ---------------------------------------------
*   コンテンツリスト
---------------------------------------------*/

#kaigoIndex ul{
	display:block;
	/*overflow:hidden;*/
}

#kaigoIndex ul > li{
	display:block;
	/*overflow:hidden;*/
	width:25%;
	float:left;
	padding:0 15px;
}

#kaigoIndex ul > li > .listBox{
	display:block;
	overflow:hidden;
	width:100%;
	max-width:300px;
	/*min-height:450px;*/
	position:relative;
	margin-bottom:10px;
	/*border:1px solid #cccccc;*/

	box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    -o-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    -ms-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#kaigoIndex ul > li > .listBox > a{
	display:block;
	overflow:hidden;
	text-decoration:none;
}

#kaigoIndex ul > li > .listBox > a > .innerFrame::after{
	display: block;
	font-family: 'ycota_ift';
    content: "\e917";
    color: #eb7730;
    font-weight: normal;
    margin-top:1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}

#kaigoIndex ul > li > .listBox > a:hover > .innerFrame::after{
    margin-left: 1.0em;
    margin-right: 0.0em;
}


#kaigoIndex ul > li > .listBox .innerFrame{
	display:block;
	overflow:hidden;
	padding:20px;	
}

#kaigoIndex ul > li > .listBox h3{
	font-size:1.8rem;
	font-weight:bold;
	line-height:125%;
	margin-bottom:20px;
}

#kaigoIndex ul > li > .listBox p{
	line-height:155%;
	font-size: 1.6rem;
}

.headerImg > img{
	width:100%;
	height:auto;
}


/* for Tb --------------------*/
@media screen and (max-width: 980px) {

	#kaigoIndex{
	    display:block;
	    overflow:hidden;
	    width:100%;
	    padding:30px 0 0;
	}


	#kaigoIndex ul > li{
		display:block;
		width:50%;
		padding:5px;
	}

	#kaigoIndex ul > li > .listBox{
		width:100%;
		max-width:100%;
		/*min-height:280px;*/
	}

	#kaigoIndex ul > li > .listBox .innerFrame{
		padding:10px;	
	}

}

/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#kaigoIndex h3{
		font-size:1.6rem;
	}

	#kaigoIndex ul > li > .listBox p{
		font-size:1.4rem;
	}

}


/* ---------------------------------------------
*   メモ
---------------------------------------------*/
#bannerBox{
    display: block;
    overflow: hidden;
    width:960px;
    height:190px;
    margin:0 auto 40px auto;
    position:relative;
    border: 1px solid #cccccc;
}


#bannerBox a{
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	text-decoration:none;
}

#bannerBox a > p{
	display:block;
	width:100%;
	height:100%;
    background:url('../../kaigo/images/memo.png') no-repeat right 50%;
    background-size:contain;
}

#bannerBox h3{
	display:inline-block;
	font-size:2.2rem;
	line-height:125%;
	text-align:center;
	position:absolute;
	top:50%;
	left:90px;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#bannerBox h3 > span::after{
	margin: 1em auto 0.5em;
}


/* for Tb --------------------*/
@media screen and (max-width: 980px) {
	#bannerBox{
	    width:100%;
	}
}

/* for Sp --------------------*/

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

	#bannerBox{
	    width:100%;
	    height:130px;
        margin:0 auto 30px auto;
	}

	#bannerBox a > p{
		margin-left:30%;
    	background-size:cover;
	}

	#bannerBox h3{
		font-size:1.6rem;
		left:20px;
		text-align:left;
	}

	#bannerBox h3 > span::after{
		margin: 1em 0 0.5em;
	}
}



/******************************************
*
介護が必要になったら
*
******************************************/
#gudeContent{
	font-size:1.6rem;
	line-height:125%;
}

#gudeContent > h2{
	font-size:2.8rem;
	line-height: 125%;
}

#gudeContent > p{
	padding:1em;

}

#gudeContent ul{
	display:block;
	overflow:hidden;
	margin:20px 0 30px;
}

.eachStaps{
	display:block;
	overflow:hidden;
	padding:35px;
	text-align:left;
	border:1px solid #cccccc;
}

.eachStaps > h3{
	display:block;
	font-size:1.7rem;
	color:#002169;
	padding-bottom:0.75em;
	margin-bottom:0.75em;
	border-bottom: 1px solid #cccccc;
}


.eachStaps > p{
	line-height:155%;
}

#gudeContent ul > li{
	display:block;
	overflow:hidden;
	text-align:center;
}
#gudeContent ul > li::after{
	display:inline-block;
	margin:20px 0;

	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #c2c2c2 transparent transparent transparent;

}

#gudeContent ul > li:last-child::after{
	display:none;
}


#gudeContent .boxBtn > span{
	white-space:nowrap;
}

.endCopy{
	display:block;
	overflow:hidden;
	margin:60px 0 0;
	font-size:2.2rem;
	font-weight:bold;
	line-height:155%;
	color:#002169;
}



/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	#gudeContent > h2{
		font-size:1.8rem;
		margin-top:25px;
	}

	.eachStaps{
		padding:25px;
	}

	.endCopy{
		margin:30px 0 20px;
		font-size:1.8rem;
	}
}



/******************************************
*
介護保険のしくみ
*
******************************************/
#insSystem{
	font-size:1.6rem;
	line-height:125%;
}

#insSystem > p{
	padding-bottom:1em;
	line-height:155%;
}

#insSystem > section{
	margin:2em 0;
}

#insSystem h3.basedTtl{
	font-size:1.6rem;
	color:#002169;
}

#insSystem ul.innerLinks > li{
	width:14%;
	min-width:120px;
	white-space:nowrap;
}

#insSystem ul.innerLinks > li:first-child{
	border-left:1px solid #cccccc;
	width:15%;
}
#insSystem ul.innerLinks > li:last-child{
	width:15%;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#insSystem{
		margin-top:25px;
	}

	#insSystem ul.innerLinks > li,
	#insSystem ul.innerLinks > li:first-child,
	#insSystem ul.innerLinks > li:last-child{
		width:33%;
		min-width:auto;
		margin:0.25em 0;
	}

	#insSystem ul.innerLinks > li:nth-child(3){
		border-left:1px solid #cccccc;
		clear:both;
	}

	#insSystem ul.innerLinks > li:nth-child(6){
		border-left:1px solid #cccccc;
	}
}



/* ---------------------------------------------
*   金額表
---------------------------------------------*/
#insSystem dl{
	display:block;
	overflow:hidden;
}

#insSystem dl > dt{
	clear:both;
	display:block;
	overflow:hidden;
	width:12em;
	font-weight:bold;
	padding:0.75em 0;
	border-top:1px dotted #cccccc;
	float:left;
}

#insSystem dl > dd{
	display:block;
	overflow:hidden;
	width:calc(100% - 12em);
	padding:0.75em 0;
	border-top:1px dotted #cccccc;
	float:left;
}

#insSystem dl > dt:nth-child(1),
#insSystem dl > dd:nth-child(2){
	border-top:none;

}



/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#insSystem dl > dt{
		width:100%;
		padding:0.5em 0;
		border-top:1px dotted #cccccc;
		float:none;
	}

	#insSystem dl > dd{
		display:block;
		overflow:hidden;
		width:auto;
		margin-left:1em;
		padding:0 0 1.0em;
		border-top:none;
		float:none;
	}
}



/******************************************
*
介護保険サービスを受けるには
*
******************************************/
#how{
	font-size:1.6rem;
	line-height:125%;
}

#how p{
	padding-bottom:1em;
	line-height:155%;
}

#how > section{
	margin:2em 0;
}

#how p.idtbox{
	font-size:1.2rem;
	padding:1em 0;
}

#how .zoomImg{
	width:745px;
}

#how .zoomImg > img{
	max-width:745px;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	#how01{
		height:373px;
	}

	#how02{
		height:383px;
	}
	
	/*#how .zoomImg > img{
		width:745px!important;
		max-width:745px!important;
	}*/
}



/******************************************
*
介護保険で利用できるサービス
*
******************************************/
#service{
	font-size:1.6rem;
	line-height:125%;
}

#service > section{
	margin:2em 0;
}

#service ul.innerLinks > li{
	width:33%;
	margin-bottom: 0.5em;
}

#service ul.innerLinks > li:first-child,
#service ul.innerLinks > li:nth-child(4){
	border-left:1px solid #cccccc;
	width:34%;
}



/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	
	#service ul.innerLinks > li{
		width:50%;
	}
	#service ul.innerLinks > li:first-child{
		width:50%;
	}
	#service ul.innerLinks > li:nth-child(4){
		border-left:none;
		width:50%;
	}
	#service ul.innerLinks > li:nth-child(3),
	#service ul.innerLinks > li:nth-child(5){
		border-left:1px solid #cccccc;
	}

}


/******************************************
*
福祉用具レンタル・販売のしくみ
*
******************************************/
#rentsystem{
	font-size:1.6rem;
	line-height:125%;
}

#rentsystem p{
	padding-bottom:1em;
	line-height:155%;
}

#rentsystem p.idtbox{
	font-size:1.2rem;
	padding:1em 0;
}

#rentsystem .zoomImg{
	margin: 1em 0;
}

#rentsystem .zoomImg.firstimg{
	margin: 1em 0 4em;
}

#rentsystem .zoomImg > img{
	width: 100%;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#rentsystem .zoomImg{
		margin: 0.5em 0 1em 0;
	}
    
    #rentsystem .zoomImg.firstimg{
		margin: 0.5em 0 2.5em 0;
	}

	#rentsystem .zoomImg > img{
		width: 600px;
	}
}