@charset "UTF-8";
 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
北見鈴木製菓
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.main_col {
	position: relative;
	z-index: 1;
}

#about #hero-area {
	background-image: url(../images/mv01.jpg);
}

.column01 .para {
	top: -124px;
	right: -60px;
	z-index: 0;
}

.column01 h3 {
	font-size: 24px;
	line-height: 2em;
	letter-spacing: 0.15em;
}
.column01 p {
	font-size: 14px;
	line-height: 35px;
}

.column01 h3 + p {
	margin-top: 47px;
}


.column02 ul {
	font-size: 0;
}

.column02 li {
	vertical-align: top;
	width: 285px;
	display: inline-block;
	padding-bottom: 114px;
}

.column02 li .pic + .item_name {
	margin-top: 21px;
}

.column02 li .item_name {
	font-size: 18px;
	line-height: 27px;
}
.column02 li .item_name small {
	font-size: 14px;
}
.column02 li dd small {
	font-size: 12px;
	color: #60c1c0;
}

.column02 li .text + p {
	margin-top: 2px;
}

.column02 li p + .text {
	margin-top: 6px;
}
.column02 li dd .text {
	font-size: 14px;
}

.column02 li:nth-of-type(even) {
	margin-left: 29px;
}

.link {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 100px;
}
.link + .link {
	margin-left: 15px;
}
.link a {
	display: inline-block;
	font-size: 14px;
}
.link a span {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	display: inline-block;
	width: 27px;
	height: 27px;
	font-size: 0;
	border: #505050 1px solid;
	position: relative;
	vertical-align: middle;
	margin-right: 12px;
}
.link a span:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: #505050 1px solid;
	border-bottom: #505050 1px solid;
	position: absolute;
	top: 0;
	bottom: 3px;
	left: 0;
	right: 0;
	margin: auto;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
.link a:hover {
	color: #e63650;
}
.link a:hover span {
	border: #e63650 1px solid;
}
.link a:hover span:before {
	border-right: #e63650 1px solid;
	border-bottom: #e63650 1px solid;
}


@media only screen and (max-width: 1050px) {
	.column01 .para {
		right: 0;
	}
}

@media only screen and (max-width: 960px) {
	.column02 ul {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: calc((100% - 599px)/2);
		padding-right: calc((100% - 599px)/2);
	}
}
@media only screen and (max-width: 866px) {
	.column01 .inner {
		padding-top: 100px;
	}
	.column02 .inner {
		padding-top: 100px;
	}
}

@media only screen and (max-width: 800px) {
	#contents {
    padding-top: 68px;
	}
}

@media only screen and (max-width: 500px) {
	.column01 .para {
		top: -118px;
	}
	.column01 .para img {
		width: 185px;
	}
}

@media only screen and (max-width: 675px) {
	.column02 li:nth-of-type(even) {
		margin-left: calc(100% - 285px * 2);
	}
}
@media only screen and (max-width: 654px) {
	.column02 li {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.column02 li:nth-of-type(even) {
		margin-left: auto;
	}
}