/*********************************************
**********************************************
		imagewrapper
**********************************************
**********************************************/
.imagewrapper {
}
.imagewrapper > img {
	width: 100%;
}
/*********************************************
**********************************************
		introwrapper
**********************************************
**********************************************/
section.intro {
	height: 400px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #DCBF23;
	padding: 0 5%;
	@media (max-width: 389px) {
		height: 300px;
	}
	> div {
		> div {
			font-size: 30px;
			line-height: 1.2em;
			color: #333;
			@media (max-width: 529px) {
				font-size: 26px;
			}
		}
		> p {
			margin: 20px 0 0 0;
			font-size: 16px;
			line-height: 2.5em;
			color: #333;
			@media (max-width: 529px) {
				font-size: 14px;
			}
			@media (max-width: 389px) {
				font-size: 12px;
			}
			@media (max-width: 319px) {
				font-size: 11px;
			}
		}
	}
}

section.giftcatalog {
	background-image: url(./image/giftcatalog_back.webp);
	background-size: cover;
	> div {
		text-align: center;
		padding-block: 50px;
		padding-inline: 5vw;
		> a {
			text-decoration: none;
			&:hover {
				opacity: 0.8;
			}
			> img {
				max-width: 100%;
			}
		}
	}
}

/*------*/
section.catalog {
	padding: 0 5%;
	> div {
		max-width: 860px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 70px 0 0 0;
		@media (max-width:919px) {
			flex-direction: column;
		}
		> div {
			max-width: 520px;
			@media (max-width:919px) {
				max-width: 100%;
			}
			> h2 {
				margin: 0;
				font-size: 30px;
				line-height: 1.5;
				color: #333;
				letter-spacing: 0.1em;
				@media (max-width:919px) {
					text-align: center;
				}
				@media (max-width:579px) {
					font-size: 30px;
				}
			}
			> div {
				border-top: solid 2px #666;
				padding: 10px 0 0 0;
				margin: 24px 0 0 0;
				width: 40px;
				@media (max-width:919px) {
					margin: 24px auto 0 auto;
				}
			}
			> p {
				margin: 0;
				font-size: 17px;
				line-height: 2em;
				color: #333;
				@media (max-width:919px) {
					line-height: 1.8em;
					margin: 18px 0 0 0;
				}
				@media (max-width:579px) {
					font-size: 14px;
				}
			}
			> a.catalog {
				display: inline-block;
				font-size: 16px;
				line-height: 1.5em;
				color: #333;
				margin: 40px 0 0 0;
				text-decoration: none;
				padding: 0 23px 0 0;
				background-image: url(./common/image/icon_external_888.svg);
				background-repeat: no-repeat;
				background-position: 100% 40%;
				@media (max-width:919px) {
					display: none;
				}
			}
			> a.kaitei {
				display: block;
				font-size: 16px;
				line-height: 1.5em;
				color: #333;
				margin: 30px 0 0 0;
				border: solid 1px #666;
				background-color: #eee;
				text-align: center;
				padding: 10px 0;
				text-decoration: none;
			}
			> a.catalog2 {
				display: none;
				font-size: 16px;
				line-height: 1.5em;
				color: #333;
				margin: 15px 0 0 0;
				border: solid 1px #666;
				background-color: #eee;
				text-align: center;
				padding: 10px 0;
				text-decoration: none;
				@media (max-width:919px) {
					display: block;
				}
			}
			> a:hover {
				opacity: 0.7;
			}
		}
		> figure {
			margin: 0;
			@media (max-width:919px) {
				margin: 20px auto 0 auto;
			}
			> a {
				&:hover {
					opacity: 0.7;
				}
				> img {
					border: solid 1px #ccc;
					max-width: 100%;
				}
			}
		}
	}
}

