@charset "UTF-8";

/*---------------------------------------------------------
メインイメージ
---------------------------------------------------------*/
.contentspage .m_img_area{
	background-image:url("../images/cat/m_img@2x.jpg");
}

/*---------------------------------------------------------
共通
---------------------------------------------------------*/
.bg_green{
	background-color: #5db9a1;
	color:#fff;
}
.med_title.--green{
	background: #98cabb;
}
.med_title.--green::after{
	background: url(../images/med_bar_r_green.svg) no-repeat right top;
}
.med_title.--green::before{
	background: url(../images/med_bar_l_green.svg) no-repeat left bottom;
}

@media only screen and (max-width: 767px){
	.med_title.--green::after{
		background-size: 50% auto;
	}
	.med_title.--green::before{
		background-size: 50% auto;
	}
}

/*---------------------------------------------------------
猫ちゃんに優しいポイント
---------------------------------------------------------*/
.cat_point{
	position: relative;
	z-index: 0;
}
.cat_point::before{
	content:"";
	display: inline-block;
	width: 60%;
	max-width: 800px;
	height: auto;
	aspect-ratio: 620 / 472;
	background-image: url(../images/cat/bg1.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right:0;
	top:0;
	z-index: -1;
}
.cat_point .intro_ttl{
	text-align: center;
}
.cat_point .intro_ttl .en{
	font-size: 430%;
	line-height: 1;
	letter-spacing: 0.18em;
	opacity:0.3;
}
.cat_point .intro_ttl .ja{
	line-height: 1.5;
    letter-spacing: 0.1em;
	margin-top: 32px;
}
.cat_point .intro_ttl .l-txt{
	font-size: 312%;
	margin-right: -0.1em;
}
.cat_point .intro_ttl .s-txt{
	font-size: 250%;
}
.cat_point .intro_ttl .s-txt:first-of-type{
	letter-spacing: 0.2em;
}
.cat_point .main_ttl{
	text-align: center;
	background-color: #fff;
	position: relative;
	padding:30px 4% 50px 4%;
	margin-top: 64px;
}
.cat_point .main_ttl::before{
	content:"";
	display: inline-block;
	background-repeat: no-repeat;
	width: 4em;
	height: 4em;
	aspect-ratio: 1 / 1;
}
.cat_point .main_ttl.--clinic::before{
	background-image: url(../images/cat/icon_clinic.svg);
}
.cat_point .main_ttl.--relief::before{
	background-image: url(../images/cat/icon_relief.svg);
}
.cat_point .main_ttl .en{
	color:#2b3141;
	font-size: 125%;
	margin-top: -0.8em;
}
.cat_point .main_ttl .ja{
	color:#5db9a1;
	font-size: 218%;
	letter-spacing: 0.2em;
	margin-top: 16px;
}
.cat_point .cat_point_item:nth-of-type(2){
	margin-top: 80px;
}
.cat_point .point_list_item{
	display: flex;
	align-items: center;
	gap: 6%;
	margin-top: 64px;
}
.cat_point .point_list_item .ttl{
	font-size: 206%;
	line-height: 1.5;
	letter-spacing: 0.08em;
	position: relative;
}
.cat_point .point_list_item .txt{
	margin-top: 64px;
	width: 90%;
}
.cat_point .point_list_item .cont_wrap{
	width: 48%;
}
.cat_point .point_list_item .img_wrap{
	max-width: 48%;
}
.cat_point .point_list_item .ttl::before{
	content:"";
	display: inline-block;
	width: 115%;
	height:1px;
	background-color: #fff;
    position: absolute;
	bottom: -1.0em;
    right: 0;
}
.cat_point .point_list_item.--order .ttl::before{
	left:0;
}
.cat_point .point_list_item.--order .ttl,
.cat_point .point_list_item.--order .txt{
	padding-left: 8%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px){
.cat_point .point_list_item .ttl{
	font-size: 165%;
}
}


/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.cat_point .intro_ttl .en{
	font-size: 200%;
}
.cat_point .intro_ttl .ja{
	margin-top: 4%;
}
.cat_point .intro_ttl .l-txt{
	font-size: 200%;
}
.cat_point .intro_ttl .s-txt{
	font-size: 150%;
}
.cat_point .main_ttl{
	padding: 4% 2% 6% 2%;
	margin-top: 8%;
}
.cat_point .main_ttl::before{
	width: 3em;
	height: 3em;
}
.cat_point .main_ttl .en{
	font-size: 100%;
}
.cat_point .main_ttl .ja{
	font-size: 160%;
	margin-top: 2%;
}
.cat_point .cat_point_item:nth-of-type(2){
    margin-top: 12%;
}
.cat_point .point_list_item{
	flex-direction: column;
	gap: 1em;
	margin-top: 10%;
}
.cat_point .point_list_item .ttl{
	font-size: 160%;
}
.cat_point .point_list_item .txt{
	margin-top: 6%;
	width: 100%;
}
.cat_point .point_list_item .cont_wrap{
	width: 100%;
}
.cat_point .point_list_item .img_wrap{
	max-width: 100%;
}
.cat_point .point_list_item .ttl::before{
	width: 100%;
	bottom: -0.5em;
}
.cat_point .point_list_item.--order .ttl,
.cat_point .point_list_item.--order .txt{
	padding-left: 0;
}
.cat_point .point_list_item.--order .cont_wrap{
	order:2;
}
.cat_point .point_list_item.--order .img_wrap{
	order:-1;
}
}

