@charset "UTF-8";
/* houkatsu　202602高知市大津・介良地域包括支援センター */

/* ---- 共通 -----*/
.container-houkatsu {
	max-width: 1000px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.houkatsu_wrap h2 {
	color: #222;
 	font-family: "Zen Maru Gothic", serif;
 	font-weight: 500;
	font-size: 26px;
}
.houkatsu_wrap p {
	font-size: 17px;
	line-height: 1.8;
	margin-top: 0;
}
@media (max-width: 767px) {
	.houkatsu_wrap h2 {
		font-size: 22px;
	}
	.houkatsu_wrap p {
		font-size: 15px;
		line-height: 1.7;
	}
}

h2.sec__ttl {
	position: relative;
	padding: 20px 24px 8px 24px;
 	text-align: center;
	margin-bottom: 24px;
}
h2.sec__ttl:before {
  position: absolute;
  bottom: -6px;
  left: calc(50% - 30px);
  width: 60px;
  height: 2px;
  content: '';
  background-color: #EA6D80;
}

img {
	max-width: 100%;
}

.c_pink {
	color: #EA6D80;
	font-weight: bold;
}
.tx_bold {
	font-weight: bold;
}


/*title*/
.houkatsu-header-wrap {
}
.title-area {
  	background-image: url("../houkatsushien/img/houkatsu_header_bg.png");
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: cover;
}
.title-area .container-houkatsu {
  	height: 60px;
	padding-top: 62px;
	padding-bottom: 58px;
  	margin-bottom: 60px;
	display: flex;
	justify-content: space-between;
	position: relative;
}
.title-area h1 {
 	font-family: "Zen Maru Gothic", serif;
 	font-weight: 500;
	font-size: 32px;
	padding-left: 20px;
	letter-spacing: 0.03em;
	color: #222;
}

.header-image {
	position: absolute;
	right: 0;
	top: 0;
	max-width: 272px;
}

@media screen and (max-width:900px) {
	.title-area .container-houkatsu {
		height: 30px;
		padding-top: 50px;
  		margin-bottom: 40px;
	}
	.title-area h1 {
		font-size: 24px;
		padding-left: 0;
	}
	.header-image {
		position: absolute;
		right: 0;
		top: 0;
		max-width: 210px;
	}
}

@media screen and (max-width:600px) {
	.title-area .container-houkatsu {
		height: 84px;
		padding-top: 24px;
  		margin-bottom: 40px;
		padding-bottom: 0;
	}
	.title-area h1 {
		font-size: 20px;
		line-height: 1.5;
	}
	.header-image {
		position: absolute;
		right: 0;
		top: 10px;
		max-width: 146px;
	}
}

/*ボタン*/
.btn-box {
    margin-bottom: 10px;
}
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 200px;
	height: 50px;
 	border-radius: 100vh;
 	border: 2px solid #FF9A9E;
	color: #EA6D80;
	font-size: 17px;
    text-decoration: none;
	transition: 0.3s;
 	font-family: "Zen Maru Gothic", serif;
  	font-weight: 500;
}

.btn01 a {
	background-color: #fff;
}
.btn01 a:hover {
	background-color: #FF9A9E;
    color: #fff;
}
.btn01 a::after {
    content: '';
	position: absolute;
	top: 50%;
	right: 25px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 2px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #EA6D80;
}
.btn01 a:hover::after {
	border-color: #fff #fff transparent transparent;
}
.btn i {
    margin-right: 8px;
}
@media screen and (max-width:800px) {
	.btn a {
		width: 160px;
	}
}
@media screen and (max-width:600px) {
    .btn a {
        width: 170px;
    	font-size: 15px;
    	height: 48px;
        margin: 5px auto;
    }
}
@media screen and (max-width:400px) {
    .btn a {
        width: 148px;
    	font-size: 14px;
        margin: 2px auto;
    }
}


/*about*/
h2.about-houkatsu {
	font-size: 20px;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 20px;
	text-align: center;
}
h2.about-houkatsu:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #EA6D80;
}

#about {
}
.about-inner {
  max-width: 760px;
  margin: 0 auto 60px;
}
.about-inner__text p {
  line-height: 1.8;
  margin-bottom: 8px;
}

@media screen and (max-width: 600px) {
	h2.about-houkatsu {
		font-size: 16px;
		padding-bottom: 12px;
		margin-bottom: 20px;
	}
	.about-inner {
	  margin: 0 auto 24px;
	}
}


/*service*/
#service {
	margin-bottom: 60px;
}
#service .container-houkatsu {
    background: #FFF4F1;
	border-radius: 12px;
	padding-top: 40px;
	padding-bottom: 40px;
}

