@charset "UTF-8";

/*
Theme Name: THE GRAPHIC DESIGN FINAL EXHIBITION 2024
Theme URI: https://graph.tuad.ac.jp/fe2024/
Author: TUAD
Author URI: https://www.tuad.ac.jp/
Description: 
Version: 1.0
*/
:root {
	--color_black: #000000;
}

::selection {
	color: #ffffff;
	background-color: #15714c;
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--color_black);
	font-size: 13px;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

header,
main,
footer {
	width: 100%;
}

a {
	color: var(--color_black);
	text-decoration: none;
	transition: opacity 0.4s ease;
}

a:hover {
	opacity: 0.5;
}

figure {
	margin: 0;
}

img,
video {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

p {
	margin-bottom: 1.5em;
}

p:last-child {
	margin-bottom: 0;
}

.wrapper {}

/*--汎用--*/
.pc,
.tb {
	display: none;
}

.sp {
	display: block;
}

.inner {
	padding-right: 30px;
	padding-left: 30px;
}

.common_padding {
	padding-right: 30px;
	padding-left: 30px;
}

.common_section {
	padding-top: 80rem;
	padding-bottom: 80rem;
	position: relative;
	z-index: 0;
}

.header {
	padding-top: 40px;
	padding-bottom: 20px;
}

.header_ttl {
	font-size: 24px;
	line-height: 1.3;
	font-weight: 600;
	margin-bottom: 21px;
}

.header_logo {
	width: calc(100% + 60px);
	margin-right: -30px;
	margin-bottom: 40px;
	margin-left: -30px;
}

.footer {
	padding-top: 80px;
	padding-bottom: 40px;
}

.footer_inner {
	position: relative;
}

.footer_back a {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 60px;
}

.footer_back a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: url(./images/arrow_back.svg) no-repeat center / cover;
}

.sns_icons {
	display: flex;
	gap: 15px;
	font-size: 18px;
	margin-bottom: 26px;
}

.copyright {
	font-size: 10px;
	padding-right: 52px;
}

.gd_logo img {
	width: 100%;
	height: auto;
}

.footer .gd_logo {
	width: 32px;
	position: absolute;
	right: 30px;
	bottom: 0;
}

.conts_selector {
	margin-bottom: 40px;
}

.selector_items {
	font-size: 14px;
	line-height: 24px;
	display: flex;
	gap: 25px;
}

.selector_item {
	cursor: pointer;
	padding-top: 8px;
	padding-bottom: 8px;
}

.selector_item.current {
	background: url(./images/selected_bg.svg) no-repeat center center / 40px 40px;
}

.conts {}

.cont_container {
	margin-bottom: 18px;
}

.cont_container:last-child {
	margin-bottom: 0;
}

.cont_container h2 {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
	padding-top: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #ffffff;
}

.cont_container h2::before,
.cont_container h2::after {
	content: "";
	width: 14px;
	height: 2px;
	background-color: rgba(0, 0, 0, 0.3);
	position: absolute;
	bottom: 20px;
	right: 6px;
	transition: opacity 0.5s ease;
}

.cont_container h2::after {
	transform: rotate(90deg);
}

.cont_container.open h2::after {
	opacity: 0;
}

.work_item {
	margin-bottom: 20px;
}

.work_item:last-child {
	margin-bottom: 0px;
}

.seminar_name {
	font-size: 19px;
}

.seminar_name_english {
	font-size: 13px;
	margin-left: 20px;
}

.abc_name {
	font-size: 19px;
}

.abc_name .box {
	display: inline-block;
	font-size: 12px;
	line-height: 12px;
	padding: 4px;
	border: 1px solid #000000;
}

.abc_cont_container:first-child .accordion {
	display: block;
}

.prize_name {
	font-size: 19px;
}

.accordion {}

.accordion_conts {
	display: none;
	margin-top: 24px;
	margin-bottom: 40px;
}

.accordion_conts.show {
	display: block;
}

.work_item .work_img {
	display: block;
	margin-bottom: 10px;
}

.work_item h3 {
	font-size: 18px;
	margin-bottom: 10px;
}

