@charset "UTF-8";

#pagePoint1 #pageTopTitArea .sub::before{
	background: url("../images/fkds_point1.svg") center center no-repeat;
}
#pagePoint1 #pageTopKvOut::after{
	content: '';
	display: inline-block;
	width: 120px;
	height: 150px;
	background: url("../images/pic_wh_coat.svg") center center no-repeat;
	position: absolute;
	right: 70px;
	bottom: 0;
}
@media screen and (max-width:667px){
	#pagePoint1 #pageTopKvOut::after{
		width: 52px;
		height: 65px;
		right: 15px;
	}
}


/*
	ソフトクリームの衛生管理における“フリーザーの衛生管理ポイント”とは？
-----------------------------------------------------------------------------------------------*/
/* table */
#tblKomoku{
	width:100%;
	margin: 80px 0 60px;
	border-collapse:collapse;
	border-spacing:0;
	line-height:1.6;
}
#tblKomoku td{
	font-size: 1.6rem;
	font-weight: bold;
	border-top:5px solid #fff;
	border-left:5px solid #fff;
	background-color: #defaf8;
}
#tblKomoku th,
#tblKomoku td{
	padding: 15px 20px;
}
#tblKomoku thead th{
	height: 70px;
	font-size: 1.8rem;
	color: #fff;
    font-weight: bold;
    border-left: 5px solid #fff;
    background-color: #00c9c3;
	position: relative;
}
#tblKomoku thead th:nth-of-type(2)::before,
#tblKomoku thead th:nth-of-type(3)::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
#tblKomoku thead th:nth-of-type(2)::before{
	width: 70px;
	height:58px;
	background: url("../images/pic_shop.svg") center center no-repeat;
	top: -50px;
}
#tblKomoku thead th:nth-of-type(3)::before{
	width: 88px;
	height: 65px;
	background: url("../images/pic_soft_double.svg") center center no-repeat;
	top: -55px;
}
#tblKomoku thead th:last-of-type{
	background-color: #29b5d1;
}
#tblKomoku thead th:first-of-type{
	width: 70px;
	background-color: #fff;
}
#tblKomoku tbody th{
	width: 70px;
    border-top: 5px solid #fff;
    background-color: #006AB8;
}
#tblKomoku tbody th.red{
	background-color: #dd646e;
}
#tblKomoku tbody th span{
	min-height: 80px;
	font-size: 1.8rem;
	color: #fff;
    font-weight: bold;
	writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
}
#tblKomoku tbody td:nth-of-type(2){
	background-color: #e5f8fa;
}
#tblKomoku tbody td > span{
	color: #868686;
}
@media screen and (max-width:667px){
	#tblKomoku{
		table-layout: fixed;
		margin: 40px 0 25px;
	}
	#tblKomoku td{
		font-size: 1.5rem;
		line-height: 1.3;
	}
	#tblKomoku th,
	#tblKomoku td{
		padding: 10px 12px;
	}
	#tblKomoku thead th{
		font-size: 1.6rem;
	}
	#tblKomoku thead th:nth-of-type(2)::before{
		width: 50px;
		height: 42px;
		top: -35px;
	}
	#tblKomoku thead th:nth-of-type(3)::before{
		width: 60px;
		height: 45px;
		top: -35px;
	}
	#tblKomoku thead th:first-of-type{
		width: 50px;
	}
	#tblKomoku tbody th{
		width: 50px;
	}
	#tblKomoku tbody th span{
		font-size: 1.6rem;
	}
}

/* ブルー帯エリア */
#tblKomoku tr.obi td:nth-of-type(1){
	padding: 15px 0;
}
#tblKomoku tr.obi td:nth-of-type(2){
	padding: 15px 0;
}
#tblKomoku tr.obi td:nth-of-type(1) span,
#tblKomoku td:nth-of-type(2) span{
	display: block;
	padding: 10px 20px;
	color: #fff;
	background-color: #006AB8;
	border-radius: 23px 0 0 23px;
}
#tblKomoku tr.obi td:nth-of-type(2) span{
	border-radius: 0 23px 23px 0;
}
@media screen and (max-width:667px){
	#tblKomoku tr.obi td:nth-of-type(1){
		padding: 10px 0;
	}
	#tblKomoku tr.obi td:nth-of-type(2){
		padding: 10px 0;
	}
	#tblKomoku tr.obi td:nth-of-type(1) span,
	#tblKomoku td:nth-of-type(2) span{
		padding: 10px 15px;
		border-radius: 10px 0 0 10px;
	}
	#tblKomoku tr.obi td:nth-of-type(2) span{
		border-radius: 0 10px 10px 0;
	}
}


