@charset "utf-8";
/* CSS Document */

/*==============================*/
/* 沿革 */
/*==============================*/
div.historyWrap div.history{
	padding: 48px 16%;
	background: #fff;
}
div.historyWrap div.history:not(:last-child){ margin-bottom: 48px;}
	/* ======= TB ======= */
	@media screen and (min-width: 768px) and (max-width: 1024px){
		section.wrap-g{ padding: 0;}
		div.historyWrap div.history{ padding: 32px 5%;}
		div.historyWrap div.history:not(:last-child){ margin-bottom: 32px;}
		h1.mainTitle{ text-align: center;}
	}
	/* ======= SP ======= */
	@media screen and (max-width: 767px){
		section.wrap-g{ padding: 0;}
		div.historyWrap div.history{ padding: 20px 5%;}
		div.historyWrap div.history:not(:last-child){ margin-bottom: 20px;}
		h1.mainTitle{ text-align: center;}
	}
/*---------------------------------
	Title
---------------------------------*/
div.historyWrap div.history h3{
	position: relative;
	margin-bottom: 16px;
	padding: 0 0 20px 1.5em;
	color: #000;
	border-bottom: 2px solid #A0A0A0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: 0.02em;
}
div.historyWrap div.history h3::before{
	position: absolute; top: 5px; left: 0;
	content: "";
	width: 20px;
	height: 20px;
	border: 1px solid #1a1a1a;
}
	/* ======= TB ======= */
	@media screen and (min-width: 768px) and (max-width: 1024px){
		div.historyWrap div.history h3{
			margin-bottom: 12px;
			padding: 0 0 18px 1.5em;
		}
	}
	/* ======= SP ======= */
	@media screen and (max-width: 767px){
		div.historyWrap div.history h3{
			margin-bottom: 8px;
			padding: 0 0 14px 1.5em;
			font-size: 18px;
		}
		div.historyWrap div.history h3::before{
			top: 3px;
			width: 18px;
			height: 18px;
		}
	}

/*---------------------------------
	Content
---------------------------------*/
/*-- History
------------------------- */
div.historyWrap div.history div.historyContent dl{
	display: flex;
	gap: 40px;
	padding: 24px 0;
}
div.historyWrap div.history div.historyContent dl:not(:last-child){ border-bottom: 1px solid #8F8F8F;}
div.historyWrap div.history div.historyContent dl dt{
	display: flex;
	align-items: center;
	flex: 0 0 140px;
}

/*-- Img
------------------------- */
div.historyWrap div.history div.historyImg{	display: flex;}
div.historyWrap div.history div.historyImg > div{ flex: 1;}
div.historyWrap div.history div.historyImg > div > div{ padding-right: 4px;}
div.historyWrap div.history div.historyImg > div > div > p{ font-size: 14px;}

	/* ======= TB ======= */
	@media screen and (min-width: 768px) and (max-width: 1024px){
		div.historyWrap div.history div.historyContent dl{ padding: 20px 0;}
	}
	/* ======= SP ======= */
	@media screen and (max-width: 767px){
		div.historyWrap div.history div.historyContent dl{ 
			gap: 16px;
			padding: 16px 0;
		}
		div.historyWrap div.history div.historyImg{
			flex-direction: column;
			gap: 16px;
		}
	}
/*---------------------------------
   Sitemap
---------------------------------*/
div.company-outline-sitemap{
	margin: 0 auto 96px auto;
	width: min(800px, 100%);
}
div.company-outline-sitemap ul{
	display: flex;
	gap: 24px 32px;
	flex-wrap: wrap;
}
div.company-outline-sitemap ul li{ width: calc(calc(100% - 32px * 1) / 2);}
div.company-outline-sitemap ul li a{
	position: relative;
	display: block;
	padding: 12px 0 12px 8px;
	border: 1px solid #D9D9D9;
	text-align: center;
}
div.company-outline-sitemap ul li a::before{
	position: absolute; top: 50%; left: 1em;
	content: "";
	width: 12px;
	height: 12px;
	border-top: 1px solid #969696;
	border-right: 1px solid #969696;
	transform: translateY(-50%) rotate(45deg);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.company-outline-sitemap{
			margin: 0 auto 96px auto;
			width: min(640px, 100%);
		}
		div.company-outline-sitemap ul li{ width: 100%;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.company-outline-sitemap{
			margin: 0 auto 96px auto;
			width: 100%;
		}
		div.company-outline-sitemap ul{ gap: 12px;}
		div.company-outline-sitemap ul li{ width: 100%;}
		div.company-outline-sitemap ul li a{ padding: 8px 0 8px 4px;}
	}

/*==============================*/
/* 平成26年　岩渕薬品は創業100周年を迎えました。 */
/*==============================*/
section.anniversaryWrap{
	display: flex;
	align-items: center;
	justify-content: center;
	background: no-repeat center url(https://placehold.jp/16/ccc/ffffff/2000x384.png);
	min-height: 384px;
}
section.anniversaryWrap p{
	color: #fff;
	text-align: center;
	font-size: 32px;
    font-family: "A1 Mincho", serif;
    font-weight: 600;
	letter-spacing: 0.02em;
}
	/* ======= TB ======= */
	@media screen and (min-width: 768px) and (max-width: 1024px){
		section.anniversaryWrap p{ 
			font-size: 28px;
			line-height: 1.618em;
		}
	}
	/* ======= SP ======= */
	@media screen and (max-width: 767px){
		section.anniversaryWrap p{ 
			font-size: 24px;
			line-height: 1.618em;
		}
	}

/*==============================*/
/* 現在、そして未来へ */
/*==============================*/
div.special-movie{
	display: flex;
	align-items: center;
	flex-direction: column;
	color: #000;
    font-family: "A1 Mincho", serif;
    font-weight: 600;
	letter-spacing: 0.02em;
}
div.special-movie h2{
	margin-bottom: 24px;
	font-size: 40px;
}
div.special-movie p{ font-size: 24px;}
div.special-movie div h3{
	margin-bottom: 24px;
	font-size: 24px;
	text-align: center;
}
	/* ======= TB ======= */
	@media screen and (min-width: 768px) and (max-width: 1024px){
		div.special-movie h2{
			margin-bottom: 20px;
			font-size: 32px;
		}
		div.special-movie p{ font-size: 20px;}
	}
	/* ======= SP ======= */
	@media screen and (max-width: 767px){
		div.special-movie h2{
			margin-bottom: 20px;
			font-size: 28px;
		}
		div.special-movie p{ font-size: 20px;}
		div.special-movie div h3{
			margin-bottom: 22px;
			font-size: 22px;
		}
	}