#service h3 {
	color: #EA6D80;
	font-size: 22px;
	letter-spacing: 0.03em;
	font-style: normal;
	font-weight: 700;
	line-height: 1.7;
	background: #fff;
	padding: 6px 12px;
	border-left: 6px solid #EA6D80;
	margin-bottom: 12px;
}
.service-item {
	margin-bottom: 24px;
}

.service-wrap {
	padding-top: 24px;
	max-width: 760px;
	margin: 0 auto;
}
@media screen and (max-width: 600px) {
	#service {
		margin-bottom: 40px;
	}
	#service .container-houkatsu {
		border-radius: 20px;
		padding-top: 20px;
	}
	.service-wrap {
		padding-top: 20px;
	}
	#service h3 {
		font-size: 18px;
		line-height: 1.5;
	}
}


/*cases*/
#cases {
	margin-bottom: 40px;
}

#cases .container-houkatsu {
	background: url("../houkatsushien/img/cases_bg.png") no-repeat;
	border-radius: 12px;
	padding-top: 60px;
	padding-bottom: 60px;
}
#cases h2 {
	color: #222;
 	font-family: "Zen Maru Gothic", serif;
 	font-weight: 500;
	font-size: 26px;
 	text-align: center;
	margin-bottom: 8px;
}
.soudan {
	color: #FFFAE5;
	font-size: 28px;
	font-weight: 500;
	border-radius: 6px;
	background: #EA6D80;
	padding: 4px 12px;
}
p.okomari {
	color: #222;
 	font-family: "Zen Maru Gothic", serif;
 	font-weight: 500;
	font-size: 28px;
	letter-spacing: 0.03em;
 	text-align: center;
	margin-bottom: 40px;	
}

.cases-inner-list {
	max-width: 55%;
	margin-left: 60px;
}
.cases-inner-list ul {
	margin: 0;
	padding: 0;
}
.cases-inner-list ul li {
	font-size: 20px;
 	font-family: "Zen Maru Gothic", serif;
 	font-weight: 600;
	display: block;
  	padding: 0.4em 0.8em 0.4em 1.4em;
	line-height: 1.6;
	border-bottom: 1px solid #C8C8C8;
 	list-style-type: none!important;
 	position: relative;
}
.cases-inner-list ul li:before {
  font-family: 'Material Icons';
  content: 'square';
 	position: absolute;
 	left : 0;
 	color: #EA6D80;
}

.cases-inner-image {
	max-width: 268px;
	margin-right: 60px;
}

@media screen and (min-width: 768px) {
	.cases-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
@media screen and (max-width: 767px) {
	#cases {
		margin-bottom: 24px;
	}
	#cases .container-houkatsu {
		border-radius: 20px;
		padding-top: 40px;
		padding-bottom: 32px;
	}
	#cases h2 {
		font-size: 22px;
		margin-bottom: 16px;
		text-align: left;
	}
	.soudan {
		font-size: 22px;
		padding: 4px 12px;
		margin-right: 0;
		margin-bottom: 8px;
	}
	p.okomari {
		font-size: 23px;
		text-align: left;
		margin-bottom: 28px;	
	}
	.cases-inner-list {
		max-width: 100%;
		margin-left: 0;
	}
	.cases-inner-image {
		max-width: 70%;
		margin: 32px auto 0;
	}
	.cases-inner-list ul li {
		font-size: 18px;
		font-weight: 500;
		padding: 0.4em 0.8em 0.4em 1.4em;
		line-height: 1.4;
	}
}


/*cases-btn-box*/
.cases-btn-box {
	max-width: 600px;
	margin: 0 auto 60px;
}
.cases-btn-box p {
	text-align: center;
}
.cases-btn-box .btn {
	display: flex;
	justify-content: center;
	align-items: center;	
}
.cases-btn-box .btn a {
	position: relative;
	width: 240px;
	height: 50px;
 	border-radius: 100vh;
 	border: 2px solid #FF9A9E;
	color: #EA6D80;
	background-color:#FFFAE5;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: 0.3s;
}
.cases-btn-box .btn01 a:hover {
	background-color: #FF9A9E;
    color: #fff;
}
@media screen and (max-width:600px) {
	.cases-btn-box {
		margin-bottom: 40px;
	}
}

/*chiiki*/
#chiiki {
	margin-bottom: 80px;
}

#chiiki .container-houkatsu {
	background: #FFF4F1;
	border-radius: 12px;
	padding-top: 40px;
	padding-bottom: 40px;
}

p.chiiki-lead  {
	text-align: center;
	margin-top: 32px;
	margin-bottom: 20px;
}