/*------*/
section.giftselect {
	padding: 0 5%;
	@media (max-width:919px) {
		margin-top: 60px;
	}
	> div {
		max-width: 860px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 70px 0 0 0;
		@media (max-width:919px) {
			flex-direction: column;
		}
		> div {
			max-width: 520px;
			@media (max-width:919px) {
				max-width: 100%;
			}
			> h2 {
				margin: 0;
				font-size: 30px;
				line-height: 1.3;
				color: #333;
				letter-spacing: 0.1em;
				@media (max-width:919px) {
					text-align: center;
				}
				@media (max-width:579px) {
					font-size: 30px;
				}
			}
			> div {
				border-top: solid 2px #666;
				padding: 10px 0 0 0;
				margin: 24px 0 0 0;
				width: 40px;
				@media (max-width:919px) {
					margin: 24px auto 0 auto;
				}
			}
			> p {
				margin: 0;
				font-size: 17px;
				line-height: 1.2;
				color: #333;
				@media (max-width:919px) {
					line-height: 1.8em;
					margin: 18px 0 0 0;
				}
				@media (max-width:579px) {
					font-size: 14px;
				}
			}
			> a.catalog {
				display: inline-block;
				font-size: 16px;
				line-height: 1.5em;
				color: #333;
				margin: 40px 0 0 0;
				text-decoration: none;
				padding: 0 23px 0 0;
				background-image: url(./common/image/icon_external_888.svg);
				background-repeat: no-repeat;
				background-position: 100% 40%;
				@media (max-width:919px) {
					display: none;
				}
			}
			> a.kaitei {
				display: block;
				font-size: 16px;
				line-height: 1.5em;
				color: #333;
				margin: 30px 0 0 0;
				border: solid 1px #666;
				background-color: #eee;
				text-align: center;
				padding: 10px 0;
				text-decoration: none;
			}
			> a.catalog2 {
				display: none;
				font-size: 16px;
				line-height: 1.5em;
				color: #333;
				margin: 15px 0 0 0;
				border: solid 1px #666;
				background-color: #eee;
				text-align: center;
				padding: 10px 0;
				text-decoration: none;
				@media (max-width:919px) {
					display: block;
				}
			}
			> a.errata {
				display: inline-block;
				font-size: 16px;
				line-height: 1.5em;
				color: #d00;
				margin: 10px 0 0 0;
				text-decoration: none;
				padding: 0 23px 0 0;
				background-image: url(./common/image/icon_chevron_right_d00.svg);
				background-repeat: no-repeat;
				background-position: 100% 40%;
			}
			> a:hover {
				opacity: 0.7;
			}
		}
		> figure {
			margin: 0;
			@media (max-width:919px) {
				margin: 20px auto 0 auto;
			}
			> a {
				&:hover {
					opacity: 0.7;
				}
				> img {
					border: solid 1px #eee;
					max-width: 100%;
				}
			}
		}
	}
}

/*********************************************
**********************************************
		sectionwrapper
**********************************************
**********************************************/
@media print,screen {
	.sectionwrapper {
		padding: 120px 4% 0 4%;
		text-align: center;
	}
	.sectionwrapper > h2 {
		margin: 0;
		font-size: 30px;
		line-height: 1.2em;
		color: #333;
		letter-spacing: 0.1em;
	}
	.sectionwrapper > div:nth-of-type(1) {
		display: inline-block;
		border-top: solid 2px #666;
		padding: 10px 0 0 0;
		margin: 15px 0 0 0;
		width: 50px;
	}
	.sectionwrapper > div:nth-of-type(2) {
		font-size: 18px;
		line-height: 2em;
		color: #333;
	}
}
@media screen and (max-width:579px) {
	.sectionwrapper > div:nth-of-type(2) {
		font-size: 14px;
	}
}

