@charset "UTF-8";

/*
	メインイメージ
-----------------------------------------------------------------------------------------------*/
#mainImgArea{
	height: 450px;
	position: relative;
}
#topKvOut{
	width: 1040px;
	height: 420px;
	margin: 0 auto;
	background: url("../images/bg_town.png") center bottom no-repeat #EBF5FB;
	background-size: contain;
	border-radius: 15px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.30);
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
}
#topKvIn{
	height: 100%;
	-ms-justify-content: center;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	position: relative;
}
#topKvIn::after{
	content: "";
    width: 142px;
    height: 265px;
	background: url("../images/pic_topKv_left.svg") center center no-repeat;
	background-size: 100%;
	position: absolute;
	left: 55px;
	bottom: -35px;
}
#topKvIn::before{
	content: "";
    width: 157px;
    height: 246px;
	background: url("../images/pic_topKv_right.svg") center center no-repeat;
	background-size: 100%;
	position: absolute;
	right: 50px;
	bottom: -35px;
}
#topTitArea{
	margin: 70px 0 0;
	text-align: center;
}
#topTitArea .tit{
	font-size: 4.6rem;
	position: relative;
}
#topTitArea .tit::before{
	content: "";
    width: 480px;
    height: 94px;
	background: url("../images/bg_haccp.svg") center center no-repeat;
	background-size: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#topTitArea .tit::after{
	content: "";
    width: 153px;
    height: 153px;
	background: url("../images/fkds_topKv.svg") center center no-repeat;
	background-size: 100%;
	position: absolute;
	top: -145px;
	left: -100px;
}
#topTitArea .sub{
	margin: 40px 0 0;
	font-size: 2.5rem;
	font-weight: 700;
	color: #006AB8;
	line-height: 1.2;
}
@media screen and (max-width:667px){
	#mainImgArea{
		height: 385px;
	}
	#topKvOut{
		width: calc(100% - 40px);
		height: 380px;
		border-radius: 10px;
		position: absolute;
		top: -28px;
	}
	#topKvIn::after{
		width: 85px;
		height: 159px;
		left: 10px;
		bottom: -20px;
	}
	#topKvIn::before{
		width: 95px;
		height: 149px;
		right: 10px;
		bottom: -20px;
	}
	#topTitArea{
		margin: -20px 0 0;
	}
	#topTitArea .tit{
		font-size: 3.3rem;
	}
	#topTitArea .tit::before{
		width: 85%;
		height: 100%;
	}
	#topTitArea .tit::after{
		width: 90px;
		height: 89px;
		top: -90px;
		left: -10px;
	}
	#topTitArea .sub{
		margin: 15px 0 0;
		font-size: 1.8rem;
	}
}


/*
	衛生管理の流れ
-----------------------------------------------------------------------------------------------*/
#listPicFlow{
	-ms-justify-content: space-between;
	justify-content: space-between;
	margin: 40px 0 0;
}
#listPicFlow li{
	width: calc((100% - 120px)/3);
	position: relative;
}
#listPicFlow li::after{
	content:' ';
	width:0;
	height:0;
	border-top: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 25px solid #ffcc66;
	position:absolute;
	top: 50%;
	right:-45px;
	transform: translateY(-50%);
}
#listPicFlow li:last-of-type::after{
	content: none;
}
#listPicFlow li .tit{
	margin: 0 0 20px;
	padding: 12px 10px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
	background-color: #006AB8;
	border-radius: 20px;
	line-height: 1.0;
	text-align: center;
}
#listPicFlow li img{
	display: block;
	margin: 0 auto;
}
#listPicFlow li#picFlow01 img{
	width: 200px;
}
#listPicFlow li#picFlow02 img{
	width: 229px;
}
#listPicFlow li#picFlow03 img{
	width: 207px;
}
@media screen and (max-width:667px){
	#listPicFlow{
		display: block;
		margin: 20px 0 0;
	}
	#listPicFlow li{
		width: 250px;
		margin: 0 auto 60px;
	}
	#listPicFlow li:last-of-type{
		margin: 0 auto 0;
	}
	#listPicFlow li::after{
		border-top: 25px solid #ffcc66;
		border-right: 35px solid transparent;
		border-left: 35px solid transparent;
		border-bottom: none;
		top: auto;
		right:50%;
		bottom: -45px;
		transform: translate(50%, 0);
	}
	#listPicFlow li .tit{
		margin: 0 0 15px;
		font-size: 1.6rem;
	}
}


