@charset "utf-8";

/* ==============================================
  font
============================================== */
.title_block .caption,
.cnt04 .how_to_eat {
	font-family: YuMincho, 'Yu Mincho', serif;
}

@media all and (-ms-high-contrast:none) {
	.title_block .caption,
	.cnt04 .how_to_eat {
		font-family: 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;
	}
}

/* ==============================================
  title
============================================== */
.title_block {
	height: 190px;
	margin-bottom: 110px;
	background: url(/about/img/bg_title.jpg) repeat 50% 0;
}
.title_block .inner {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.title_block h1 {
	position: relative;
	display: inline-block;
	margin: 10px 148px 0 0;
	padding: 35px 55px 0 0;
}
.title_block h1 .icon {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
.title_block h1 .text {
	position: relative;
	display: inline-block;
	z-index: 2;
}
.title_block .caption {
	padding-right: 30px;
	font-size: 2.0rem;
	line-height: 1.45;
	letter-spacing: .1em;
	text-align: right;
}
.title_block .caption span {
	display: inline-block;
}

@media screen and (max-width: 1099px) {
	.title_block h1 {
		margin: 10px 10px 0 0;
	}
}

@media screen and (max-width: 768px) {
	.title_block {
		height: 44vw;
		margin-bottom: 16vw;
		background: url(/about/img/bg_title.jpg) repeat 50% 0;
	}
	.title_block h1 {
		margin: 6vw 0 0;
		padding: 7vw 6vw 0 0;
	}
	.title_block h1 .icon img {
		width: 12.4vw;
		height: 21.8666666vw;
	}
	.title_block h1 .text img {
		width: 6.8vw;
	}
	.title_block .caption {
		padding-right: 8vw;
		font-size: 4.2666666vw;
	}
	
	
}


/* ==============================================
  contents
============================================== */
.contents {
	padding-bottom: 110px;
}
.contents .inner {
	max-width: 830px;
}
.contents .inner section {
	position: relative;
}
.contents h2 {
	position: absolute;
	z-index: 2;
}
.contents h2 span {
	display: inline-block;
	padding: 25px 0;
	width: 56px;
	text-align: center;
	background: #fff;
}
.contents section > img,
.contents section .reveal_image img {
	margin-bottom: 40px;
}
.contents section > p {
	margin-bottom: 1.5em;
	line-height: 2;
	letter-spacing: -0.025em;
}


.contents .cnt01 h2 {
	top: -50px;
	left: 40px;
}
.contents .cnt02 {
	margin-bottom: 110px;
	padding-bottom: 50px;
	border-bottom: 1px solid #dcdcdc;
}
.contents .cnt02 h2 {
	top: -80px;
	right: 40px;
}
.contents .cnt03 h2 {
	top: -80px;
	left: 40px;
}
.contents .cnt04 h2 {
	top: -88px;
	right: 40px;
}

table {
	font-size: 1.5rem;
	letter-spacing: -0.025em;
	line-height: 1.75;
	border-top: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
}
table th {
	padding: 1.2em 1.2em 1em;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	background: #f9f8f6;
}
table td {
	padding:  1.2em 1.2em 1em;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}

.hyou01 {
	margin-bottom: 130px;
}
.hyou01 th {
	letter-spacing: .2em;
}
.hyou01 .hyou01_c1,
.hyou01 .hyou01_c2,
.hyou01 .hyou01_c3 {
	padding:  .6em .6em .4em;
}
.hyou01 .hyou01_c1 {
	width: 12%;
}
.hyou01 .hyou01_c2 {
	width: 34%;
}
.hyou01 .hyou01_c3 {
	width: 34%;
}

.hyou02 {
	margin-bottom: 120px;
}
.hyou02 th {
	vertical-align: middle;
}
.hyou02 .hyou02_c1 {
	width: 26%;
}
.hyou02 .hyou02_c2 {
	width: 74%;
}

.how_to_eat {
	margin-top: 100px;
	padding: 40px 50px 30px;
	border: 1px solid #dcdcdc;
}
.how_to_eat h3 {
	position: relative;
	display: table;
	margin: -3.5em auto 0;
	padding: 1em;
	font-size: 2.4rem;
	letter-spacing: .2em;
	background: #fff;
}
.how_to_eat ul {
}
.how_to_eat li {
	margin-bottom: 2em;
	padding-left: 120px;
	font-size: 1.8rem;
}
.how_to_eat li:nth-child(1) {
	background: url(/about/img/num01.svg) no-repeat 0 50%;
}
.how_to_eat li:nth-child(2) {
	background: url(/about/img/num02.svg) no-repeat 0 50%;
}
.how_to_eat li:nth-child(3) {
	background: url(/about/img/num03.svg) no-repeat 0 50%;
}
.how_to_eat li:nth-child(4) {
	background: url(/about/img/num04.svg) no-repeat 0 50%;
}
.how_to_eat p.memo {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.contents {
		padding-bottom: 12vw;
	}
	.contents h2 span {
		display: inline-block;
		padding: 3.2vw 0;
		width: 11.6vw;
	}
	.contents h2 span img {
		width: 5.6vw;
		height: auto;
	}
	.contents section > img,
	.contents section .reveal_image img {
		margin-bottom: 6vw;
	}
	.contents section > p {
		margin-bottom: 3.6vw;
		line-height: 1.8;
	}


	.contents .cnt01 h2 {
		top: -10vw;
		left: 5vw;
	}
	.contents .cnt02 {
		margin-bottom: 16vw;
		padding-bottom: 6vw;
	}
	.contents .cnt02 h2 {
		top: -12vw;
		right: 4vw;
	}
	.contents .cnt03 h2 {
		top: -13vw;
		left: 4vw;
	}
	.contents .cnt04 h2 {
		top: -14vw;
		right: 4vw;
	}

	table {
		font-size: 3.6vw;
	}
	table th {
		padding: 1em 1em .8em;
	}
	table td {
		padding: 1em 1em .8em;
	}

	.hyou01 {
		margin-bottom: 20vw;
	}
	.hyou01 th {
		letter-spacing: .2em;
	}
	.hyou01 .hyou01_c1,
	.hyou01 .hyou01_c2,
	.hyou01 .hyou01_c3 {
		padding:  .6em .6em .4em;
	}
	.hyou01 .hyou01_c1 {
		width: 12%;
	}
	.hyou01 .hyou01_c2 {
		width: 34%;
	}
	.hyou01 .hyou01_c3 {
		width: 34%;
	}

	.hyou02 {
		margin-bottom: 24vw;
	}
	.hyou02 th {
		vertical-align: middle;
	}
	.hyou02 .hyou02_c1 {
		width: 26%;
	}
	.hyou02 .hyou02_c2 {
		width: 74%;
	}

	.how_to_eat {
		margin-top: 16vw;
		padding: 2em 3em 4em;
	}
	.how_to_eat h3 {
		margin: -3em auto 0;
		padding: 1em;
		font-size: 5.333333vw;
		line-height: 1.3;
		text-align: center;
	}
	.how_to_eat ul {
	}
	.how_to_eat li {
		position: relative;
		margin-bottom: 1.5em;
		padding-left: 18vw;
		font-size: 3.8666666vw;
		background: none !important;
	}
	.how_to_eat li:before {
		position: absolute;
		left: 0;
		content: '';
		display: inline-block;
		width: 14vw;
		height: 100%;
	}
	.how_to_eat li:nth-child(1):before {
		background: url(/about/img/num01.svg) no-repeat 0 50%;
		background-size: 26vw;
	}
	.how_to_eat li:nth-child(2):before {
		background: url(/about/img/num02.svg) no-repeat 0 50%;
		background-size: 26vw;
	}
	.how_to_eat li:nth-child(3):before {
		background: url(/about/img/num03.svg) no-repeat 0 50%;
		background-size: 26vw;
	}
	.how_to_eat li:nth-child(4):before {
		background: url(/about/img/num04.svg) no-repeat 0 50%;
		background-size: 26vw;
	}
	.how_to_eat p.memo {
		font-size: 3.6vw;
		text-align: left;
	}
}