/*
	ソフトクリームの衛生管理のポイント
-----------------------------------------------------------------------------------------------*/
#olistpoint{
	-ms-justify-content: center;
	justify-content: center;
	margin: 50px 0 30px;
}
#olistpoint li{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
	-ms-justify-content: center;
	justify-content: center;
	width: 230px;
	height: 230px;
	margin: 0 40px 0 0;
	border-radius: 50%;
	background: url("../images/pic_freezer_kirakira.svg") center bottom -30px no-repeat #29b5d1;
	background-size: 80px 110px;
	position: relative;
}
#olistpoint li:last-of-type{
	margin: 0 0 0 0;
}
#olistpoint li .num{
	font-family: 'Quicksand', sans-serif;
	font-size: 6.0rem;
	font-weight: 700;
	line-height: 1.0;
	color: #006AB8;
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
}
#olistpoint li .txt{
	margin: -30px 0 0;
	font-size: 2.0rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}
@media screen and (max-width:667px){
	#olistpoint{
		display: block;
		margin: 30px 0 15px;
	}
	#olistpoint li{
		width: 200px;
		height: 200px;
		margin: 0 auto 40px;
	}
	#olistpoint li:last-of-type{
		margin: 0 auto 0;
	}
	#olistpoint li .num{
		font-size: 5.0rem;
		top: -20px;
	}
	#olistpoint li .txt{
		margin: -40px 0 0;
		font-size: 1.7rem;
	}
}


/*
	「いつ」「どのように」「問題があったとき」で明文化！
-----------------------------------------------------------------------------------------------*/
#meibunka .ctsArea02{
	padding: 140px 30px 60px;
	position: relative;
}
#meibunka .ctsArea02::after{
	content: '';
	display: inline-block;
	width: 200px;
	height: 150px;
	background: url("../images/pic_wh_coat_point.svg") center center no-repeat;
	position: absolute;
	left: -90px;
	bottom: 0;
	z-index: 10;
}
.ctsMeibunkaArea{
	-ms-justify-content: space-between;
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
}
.ctsMeibunkaArea .txtArea{
	width: calc(100% - 300px);
}
.ctsMeibunkaArea .txtArea .titYellowLine,
.ctsMeibunkaArea .txtArea .txtNml{
	text-align: left;
}
.ctsMeibunkaArea figure{
	width: 300px;
}
@media screen and (max-width:667px){
	#meibunka .ctsArea02{
		padding: 50px 20px 30px;
	}
	#meibunka .ctsArea02::after{
	content: none;
	}
	.ctsMeibunkaArea{
		display: block;
	}
	.ctsMeibunkaArea .txtArea{
		width: 100%;
	}
	.ctsMeibunkaArea figure{
		width: 80%;
		margin: 15px auto;
	}
}

/* table */
#tblKeikakuArea{
	margin: 40px 0 50px;
}
.tblKeikaku{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	line-height:1.6;
	position: relative;
}
.tblKeikaku tbody{
	display: block;
	padding: 5px 0;
	background-color: #fff;
	border-top: 1px solid #bec6c6;
}
.tblKeikaku tbody:last-of-type{
	border-bottom: 1px solid #bec6c6;
}
.tblKeikaku th,
.tblKeikaku td{
	padding: 15px 20px;
}
.tblKeikaku th{
	width: 180px;
	font-size: 1.6rem;
	color: #fff;
	background-color: #006AB8;
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	line-height: 1.2;
}
.tblKeikaku tr:first-of-type th{
	border-top: none;
}
.tblKeikaku td{
	border-bottom: 2px dotted #bec6c6;
}
.tblKeikaku tr:last-of-type td{
	border-bottom: none;
}
@media screen and (max-width:667px){
	#tblKeikakuArea{
		margin: 20px 0 15px;
	}
	.tblKeikaku tr,
	.tblKeikaku th,
	.tblKeikaku td{
		display: block;
	}
	.tblKeikaku tbody{
		margin: 0 0 15px;
		padding: 0 0;
		border-top: none;
	}
	.tblKeikaku tbody:last-of-type{
		margin: 0 0 0;
		border-bottom: none;
	}
	.tblKeikaku tr:first-of-type th:first-of-type{
		border-bottom: 1px solid #fff;
		border-radius: 5px 5px 0 0;
	}
	.tblKeikaku th{
		padding: 10px;
	}
	.tblKeikaku td{
		padding: 15px 15px 20px;
	}
	.tblKeikaku th{
		width: 100%;
		border-top: none;
		border-right: none;
	}
	.tblKeikaku td{
		border-bottom: none;
	}
}

.tblKeikaku tbody:nth-of-type(2) th{
	background-color: #29b5d1;
}
.tblKeikaku tbody:nth-of-type(3) th{
	background-color: #00c9c3;
}
.tblKeikaku tbody:nth-of-type(4) th{
	background-color: #efbb60;
}


/*
	point
-----------------------------------------------------------------------------------------------*/
#pagePoint1 #listPoint li{
	width: 430px;
}
#pagePoint1 #listPoint li #point2{
	background: url("../images/pic_freezer.svg") right 55px bottom no-repeat #fff;
	background-size: 53px 99px;
}
@media screen and (max-width:667px){
	#pagePoint1 #listPoint li{
		width: 100%;
	}
	#pagePoint1 #listPoint li #point2{
		background: url("../images/pic_freezer.svg") right 20px bottom no-repeat #fff;
		background-size: 53px 99px;
	}
}