/*
	HACCPに沿った衛生管理の制度化のスケジュール
-----------------------------------------------------------------------------------------------*/
#scheduleArea{
	margin: 50px 0 0;
	padding: 50px;
	background-color: #f7f2e7;
	border-radius: 10px;
}
#scheduleArea .tit{
	font-size: 2.2rem;
	text-align: center;
}
#scheduleArea .pic{
	margin: 10px 0 20px;
}
#scheduleArea .txtLine{
	font-size: 2.4rem;
	font-weight: bold;
	color: #003d7b;
	text-align: center;
	text-decoration: underline;
}
@media screen and (max-width:667px){
	#scheduleArea{
		margin: 25px 0 0;
		padding: 20px;
	}
	#scheduleArea .tit{
		font-size: 1.8rem;
		text-align: center;
	}
	#scheduleArea .pic{
		margin: 15px 0 10px;
	}
	#scheduleArea .txtLine{
		font-size: 1.8rem;
		text-align: left;
	}
}


/*
	HACCPの考え方を取り入れたソフトクリーム衛生管理の取り組み方
-----------------------------------------------------------------------------------------------*/
#torikumikataArea{
	padding: 60px 40px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.30);
	position: relative;
}
#torikumikataArea::before{
	content: '';
	display: block;
	width: 79px;
	height:154px;
	background: url("../images/pic_cook_left.svg") center center no-repeat;
	position: absolute;
	top: -154px;
	right: 80px;
}
#torikumikataArea::after{
	content: '';
	display: block;
	width: 86px;
	height:141px;
	background: url("../images/pic_eigyo.svg") center center no-repeat;
	position: absolute;
	top: -141px;
	left: 85px;
}
.kanriArea{
	margin: 50px 0 0;
}
@media screen and (max-width:667px){
	#torikumikataArea{
		padding: 20px 20px;
		border-radius: 10px;
	}
#torikumikataArea::before{
	width: 40px;
	height:77px;
	top: -77px;
	right: 15px;
}
#torikumikataArea::after{
	width: 44px;
	height:71px;
	top: -71px;
	left: 20px;
}
	.kanriArea{
		margin: 20px 0 0;
	}
}

