@charset "UTF-8";

/* ========================================================
  
  FV

======================================================== */
.m_img {
    background-image: url(../images/prevention/m_img@2x.jpg);
}



/* ========================================================
  
  content

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


/*---------------------------------------------------------
 vaccine
---------------------------------------------------------*/
#vaccine .com_box__bg {
	margin-bottom: 8px;
}
#vaccine .com_box__bg .inbox {
	border-top: 2px solid #000;
	padding:  1.5em 3.6%;
	margin-top: 4%;
}
#vaccine .type + .type {
	padding-top: 1.5em;
	margin-top: 1.5em;
	border-top: 1px dashed #ccc;
}
#vaccine .type dt {
	position: relative;
	min-width: 5.4em;
	text-align: center;
	color: #FFF;
	font-size: min(150%,2.4vw);
	font-weight: var(--fw_bold);
	line-height: 1.5;
	letter-spacing: .2em;
	background-color: var(--color_lgrn);
	box-sizing: border-box;
	padding: .4em;
}
#vaccine .type.color_blu dt {background-color: var(--color_lblu);}
#vaccine .type.color_yel dt {background-color: var(--color_yel);}

#vaccine .cycle {
	width: 85%;
	max-width: 710px;
	margin: 0 auto 5%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#vaccine .com_box__bg {
    padding: 6% 8%;
}
#vaccine .type {
	display: flex;
	align-items: center;
}
#vaccine .type dt {
	margin-right: 1em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#vaccine .com_box__bg {
	margin-bottom: 6px;
}
#vaccine .com_box__bg .inbox {
	padding:  1.2em 1%;
}
#vaccine .type dt {
	font-size: 110%;
	margin-bottom: .6em;
}
#vaccine .cycle {
	width: 100%;
}
}

/*type-tbl
---------------------------------------------------------*/
.type-tbl {
	width: 100%;
	line-height: 1.5;
}
.type-tbl.tbl__head {
	width: calc(100% + 10px);
	border-spacing: 5px 8px;
	margin: 5% -5px auto -5px;
}
.type-tbl th,
.type-tbl td {
	width: 25%;
	box-sizing: border-box;
	padding: .5em .6em;
}
.type-tbl th:first-of-type {
	width: 50%;
}

.type-tbl thead th {
	font-size: 125%;
	letter-spacing: .2em;
	border-radius: 5px;
}
.type-tbl thead th:nth-child(1) {
	border: 1px solid #000;
}
.type-tbl thead th:nth-child(2) {
	color: #FFF;
	background-color: var(--color_lgrn);
}
.type-tbl thead th:nth-child(3) {
	color: #FFF;
	background-color: var(--color_lblu);
}

.type-tbl tbody tr:nth-child(odd) {
	background-color: #f3f4f5;
}
.type-tbl tbody th {
	text-align: left;
}
.type-tbl tbody td {
	text-align: center;
	color: var(--color_lgrn);
	font-size: 125%;
}
.type-tbl tbody td:nth-child(3) {
	color: var(--color_lblu);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.type-tbl tbody th {
	padding-left: 3em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.type-tbl {
	font-size: 90%;
}
.type-tbl th,
.type-tbl td {
	width: 21%;
}
.type-tbl th:first-of-type {
	width: 56%;
}
.type-tbl thead th {
	font-size: 105%;
	letter-spacing: .1em;
}
.type-tbl tbody td {
	font-size: 100%;
}
}



/*---------------------------------------------------------
 schedule
---------------------------------------------------------*/
#schedule .com_h__bld {
	width: 26em;
	max-width: 100%;
	text-align: center;
	border-bottom: 1px solid currentColor;
	padding-bottom: .6em;
	margin: 0 auto 6%;
}
/*sche_graph
---------------------------------------------------------*/
.sche_graph {
	position: relative;
	text-align: center;
	font-size: min(1.4vw,112%);
	letter-spacing: .1em;
	line-height: 1.5;
	padding: 0 4.5% 4.5%;
}
.sche_graph::before {
	position: absolute;
	content: "";
	background-color: #edeeef;
	width: 100%;
	height: 94%;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.sche_graph ul {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12,1fr);
}
.sche_graph ul li {
	position: relative;
	color: #FFF;
	white-space: nowrap;
	box-sizing: border-box;
	padding: .4em;
}
/* graph-head */
.sche_graph .graph-head {
	width: calc(100% + 9px);
	left: 50%;
	translate: -50% 0;
}
.sche_graph .graph-head li {
	background-color: #858d95;
	border-radius: 5px;
	margin: 0 4.5px;
}
.sche_graph .graph-head li span {
	font-size: 138%;
}
/* graph-body */
.sche_graph .graph-body {
	overflow: hidden;
	row-gap: 10px;
	padding: 3.2% 0;
	margin-top: 4%;
}
.sche_graph .graph-body::before {
	position: absolute;
	display: block;
	content: "";
	background-image: repeating-linear-gradient(
		to bottom,
		#b2b2b2 0 2px,
		transparent 2px 4px
	);
	background-size: 1px 4px;
	mask-image: repeating-linear-gradient(
		to left,
		black 0px,
		black 1px,
		transparent 1px,
		transparent calc(100% / 12) 
	);
	-webkit-mask-image: repeating-linear-gradient(
		to left,
		black 0px,
		black 1px,
		transparent 1px,
		transparent calc(100% / 12) 
	);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	clip-path: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 100%, 0 100%);
}
.sche_graph .graph-body li {
	font-size: 112%;
}
.sche_graph .graph-body li.bar_combined {
	grid-column: 1/13;
	background-color: rgba(104,154,193,0.85);
}
.sche_graph .graph-body li.bar_rabies {
	grid-column: 2/5;
	background-color: rgba(162,149,176,0.85);
}
.sche_graph .graph-body li.bar_filaria {
	grid-column: 2/12;
	background-color: rgba(123,193,141,0.85);
}
.sche_graph .graph-body li.bar_flea-and-tick {
	grid-column: 1/13;
	background-color: rgba(234,174,87,0.85);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.sche_graph {
	font-size: 70%;
	padding: 0 4.5% 7%;
}
.sche_graph .graph_wrap {
	width: 150vw;
}
/* graph-head */
.sche_graph .graph-head {
	width: calc(100% + 4px);
}
.sche_graph .graph-head li {
	margin: 0 2px;
}
/* graph-body */
.sche_graph .graph-body {
	row-gap: 10px;
	padding: 3.2% 0;
	margin-top: 4%;
}
}



/*---------------------------------------------------------

---------------------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}