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

/*
 * Base - SP CSS
 * 基本・スマホ用CSS
 * ========================================================================== */

/* ========================
 * page head
 * ======================== */
.head {
	margin-bottom: 72px;
	background: url("../../../images/pickup/exchangemeeting/04/head_bg.webp") no-repeat center;
	background-size: cover;
}

.head h1 span {
	color: #268fcf;
}

.head h1 span.title_upper,
.head h1 span.title_lower {
	display: flex;
	justify-content: flex-start;
	padding: 0 30px;
	text-align: left;
}

.head h1 span.title_lower span {
	position: relative;
}

.head h1 span.title_lower span::after {
	position: absolute;
	left: auto;
	right: -80px;
	bottom: 0;
	content: '';
	display: block;
	width: 64px;
	height: 64px;
	background: url("../../../images/pickup/exchangemeeting/04/head_glass.svg") no-repeat;
	background-size: contain;

}

.head img {
	margin: 0 30px 0 auto;
	width: 128px;
	transform: translateY(-24px);
}

/* ========================
 * photo gallery
 * ======================== */
.gallery {
	margin: 0 auto;
	width: 298px;
}

.place {
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 24px;
}

/* ========================
 * table
 * ======================== */
.ninzu-table h2 span {
	padding: 0 1em;
	background: #e8464d;
	color: #fff;
	border-radius: 1em;
}

.table-caption {
	display: block;
	margin-bottom: 4px;
	line-height: 24px;
	text-align: right;
}

table {
	width: 100%;
	font-size: 14px;
}

table:first-child {
	border-top: solid 1px #333;
}

table:last-child {
	border-bottom: solid 1px #333;
}

table td {
	width: auto;
	padding: 4px 8px;
	line-height: 24px;
	vertical-align: middle;
}

table tr {
	border-top: dotted 1px #333;
}

table tr td:last-child {
	table-layout: fixed;
	width: 2em;
	background: #fceded;
	text-align: right;
}

div.total {
	padding: 4px 8px;
	border-bottom: solid 1px #333;
	text-align: right;
	font-size: 14px;
	line-height: 24px;
}

/* ========================
 * voice
 * ======================== */
.voice {
	margin-top: 32px;
}

.voice h3 {
	margin-bottom: 24px;
	text-align: right;
}
.voice h3 img {
	margin: 0 auto;
}

.voice_list {
	list-style-position: inside;
	border-bottom: dashed 1px #333;
}

.voice_list li {
	padding: 8px 8px 8px 20px;
	border-top: dashed 1px #333;
	line-height: 24px;
	text-indent: -20px;
}

.voice_list li::marker {
	color: #268fcf;
}


/*
 * Tablet CSS
 * タブレット用CSS
 * ========================================================================== */
@media (min-width: 766px) {

	/* ========================
	 * page head
	 * ======================== */
	.head {
		position: relative;
	}

	.head h1 span {}

	.head h1 span.title_upper,
	.head h1 span.title_lower {}

	.head h1 span.title_lower {}

	.head h1 span.title_lower span::after {
		left: inherit;
		right:-140px;
		width: 100px;
		height: 114px;
	}

	.head img {
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc((100vw - (720px)) / 2);
		margin: auto 0;
		width: 168px;
		transform: translateY(0);
	}

	/* ========================
	 * photo gallery
	 * ======================== */
	.gallery {
		width: 100%;
	}

	.gallery li {
		width: 224px;
	}
	.gallery li:nth-child(2) {
		align-self: flex-end;
		width: 472px;
	}

	.gallery li:nth-child(3n+2) {
		margin-right: 0;
	}

	.place {
		margin-bottom: 16px;
		font-size: 14px;
		line-height: 24px;
	}

	.table-caption {
		display: block;
		margin-bottom: 4px;
		line-height: 24px;
		text-align: right;
	}

	/* ========================
	 * table
	 * ======================== */
	.flex_table {
		display: flex;
	}

	table {
		width: 100%;
	}

	table:first-child {
		margin-right: 24px;
		border-bottom: solid 1px #333;
	}

	table:last-child {
		border-top: solid 1px #333;
	}

	table td {}

	table tr {}

	table tr td:last-child {}

	div.total {}

	/* ========================
	 * voice
	 * ======================== */
	.voice {
		position: relative;
		margin-top: 96px;
	}

	.voice h3 {
		position: absolute;
		top: -64px;
		right: 0;
		margin-bottom: 24px;
		text-align: right;
	}
	.voice h3 img {
		margin: 0 auto;
	}

	.voice_list {
		list-style-position: inside;
		border-bottom: dashed 1px #333;
	}

	.voice_list li {
		padding: 8px 8px 8px 20px;
		border-top: dashed 1px #333;
		line-height: 24px;
		text-indent: -20px;
	}

	.voice_list li::marker {
		color: #268fcf;
	}

}



/*
 * PC CSS
 * コンピュータ用CSS
 * ========================================================================== */

@media (min-width: 1240px) {

	/* ========================
	 * page head
	 * ======================== */
	.head {
		position: relative;
	}

	.head h1 span {}

	.head.type_c h1 span.title_upper,
	.head.type_c h1 span.title_lower {
		padding: 0;
		font-size: 44px;
		line-height: 72px;
	}

	.head.type_c h1 span.title_upper span {
		padding-left: calc((100vw - 1200px) / 2);
	}

	.head.type_c h1 .title_lower span {
		margin-left: calc(((100vw - 1200px) / 2) - 48px);
	}

	.head h1 span.title_lower span::after {}

	.head img {
		right: calc((100vw - (1100px)) / 2);
		width: 290px;
	}

	/* ========================
	 * photo gallery
	 * ======================== */
	.gallery {}

	.gallery li {
		width: 306px;
		margin: 0 30px 30px 0;
	}

	.gallery li:first-child { 
		align-self: flex-end;
	}

	.gallery li:nth-child(2) {
		width: 642px;
	}

	.gallery li:nth-child(3n+2) {
		margin-right: 0;
	}

	.place {}

	/* ========================
	 * table
	 * ======================== */
	.flex_table {
		display: flex;
	}

	.table-caption {}

	table {
		width: 234px;
	}

	table:first-child {}

	table:last-child {}

	table td {}

	table tr {}

	table tr td:last-child {}

	div.total {}

	/* ========================
	 * voice
	 * ======================== */
	.voice {
		margin: 68px 0 0 auto;;
		width: 420px;
	}

	.voice h3 {
		position: absolute;
		top: -64px;
		right: 0;
		margin-bottom: 24px;
		text-align: right;
	}
	.voice h3 img {
		margin: 0 auto;
	}

	.voice_list {
		list-style-position: inside;
		border-bottom: dashed 1px #333;
	}

	.voice_list li {
		padding: 8px 8px 8px 20px;
		border-top: dashed 1px #333;
		line-height: 24px;
		text-indent: -20px;
	}

	.voice_list li::marker {
		color: #268fcf;
	}

}