/* リスト */
#listTebiki{
	-ms-justify-content: space-between;
	justify-content: space-between;
	padding: 40px 0 0;
}
#listTebiki li{
	width: calc((100% - 40px)/2);
}
#listTebiki li > .tit{
	margin: 0 0 20px;
	padding: 10px;
	font-size: 2.0rem;
	color: #fff;
	text-align: center;
	background-color: #00c9c3;
	border-radius: 5px;
	position: relative;
}
#listTebiki li.soft > .tit{
	background-color: #29b5d1;
}
#listTebiki li > .tit::before{
	content: '';
	display: inline-block;
	width: 70px;
	height:58px;
	background: url("../images/pic_shop.svg") center center no-repeat;
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
}
#listTebiki li.soft > .tit::before{
	width: 88px;
	height: 65px;
	background: url("../images/pic_soft_double.svg") center center no-repeat;
	top: -55px;
}
#listTebiki li > .tit::after{
	content: '';
	display: inline-block;
	border-top: 15px solid #00c9c3;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
}
#listTebiki li.soft > .tit::after{
	border-top: 15px solid #29b5d1;
}
#listTebiki li .txt{
	font-weight: bold;
}
.tebikiArea{
	min-height: 350px;
	-ms-justify-content: space-between;
	justify-content: space-between;
	margin: 20px 0 0;
	padding: 20px 20px 40px;
	background-color: #e5faf9;
	position: relative;
}
#listTebiki li.soft .tebikiArea{
	background-color: #eaf8fa;
}
#listTebiki li.shop .tebikiArea::before,
#listTebiki li.shop .tebikiArea::after{
	display: block;
	content: '';
	background-color: #555;
	position: absolute;
	width: 60px;
	height: 10px;
	top: 50%;
	right: -50px;
	transform: translateY(-50%);
	z-index: 10;
}
#listTebiki li.shop .tebikiArea::before{
	width: 10px;
	height: 60px;
	right: -25px;
}
.tebikiArea figure{
	width: 160px;
}
.tebikiArea .txtArea{
	width: calc(100% - 180px);
}
.tebikiArea .txtArea .tit{
	margin: 0 0 10px;
	padding: 0 0 0 12px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
	border-left: 5px solid #00c9c3;
}
#listTebiki li.soft .tebikiArea .txtArea .tit{
	border-left: 5px solid #29b5d1;
}
@media screen and (max-width:667px){
	#listTebiki{
		display: block;
	}
	#listTebiki li{
		width: 100%;
	}
	#listTebiki li > .tit::before{
		width: 50px;
		height:42px;
		top: -35px;
	}
	#listTebiki li.soft > .tit::before{
		width: 60px;
		height: 45px;
		top: -35px;
	}
	#listTebiki li.shop{
		margin: 0 0 115px;
	}
	.tebikiArea{
		min-height: auto;
		display: block;
		margin: 15px 0 0;
		padding: 15px 15px 40px;
	}
#listTebiki li.shop .tebikiArea::before,
#listTebiki li.shop .tebikiArea::after{
	width: 40px;
	height: 8px;
	top: auto;
	bottom: -65px;
	right: 50%;
	transform: translate(50%, 0);
}
#listTebiki li.shop .tebikiArea::before{
	width: 8px;
	height: 40px;
	right: 50%;
	bottom: -81px;
}
	.tebikiArea figure{
		width: 160px;
		margin: 0 auto 15px;
	}
	.tebikiArea .txtArea{
		width: 100%;
	}
	.tebikiArea .txtArea .tit{
		font-size: 1.6rem;
	}
}


.btnDownloadArea{
	-ms-justify-content: center;
	justify-content: center;
	margin: -28px 0 0;
}
.btnDownloadArea a{
	display: inline-block;
	width: 280px;
	padding: 15px 20px 15px 15px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background-color: #00c9c3;
	border-radius: 5px;
	box-shadow: 0 5px 0 0 #00aa9d;
	position: relative;
}
#listTebiki li.soft .btnDownloadArea a{
	background-color: #29b5d1;
	box-shadow: 0 5px 0 0 #24a1b2;
}
.btnDownloadArea a::after{
	content:' ';
	display:block;
	width:8px;
	height:8px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform:translateY(-50%) rotate(45deg);
	transform-origin:0 0;
	position:absolute;
	top:50%;
	right:12px;
}
@media screen and (max-width:667px){
	.btnDownloadArea{
		margin: -28px 0 0;
	}
	.btnDownloadArea a{
		width: calc(100% - 30px);
		padding: 15px 20px 15px 15px;
		font-size: 1.5rem;
	}
}

.txtborderBox{
	margin: 50px 0 0;
	text-align: center;
}
.txtborderBox span{
	display: inline-block;
	padding: 15px 5px 15px 20px;
	font-size: 2.5rem;
	font-weight: 500;
	color: #fff;
	border: 2px solid #fff;
	line-height: 1.0;
}
@media screen and (max-width:667px){
	.txtborderBox{
		margin: 25px 0 0;
	}
	.txtborderBox span{
		padding: 12px;
		font-size: 2.0rem;
		line-height: 1.2;
		text-align: left;
	}
}


/*
	計画の策定・実施の流れ
-----------------------------------------------------------------------------------------------*/
#planFlow .ctsArea{
	padding: 140px 30px 60px;
	position: relative;
}
#planFlow .ctsArea::after{
	content: '';
	display: inline-block;
	width: 120px;
	height: 150px;
	background: url("../images/pic_wh_coat.svg") center center no-repeat;
	position: absolute;
	right: 35px;
	bottom: 0;
	z-index: 10;
}
@media screen and (max-width:667px){
	#planFlow .ctsArea{
		padding: 50px 20px 30px
	}
	#planFlow .ctsArea::after{
		content: none;
	}
}