/*********************************************
**********************************************
		networkwrapper
**********************************************
**********************************************/
@media print,screen {
	#networkwrapper {
		padding: 20px 5% 0 5%;
	}
	#networkwrapper > .inner {
		max-width: 860px;
		margin: 0 auto;
	}
	#networkwrapper > .inner > .box {
		border-top: solid 1px #aaa;
		display: flex;
		justify-content: space-between;
		padding: 40px 20px;
	}
	#networkwrapper > .inner > .box > .text {
	}
	#networkwrapper > .inner > .box > .text > h2 {
		margin: 0;
		font-size: 20px;
		line-height: 1.2em;
		color: #333;
		letter-spacing: 0.1em;
	}
	#networkwrapper > .inner > .box > .text > p {
		font-size: 16px;
		line-height: 1.7em;
		color: #333;
	}
	#networkwrapper > .inner > .box > .text > a {
		display: block;
		border: solid 1px #888;
		text-decoration: none;
		padding: 10px 50px;
		background-color: #eee;
		margin: 10px 0 0 0;
		background-image: url(./common/image/icon_external_888.svg);
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}
	#networkwrapper > .inner > .box > .text > a > span {
		font-size: 15px;
		line-height: 1.2em;
		color: #333;
		padding: 0 30px 0 0;
	}
	#networkwrapper > .inner > .box > .text > a:hover {
		opacity: 0.7;
	}
	#networkwrapper > .inner > .box > .map {
	}
	#networkwrapper > .inner > .box > .map > div,		/*api*/
	#networkwrapper > .inner > .box > .map > iframe {	/*iframe*/
		width: 500px;
		height: 300px;
	}
}
@media screen and (max-width:959px) {
	#networkwrapper > .inner > .box {
		flex-direction: column;
	}
	#networkwrapper > .inner > .box > .text {
		max-width: 300px;
	}
	#networkwrapper > .inner > .box > .map {
		margin: 20px 0 0 0;
	}
	#networkwrapper > .inner > .box > .map > div,		/*api*/
	#networkwrapper > .inner > .box > .map > iframe {	/*iframe*/
		width: 100%;
	}
}
@media screen and (max-width:799px) {
	#networkwrapper > .inner > .box {
		padding: 40px 0;
	}
}
@media screen and (max-width:339px) {
	#networkwrapper > .inner > .box > .text > a {
		padding: 8px 30px;
	}
}

/*********************************************
**********************************************
		news
**********************************************
**********************************************/
section.news {
	padding: 20px 5% 0 5%;
	> div {
		max-width: 960px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		@media (max-width:1009px) {
			flex-direction: column;
			align-items: center;
		}
		> a {
			max-width: 280px;
			text-decoration: none;
			margin: 0 0 30px 0;
			&:hover {
				opacity: 0.7;
			}
			> div {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				> div:nth-of-type(1) {
					font-size: 15px;
					line-height: 1em;
					color: #333;
				}
				> div:nth-of-type(2) {
				}
			}
			> figure {
				margin: 5px 0 0 0;
				width: 280px;
				height: 216px;
				background-color: #eee;
				> img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
			> p {
				font-size: 12px;
				line-height: 1.5em;
				color: #333;
				margin: 5px 0 0 0;
			}
		}
	}
}

/*********************************************
**********************************************
		profilewrapper
**********************************************
**********************************************/
@media print,screen {
	#profilewrapper {
		padding: 0 5%;
	}
	#profilewrapper > .inner {
		max-width: 500px;
		margin: 0 auto;
	}
	#profilewrapper > .inner > table {
		border-collapse: collapse;
		margin: 30px 0 0 0;
	}
	#profilewrapper > .inner > table tr th {
		font-weight: normal;
		font-size: 15px;
		line-height: 1.5em;
		color: #333;
		padding: 4px 10px 4px 0;
		border-right: solid 1px #666;
		vertical-align: top;
		width: 5em;
		text-align-last: justify;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	#profilewrapper > .inner > table tr td {
		font-size: 15px;
		line-height: 1.5em;
		color: #333;
		padding: 4px 0 4px 10px;
		vertical-align: top;
	}
	#profilewrapper > .inner > table tr td > div {
		font-size: 10px;
	}
	#profilewrapper > .inner > table tr td a {
		text-decoration: underline;
		color: #333;
	}
	#profilewrapper > .inner > table tr td a:hover {
		opacity: 0.6;
	}
	#profilewrapper > .inner > table tr td a[target="_blank"]:after {
		content: url(./common/image/icon_external_888.svg);
		margin: 0 3px;
	}
}
@media screen and (max-width:759px) {
	#profilewrapper > .inner > table tr th {
		font-size: 13px;
	}
	#profilewrapper > .inner > table tr td {
		font-size: 13px;
	}
}
@media screen and (max-width:659px) {
	#profilewrapper > .inner > table tr th {
		font-size: 12px;
	}
	#profilewrapper > .inner > table tr td {
		font-size: 12px;
	}
}