.work_item h3 span {
	display: block;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.work_item h4 {
	font-size: 13px;
	margin-bottom: 10px;
}

.work_item h4 span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.work_item *:last-child {
	margin-bottom: 0;
}

/*--作品詳細--*/
.singular {
	padding-top: 350px;
	padding-bottom: 100px;
}

.work_details .work_prize {
	font-size: 19px;
	margin-bottom: 24px;
}

.work_details .work_prize .prize {
	margin-bottom: 14px;
}

.work_details .work_prize .prize:last-child {
	margin-bottom: 0;
}

.work_details .work_ttl {
	font-size: 24px;
	margin-bottom: 14px;
}

.work_details .work_author {
	font-size: 18px;
	margin-bottom: 24px;
}

.work_details .work_concept {
	line-height: 1.8;
	margin-bottom: 24px;
}

.work_details .work_review {
	line-height: 1.8;
	margin-top: 40px;
}

.work_details .work_review_container {
	background-color: #F5F5F5;
	padding: 10px;
}

.work_details .work_reviewer {
	margin-top: 24px;
}

.work_details .work_author .work_author_english {
	font-size: 12px;
	margin-left: 13px;
}

.work_details .work_support {
	font-size: 10px;
	margin-top: 40px;
}

.work_details .work_imgs {
	margin-top: 40px;
}

.work_details .work_img {
	margin-bottom: 10px;
}

.work_details .work_img:last-child {
	margin-bottom: 0;
}

.work_video iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

@media print, screen and (max-width:480px) {

	/*--作品詳細--*/
	.single .header {
		padding-top: 30px;
	}

	.single .header .header_ttl {
		font-size: 12px;
	}

	.single .header .conts_selector {
		display: none;
	}

	.single .singular {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

@media print, screen and (min-width:481px) {
	html {}

	.sp,
	.pc {
		display: none;
	}

	.tb {
		display: block;
	}

	.wrapper {
		display: flex;
		align-items: start;
		position: relative;
	}

	.header {
		flex: 0 0 320px;
		position: sticky;
		top: 0;
		left: 0;
		max-height: calc(100vh - 243px);
		box-sizing: border-box;
		padding-top: 40px;
		overflow: auto;
	}

	.header_inner {
		display: grid;
		grid-template-columns: 1fr;
	}

	.header_logo {
		width: 100%;
		margin-right: 0;
		margin-bottom: 18px;
		margin-left: 0;
		order: -1;
	}

	.main {
		box-sizing: border-box;
		padding-top: 280px;
		padding-bottom: 160px;
	}

	.main .gd_logo {
		width: 48px;
		position: fixed;
		top: 40px;
		right: 30px;
		z-index: 999;
	}

	.conts_selector {
		margin-bottom: 0;
	}

	.footer {
		width: 350px;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.copyright {
		padding-right: 0;
	}

	.work_items {
		display: grid;
		gap: 16px;
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}

	.work_item {
		margin-bottom: 0;
	}

	.work_item a {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.abc_order_cont .work_item .work_img {
		margin-top: auto;
	}

	.cont_container h2 {
		padding-top: 46px;
	}

	.cont_container h2::before,
	.cont_container h2::after {
		content: none !important;
	}

	.accordion_conts {
		margin-bottom: 0;
		display: block !important;
	}

	/*--作品詳細--*/
	.main.singular {
		padding-top: 320px;
		padding-bottom: 100px;
	}
}

@media print, screen and (min-width:881px) {
	html {}

	.sp,
	.tb {
		display: none;
	}

	.pc {
		display: block;
	}

	.wrapper {}

	.inner {
		padding-right: 60px;
		padding-left: 60px;
	}

	.common_padding {
		padding-right: 60px;
		padding-left: 60px;
	}

	.header {
		padding-top: 60px;
		flex: 0 0 350px;
	}

	.header_inner {
		padding-right: 30px
	}

	.header_ttl {
		font-size: 22px;
	}

	.main {
		padding-top: 280px;
	}

	.main .gd_logo {
		top: 60px;
		right: 80px;
	}

	.main.singular {
		padding-top: 340px;
	}

	.work_details .work_summary {
		display: grid;
		grid-template-columns: auto 1fr 1fr;
		grid-template-rows: auto auto 1fr;
		gap: 0 30px;
	}

	.work_details .work_author {
		order: 1;
	}

	.work_details .work_concept {
		order: 2;
		grid-column: span 2;
		grid-row: span 3;
		margin-bottom: 0;
	}

	.work_has_brief_review .work_concept {
		grid-column: span 1;
	}

	.work_details .work_seminar {
		order: 4;
	}

	.work_details .work_review {
		order: 3;
		margin-top: 0;
		grid-row: span 3;
	}

	.work_details .work_review_container {}

	.work_details .work_support {
		order: 5;
	}

	.cont_container h2 {
		padding-top: 66px;
	}
}

@media print, screen and (min-width:1281px) {
	html {
		font-size: 6.25%;
	}
}