/* リスト */
#olistPlanFlow > li{
	margin: 0 0 64px;
	position: relative;
}
#olistPlanFlow > li::after{
	content: '';
	display: inline-block;
	width: 620px;
	height: 64px;
	background: url("../images/pic_planFlow_arrow_all_pc.svg") center center no-repeat;
	position: absolute;
	left: 0;
	bottom: -64px;
}
#olistPlanFlow > li:nth-last-of-type(2)::after,
#olistPlanFlow > li:last-of-type::after{
	content: none;
}
.pf_box{
	border-radius: 10px;
	background-color: #fdf7e8;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.30);
	position: relative;
}
.pf_titGryObi{
	padding: 15px 10px;
	font-size: 2.2rem;
	color: #fff;
	background-color: #888;
	text-align: center;
	border-radius: 10px 10px 0 0;
}
.pf_titObiEn{
	padding: 15px 10px;
	font-size: 2.2rem;
	color: #fff;
	background-color: #dc646f;
	text-align: center;
	border-radius: 10px 10px 0 0;
	position: relative;
}
.pf_titObiEn span{
	display: block;
	width: 90px;
	height: 40px;
	padding: 5px 0 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 3.0rem;
	border-radius: 45px 45px 0 0;
	background-color: #dc646f;
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
}
#planB .pf_titObiEn,
#planB .pf_titObiEn span{
	background-color: #006AB8;
}
#planC .pf_titObiEn,
#planC .pf_titObiEn span{
	background-color: #fbbb5e;
}
.pf_ctsArea{
	padding: 30px;
	border-radius: 0 0 10px 10px;
}
.pf_cts{
	text-align: center;
}
.pf_cts .tit{
	margin: 0 0 10px;
	font-size: 1.6rem;
}
.pf_cts .tit span{
	display: -ms-inline-flex;
    display: inline-flex;
	-ms-justify-content: center;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	width: 30px;
	height: 30px;
	margin: 0 5px 0 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 2.0rem;
	color: #fff;
	background-color: #00c9c3;
	border-radius: 50%;
}
.pf_cts div:nth-of-type(2) .tit span{
	background-color: #29b5d1;
}
.pf_cts .pic img{
	height: 100px;
}
.pf_cts .txt{
	padding: 10px 0 0;
	font-size: 1.5rem;
	font-weight: bold;
}
.pf_cts .txt span{
	font-size: 1.4rem;
	font-weight: normal;
}
@media screen and (max-width:667px){
	#olistPlanFlow > li{
		margin: 0 0 40px;
	}
	#olistPlanFlow > li:nth-last-of-type(2){
		margin: 0 0 65px;
	}
	#olistPlanFlow > li:last-of-type{
		margin: 0 0 15px;
	}
	#olistPlanFlow > li::after{
		width: 100%;
		height: 40px;
		background: url("../images/pic_planFlow_arrow_all_left_sp.svg") center center no-repeat;
		bottom: -40px;
	}
	#olistPlanFlow > li:nth-of-type(3)::after{
		background: url("../images/pic_planFlow_arrow_all_right_sp.svg") center center no-repeat;
	}
	.pf_titGryObi{
		padding: 12px 10px;
		font-size: 1.8rem;
	}
	.pf_titObiEn{
		padding: 12px 10px;
		font-size: 1.4rem;
	}
	.pf_titObiEn span{
		width: 60px;
		height: 30px;
		padding: 5px 0 0;
		font-size: 2.5rem;
		border-radius: 30px 30px 0 0;
		top: -25px;
	}
	.pf_ctsArea{
		padding: 15px;
	}
	.pf_cts .tit{
		font-size: 1.5rem;
	}
	.pf_cts .tit span{
		width: 25px;
		height: 25px;
		font-size: 1.6rem;
	}

	.pf_cts .pic img{
		width: 85%;
		height: auto;
	}
	.pf_cts .txt{
		font-size: 1.4rem;
		text-align: left;
	}
}