/*---------------------------------------------------------
猫ちゃんによくある病気
---------------------------------------------------------*/
.disease .intro_txt{
	text-align: center;
}
.disease .disease_item {
	margin-top: 64px;
}
.disease .disease_item .ttl{
	font-size: 187%;
	color:#354f72;
	border-bottom: 1px solid #354f72;
	padding-bottom: 16px;
}
.disease .symptoms_wrap{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5em;
	width: 95%;
	margin-inline:auto;
	margin-top: 40px;
}
.disease .symptoms_item{
	font-weight: bold;
	background-color: #f7f7f7;
	padding: 1em 1em 1em 4em;
	position: relative;
}
.disease .symptoms_item::before {
    content: "";
    background: url(../images/cat/check.svg) no-repeat left top;
    background-size: contain;
    width: 2em;
    height: auto;
	aspect-ratio: 27 / 22;
    position: absolute;
    left: 1.5em;
	top:50%;
    transform:translateY(-50%);
}


/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
.disease .intro_txt{
	text-align: left;
}
.disease .disease_item {
	margin-top: 10%;
}
.disease .disease_item .ttl{
	font-size: 145%;;
	padding-bottom: 2%;
}
.disease .symptoms_wrap{
	grid-template-columns: repeat(1, 1fr);
	gap: 0.5em;
	width: 100%;
	margin-top: 6%;
}
.disease .symptoms_item{
	padding: 1em 1em 1em 3em;
}
.disease .symptoms_item::before {
    width: 1.5em;
	left: 1em;
}
}


/*---------------------------------------------------------
猫ちゃんの来院ストレスを減らすコツ
---------------------------------------------------------*/
.stress .com_lead.wh .ft_shuei{
	color:#fff;
	margin-bottom: 48px;
}
.stress .point_wrap{
	display: grid;
	/* grid-template-columns: repeat(4, 1fr); */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 4em 3%;
}
.stress .point_wrap .img_wrap{
	text-align: center;
	width: 100%;
}
.stress .point_wrap .ttl{
	font-size: 137%;
	font-weight: bold;
	text-align: center;
	margin-top: 24px;
}
.stress .point_wrap .txt{
	margin-top: 8px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px){
.stress .point_wrap{
	gap: 4em 6%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
.stress .com_lead.wh .ft_shuei{
	margin-bottom: 6%;
}
.stress .point_wrap{
	grid-template-columns: repeat(1, 1fr);
	gap: 3em;
}
.stress .point_wrap .img_wrap img{
	width: 85%;
}
.stress .point_wrap .ttl{
	font-size: 150%;
	letter-spacing: 0.04em;
	margin-top: 6%;
}
.stress .point_wrap .txt{
	margin-top: 2%;
}
}


/*---------------------------------------------------------
診療の流れ
---------------------------------------------------------*/
.flow .flow_subbox{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flow .flow_subbox .ttl{
	padding-right: 5%;
	border-right: 1px solid #2b3141;
}
.flow .flow_subbox .ttl .en{
	font-size: 212%;
	color:#354f72;
	letter-spacing: 0.2em;
}
.flow .flow_subbox .ttl .ja{
	font-size: 112%;
	color:#757983;
	margin-top: 4%;
}
.flow .flow_subbox .link_tel{
	margin:0 4%;
}
.flow .flow_subbox .link_web{
	background-color: #e7e7e7;
	border-bottom: 2px solid #86b6dd;
	width: 20%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
.flow .flow_subbox{
	flex-direction: column;
}
.flow .flow_subbox .ttl{
	padding-right: 0;
	padding-bottom: 4%;
	margin-bottom: 6%;
	border-right: none;
	border-bottom: 1px solid #2b3141;
	width: 100%;
    text-align: center;
}
.flow .flow_subbox .ttl .en{
	font-size: 185%;
}
.flow .flow_subbox .ttl .ja{
	font-size: 106%;
	margin-top: 1%;
}
.flow .flow_subbox .link_tel{
	width: 80%;
}
.flow .flow_subbox .link_tel img{
	width: 100%;
}
.flow .flow_subbox .link_web{
	width: 100%;
    height: 5em;
	margin-top: 6%;
}
.flow .flow_subbox .link_web img{
	width: 40%;
}
}