/*********************************************
**********************************************
		contactwrapper
**********************************************
**********************************************/
@media print,screen {
	#contactwrapper {
		padding: 0 5%;
		margin: 50px 0 0 0;
	}
	#contactwrapper > .inner {
		max-width: 880px;
		margin: 0 auto;
	}
	#contactwrapper > .inner > p {
		font-size: 17px;
		line-height: 1.7em;
		color: #333;
	}
	#contactwrapper > .inner > div {
		display: flex;
		justify-content: space-between;
	}
	#contactwrapper > .inner > div > div {
		background-color: #eee;
		width: 420px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30px 0;
	}
	#contactwrapper > .inner > div > div > div {
		font-size: 18px;
		line-height: 1em;
		color: #333;
	}
	#contactwrapper > .inner > div > div > h3 {
		margin: 15px 0 0 0;
		font-size: 30px;
		line-height: 1em;
		color: #333;
		font-weight: 700;
	}
	#contactwrapper > .inner > div > div > h4 {
		margin: 8px 0 0 0;
		font-size: 20px;
		line-height: 1em;
		color: #333;
		font-weight: 700;
	}
	#contactwrapper > .inner > div > div > h4 > a {
		text-decoration: none;
		color: #333;
	}
	#contactwrapper > .inner > div > div > p {
		margin: 10px 0 0 0;
		font-size: 14px;
		line-height: 1.5em;
		color: #333;
		text-align: center;
	}
}
@media screen and (max-width:969px) {
	#contactwrapper > .inner > div {
		flex-direction: column;
		align-items: center;
	}
	#contactwrapper > .inner > div > div {
		margin: 7px 0;
	}
}
@media screen and (max-width:779px) {
	#contactwrapper > .inner > p {
		font-size: 15px;
	}
}
@media screen and (max-width:489px) {
	#contactwrapper > .inner > p {
		font-size: 14px;
	}
	#contactwrapper > .inner > div > div {
		width: 100%;
		padding: 20px 10px;
	}
	#contactwrapper > .inner > div > div > div {
		font-size: 15px;
	}
	#contactwrapper > .inner > div > div > h3 {
		font-size: 22px;
	}
	#contactwrapper > .inner > div > div > h4 {
		font-size: 14px;
	}
	#contactwrapper > .inner > div > div > p {
		font-size: 12px;
	}
}

section.career {
	padding: 0 5%;
	> div {
		max-width: 400px;
		margin: 0 auto;
		> table {
			border-collapse: collapse;
			margin: 30px 0 0 0;
			tr {
				th {
					font-weight: normal;
					font-size: 15px;
					line-height: 1.5em;
					color: #333;
					padding: 4px 10px 4px 0;
					border-right: solid 1px #666;
					vertical-align: top;
					width: 7em;
					text-align-last: justify;
					text-align: justify;
					text-justify: inter-ideograph;
					@media (max-width:759px) {
						font-size: 13px;
					}
					@media (max-width:659px) {
						font-size: 12px;
					}
				}
				td {
					font-size: 15px;
					line-height: 1.5em;
					color: #333;
					padding: 4px 0 4px 10px;
					vertical-align: top;
					@media (max-width:759px) {
						font-size: 13px;
					}
					@media (max-width:659px) {
						font-size: 12px;
					}
					> div {
						font-size: 10px;
					}
					a {
						text-decoration: underline;
						color: #333;
						&:hover {
							opacity: 0.6;
						}
						&[target="_blank"]:after {
							content: url(./common/image/icon_external_888.svg);
							margin: 0 3px;
						}
					}
				}
			}
		}
	}
}
section.note {
	padding: 110px 5% 100px 5%;
	> div {
		max-width: 880px;
		margin: 0 auto;
		> div {
			font-size: 13px;
			line-height: 1.4em;
			color: #111;
		}
		> p {
			margin-top: 5px;
			margin-bottom: 0;
			font-size: 13px;
			line-height: 1.6;
			color: #666;
			&.indent {
				margin-left: 1em;
				text-indent: -1em;
			}
		}
	}
}