.chiiki-inner-txt {
	max-width: 45%;
	margin-left: 60px;
}
.chiiki-inner-image {
	max-width: 408px;
	margin-right: 60px;
}
@media screen and (min-width: 768px) {
	.chiiki-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
@media screen and (max-width: 767px) {
	#chiiki {
		margin-bottom: 40px;
	}
	#chiiki .container-houkatsu {
		border-radius: 20px;
		padding-top: 24px;
		padding-bottom: 24px;
	}
	p.chiiki-lead  {
		text-align: left;
	}
	.chiiki-inner-txt {
		max-width: 100%;
		margin-left: 0;
	}
	.chiiki-inner-image {
		margin: 20px auto 12px;
	}
}


/*information*/
#information {
	margin-bottom: 60px;
}

#information h2 {
	border-radius: 8px;
	border: 1px solid #C8C8C8;
	font-size: 24px;
	color: #0068B6;
	text-align: center;
	padding: 12px 16px;
	margin-bottom: 32px;
}

.info-item-wrap {
	width: 60%;
	margin-right: 2%;
}
.info-inner1-image {
	max-width: 340px;
}
@media screen and (min-width: 768px) {
	.info-inner1, .info-inner2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
	}
}
@media screen and (max-width: 767px) {
	#information h2 {
		border: 1px solid #C8C8C8;
		font-size: 20px;
		padding: 12px 16px;
		margin-bottom: 32px;
	}
	.info-item-wrap {
		width: 100%;
		margin-right: 0;
	}
	.info-inner1-image {
		margin: 32px auto 24px;
		max-width: 75%;
	}
}

.info-item {
 	display:flex;
 	justify-content:flex-start;
	align-items: center;
	border-bottom: 1px #C8C8C8 solid;
	padding-top: 4px;
	padding-bottom: 4px;
}
.info-item dt {
	font-size: 14px;
	line-height: 1.5;
 	width: 18%;
 	padding: 10px 0;
	color: #0068B6;
	margin-left: 0;
}
.info-itemm dd {
	font-size: 15px;
	line-height: 1.5;
 	padding: 10px 0;
 	width: 80%;
	margin-left: 0;
}
@media screen and (min-width: 768px) {
	.info-item {
		display:flex;
		justify-content:space-between;
		padding-top: 1px;
		padding-bottom: 1px;
	}
	.info-item dt {
		font-size: 16px;
	    width: 15%;
	 	padding: 12px 0;
	}
	.info-item dd {
		font-size: 16px;
	    width: 80%;
		padding: 12px 0;
	} 
}


.info-inner-map {
	max-width: 62%;
	margin-bottom: 20px;
	margin-right: 2%;
}
.info-inner-access {
	max-width: 340px;	
}

#information h3 {
 	font-family: "Zen Maru Gothic", serif;
	font-size: 20px;
	color: #0068B6;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #C8C8C8;
}

.parking {
	font-size: 20px;
	font-weight: bold;
	color: #0068B6;
	margin-top: 12px;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	.info-inner-map {
		max-width: 100%;
		margin-right: 0;
	}
	.info-inner-access {
		max-width: 100%;	
	}
}


/*contact*/
#contact {
	margin-bottom: 60px;
}
#contact h2 {
	color: #FFF;
	font-family: "Zen Maru Gothic";
	font-size: 28px;
	font-weight: 500;
	border-radius: 12px 12px 0 0;
	border: 1px solid #EA6D80;
	background: #EA6D80;
	padding: 8px;
	text-align: center;
}

.contact-inner {
	border-radius: 0 0 12px 12px;
	border: 1px solid #EA6D80;
	background: #FFFAE5;
	padding: 24px 60px 20px 60px;
}

.contact-inner-txt {
	max-width: 50%;
}
.contact-inner-tel {
	max-width: 50%;
}
@media screen and (min-width: 901px) {
	.contact-inner  {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
	}
}
@media screen and (max-width: 900px) {
	#contact h2 {
		font-size: 20px;
	}
	.contact-inner {
		padding: 16px 24px 8px 24px;
	}
	.contact-inner-txt {
		max-width: 100%;
		margin-bottom: 20px;
	}
	.contact-inner-tel {
		max-width: 100%;
	}
}


.contact-inner-tel p {
	font-size: 16px;
	margin-top: 4px;
}
.tx-tel {
	max-width: 340px;
}
@media screen and (max-width: 600px) {
	.contact-inner-tel p {
		font-size: 15px;
		text-align: center;
	}
}


/*footer*/
.houkatsu-info {
	margin-bottom: 20px;
}
footer.houkatsu h2 {
	font-size: 18px;
	margin-bottom: 16px;
	text-align: left;
}
footer.houkatsu p {
	font-size: 15px;
	margin-top: 0;
	margin-bottom: 6px;
}
footer.houkatsu p a {
	color: #fff;
}
@media screen and (max-width: 600px) {
	footer.houkatsu h2 {
		font-size: 16px;
	}
	footer.houkatsu p {
		font-size: 14px;
	}
}