#pf_jiiko .pf_ctsArea .pic img{
	height: 150px;
}
#pf_jiiko::before{
	content: '';
	display: inline-block;
	width: 124px;
	height: 120px;
	background: url("../images/pic_planFlow02_bg.svg") center center no-repeat;
	position: absolute;
	right: 30px;
	bottom: 0;
	z-index: 10;
}
@media screen and (max-width:667px){
	#pf_jiiko .pf_ctsArea .pic img{
		width: 85%;
		height: auto;
	}
	#pf_jiiko::before{
		content: none;
	}
}

#pf_kiroku li:nth-of-type(1){
	width: 320px;
}
#pf_kiroku li:nth-of-type(2){
	width: 680px;
}
#pf_kiroku li:nth-of-type(2) .flexBox{
	-ms-justify-content: center;
	justify-content: center;
}
#pf_kiroku li:nth-of-type(2) .flexBox div:nth-of-type(1){
	margin: 0 30px 0 0;
}
#pf_kiroku::before{
	content: '';
	display: inline-block;
	width: 94px;
	height: 136px;
	background: url("../images/pic_planFlow03_bg.svg") center center no-repeat;
	position: absolute;
	right: 35px;
	bottom: 0;
	z-index: 10;
}
@media screen and (max-width:667px){
	#pf_kiroku li:nth-of-type(1),
	#pf_kiroku li:nth-of-type(2){
		width: calc((100% - 15px)/2);
	}
	#pf_kiroku li:nth-of-type(2) .flexBox div:nth-of-type(1){
		margin: 0 0 15px 0;
		padding: 0 0 15px 0;
		border-bottom: 1px solid #999;
	}
	#pf_kiroku::before{
		content: none;
	}
}

#pf_planList .pf_ctsArea .pic img{
	width: 190px;
	height: 100%;
}
#pf_planList li:last-of-type .pf_ctsArea .pic img{
	width: 240px;
}
@media screen and (max-width:667px){
	#pf_planList .pf_ctsArea .pic img{
		width: 100%;
	}
	#pf_planList li:last-of-type .pf_ctsArea .pic img{
		width: 100%;
	}
}

#pf_sakusei::before{
	content: '';
	display: inline-block;
	width: 140px;
	height: 130px;
	background: url("../images/pic_planFlow01_bg.svg") center center no-repeat;
	position: absolute;
	right: 50px;
	top: -130px;
	z-index: 10;
}
@media screen and (max-width:667px){
	#pf_sakusei::before{
		content: none;
	}
}

.listPlanFlow2col,
.listPlanFlow3col{
	-ms-justify-content:space-between;
	justify-content:space-between;
}
.listPlanFlow2col li{
	width: calc((100% - 40px)/2);
}
.listPlanFlow2col .pf_cts:nth-of-type(2) .tit span{
	background-color: #29b5d1;
}
.listPlanFlow3col li{
	width: calc((100% - 80px)/3);
	position: relative;
}
.listPlanFlow3col li::after{
	content: '';
	display: inline-block;
	width: 80px;
	height: 64px;
	background: url("../images/pic_planFlow_arrow_red.svg") center center no-repeat;
	position: absolute;
	left: 0;
	top: -64px;
}
.listPlanFlow3col li#planB::after{
	background: url("../images/pic_planFlow_arrow_blue.svg") center center no-repeat;
}
.listPlanFlow3col li#planC::after{
	background: url("../images/pic_planFlow_arrow_yellow.svg") center center no-repeat;
}
@media screen and (max-width:667px){
	.listPlanFlow2col li{
		width: calc((100% - 15px)/2);
	}
	.listPlanFlow3col li{
		width: calc((100% - 30px)/3);
	}
	.listPlanFlow3col li::after{
		width: 50px;
		height: 40px;
		left: 50%;
		top: -65px;
		transform: translateX(-50%);
	}
}