/* =======================================================

Name: AIアンバサダートップ

Description: CSS file for the AI Ambassador top page

Create: 2025.01.06 
Update: 2025.07.15

======================================================= */

.main-contents:has(.gen_ai-ambassador)::before {
	margin-top: 79px;


	@media (max-width: 1300px) {
		margin-top: 6.27%;
	}

	@media (max-width: 767px) {
		margin-top: 7.95%;
	}
}

#main .hdg-l2 {
	font-size: 1.5em;
	color: #fff;
	margin: 0.8em 0 0;
	padding: 0;

	@media (max-width: 767px) {
		font-size: 0.95em;
		margin: 0.65rem 0 0;
	}
}

.gen_ai-ambassador .orig-inner {
	border-top: 2px solid var(--color-main-dark);
	margin: 3em 0 0;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .5s 0.6s linear, transform .5s 0.6s linear !important;

	@media (max-width: 767px) {
		margin: 1.5rem 0 0;
	}

	.main-contents[data-load-animation="true"] & {
		opacity: 1;
		transform: translateY(0);
	}
}

.for-xgap {
	display: none;

	@media (min-width: 767px) and (max-width: 1153px) {
		display: block;
	}
}


/* @Title */

.gen_ai-ambassador .orig-container>*:not([class*="full-wide"]) {
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}

.gen_ai-ambassador .orig-container>.orig-container-head {
	opacity: 0;
	transition: opacity 1s 0.3s linear !important;

	@media (max-width: 1300px) {
		margin: 0 -18px;
	}
}

.main-contents[data-load-animation="true"] .gen_ai-ambassador .orig-container>.orig-container-head {
	opacity: 1;
}

.gen_ai-ambassador .orig-container>.orig-container-head picture {
	display: block;
}

.gen_ai-ambassador .orig-container>.orig-container-head img {
	width: 100%;
}


/* @kv */

.gen_ai-ambassador .orig-inner.kv {
	border: none;
	margin: 4em 0 0;
	text-align: center;
	position: relative;

	@media (max-width: 1300px) {
		margin: 4em -18px 0;
	}

	@media (max-width: 767px) {
		margin: 1.75rem -18px 0;
	}

	&+.orig-inner {
		margin-top: 4rem;

		@media (max-width: 767px) {
			margin-top: 1.75rem;
		}

	}

	.kv-members {
		width: 100%;

		img {
			width: 100%;
		}
	}

	.kv-lead {

		@media (min-width: 768px) {
			background: url(https://d1uzk9o9cg136f.cloudfront.net/f/portal/16777633/rc/2025/06/24/808d54ec5c260699e511aea3f9959558e6e9a253.png) left top repeat-x;
			max-height: 77px;
			position: relative;
			z-index: 10;
		}

	}


}





/* @Feed */
.original-newsfeed-wrap.feed {
	margin: 2.125em 0 0;

	@media (min-width: 768px) {
		margin: 1.25em 0 0;
	}
}

#main .original-newsfeed-wrap .content-author-info>.flex-item[data-pubdate]:after {
	content: attr(data-pubdate);
	display: block;
	line-height: 1em;
	text-align: right;
	color: #fff;
	font-weight: normal;
	margin: 0;
	padding: 0;
}




/* carousel */

#main .carousel-wrap {
	.carousel2 {
		&>.carousel-contents>.carousel-content {
			background: none;
		}

		&[data-carousel-nav^="over"] .carousel-nav {
			position: relative;
			opacity: 1;
			margin-top: 1em;
		}

		&>.carousel-nav>label:before {
			width: 0.825em;
			height: 0.825em;
			margin: .25em 0.35em;
			border-radius: 1em;
		}

		&>input[type="radio"]:nth-of-type(1):checked~.carousel-nav>label:nth-of-type(1)::before,
		&>input[type="radio"]:nth-of-type(2):checked~.carousel-nav>label:nth-of-type(2)::before,
		&>input[type="radio"]:nth-of-type(3):checked~.carousel-nav>label:nth-of-type(3)::before,
		&>input[type="radio"]:nth-of-type(4):checked~.carousel-nav>label:nth-of-type(4)::before,
		&>input[type="radio"]:nth-of-type(5):checked~.carousel-nav>label:nth-of-type(5)::before,
		&>input[type="radio"]:nth-of-type(6):checked~.carousel-nav>label:nth-of-type(6)::before,
		&>input[type="radio"]:nth-of-type(7):checked~.carousel-nav>label:nth-of-type(7)::before,
		&>input[type="radio"]:nth-of-type(8):checked~.carousel-nav>label:nth-of-type(8)::before,
		&>input[type="radio"]:nth-of-type(9):checked~.carousel-nav>label:nth-of-type(9)::before,
		&>input[type="radio"]:nth-of-type(10):checked~.carousel-nav>label:nth-of-type(10)::before,
		&>input[type="radio"]:nth-of-type(11):checked~.carousel-nav>label:nth-of-type(11)::before,
		&>input[type="radio"]:nth-of-type(12):checked~.carousel-nav>label:nth-of-type(12)::before {
			background: #fff;
		}


		&>.carousel-contents {
			display: flex;
			align-content: stretch;
			flex-wrap: wrap;
		}

		.carousel-container {

			height: 100%;

			a.content-link {
				text-decoration: none;
			}

			&>.wfcontent.image-bg .content-title,
			.content-author-info>.flex-item[data-pubdate]:after {
				position: relative;
				font-family: "Zen Kaku Gothic New", serif;
				font-size: 87.5%;
				padding: .75em 0;
			}

			&>.wfcontent {
				display: grid;
				grid-template-rows: auto 1fr;
				height: 100%;
			}

			&>.wfcontent.image-bg::before {
				content: none;
			}

			&>.wfcontent.image-bg .wfcontent-container {
				height: 100%;
			}

			.image-bg>.image-bg-blur {
				position: relative;
			}

			.wfcontent-imagebg.image-bg-blur::before {
				content: "";
				display: block;
				height: 0;
				padding-top: 56.25%;
				content: '';
				position: relative;
			}

			.content-body-container {
				display: grid;
				height: 100%;
			}

			&>.wfcontent.image-bg .content-info {
				display: block;
				align-self: end;
				justify-self: end;
			}


			.content-author-info>.flex-item[data-pubdate]:after {
				content: attr(data-pubdate);
				display: block;
				line-height: 1em;
				text-align: right;
				color: #fff;
				font-weight: normal;
				margin: 0;
				padding: 0;
			}

			.content-author-name {
				display: none;
			}

		}

		.carousel-nav-prev,
		.carousel-nav-next {
			width: 25%;
			height: 67.5%;
			opacity: .75;
		}
	}

}


#main .btn-feed-more {
	width: 200px;
	display: flex;
	text-decoration: none;
	margin: 40px auto 0;
	position: relative;
	/* border: 1px solid #fff; */
	border-radius: 0.375em;
	height: 2.25em;
	align-items: center;
	justify-content: center;

	&:hover {
		background: var(--color-main-dark)
	}

	&:hover .arrow {
		background: #fff;

		&::before, &::after {
			background: #fff;
		}
	}

	&::before {
		content: '';
		border: 1px solid #fff;
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		border-radius: 0.375em;
		z-index: -5;
	}
}

.btn-feed-more .arrow {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 2px;
	background-color: var(--color-main-light);
	transform: translateY(-50%) rotate(-45deg);
	position: absolute;
	right: 12px;
	top: 50%;

	&::before,
	&::after {
		content: "";
		position: absolute;
		top: calc(50% - 1px);
		right: 0;
		width: 13px;
		height: 2px;
		background-color: var(--color-main-light);
		transform-origin: calc(100% - 1px) 50%;
	}

	&::before {
		transform: rotate(45deg);
	}

	&::after {
		transform: rotate(-45deg);
	}
}




#main .filter {
	position: relative;
	margin: 2.5em 0 0;


	button {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		border-radius: 2em;
		top: auto;
		left: auto;
	}

	.filter-buttons {
		display: flex;
		gap: 10px;
		align-items: self-start;
		justify-content: flex-start;
		flex-wrap: wrap;

		&>.btn-filter {

			overflow: hidden;
			font-size: 110%;
			&[data-filter="システム・アプリ開発"] {
				letter-spacing: -.075em;
			}
		}
	}

	span.btn-gen-ai-inner::before {
		content: '';
		border: 1px solid #fff;
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		border-radius: 2em;
		z-index: -5;
	}

	.btn-gen-ai .btn-gen-ai-inner {
		padding: .8em 0;
		width: 11em;
	}

	.btn-reset {
		position: absolute;
		right: 0;
		bottom: calc(100% + 16px);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 0 8px;
	}

	.btn-reset:hover {
		top: auto;
		left: auto;
		opacity: 0.7;
	}

	.icon-reset {
		width: 20px;
		height: 20px;
		background: url(https://d1uzk9o9cg136f.cloudfront.net/f/portal/16777633/rc/2025/06/26/09e424185ded6b8a809486bd1f8ec44ca3fd6468.png) no-repeat 0 0;
		display: block;
		background-size: contain;
	}


	@media (max-width: 767px) {
		margin: 1em 0 0;

		.filter-buttons {
			flex-wrap: wrap;

			&>.btn-filter {
				font-size: 67.5%;
				width: calc(100% / 3 - 10px * 2 / 3);
			}
		}

		.btn-gen-ai .btn-gen-ai-inner {
			padding: .8em 0;
			width: auto;
		}

		.btn-reset {
			right: 0;
			bottom: calc(100% + 1.25rem);
			font-size: 75%;

			.icon-reset {
				width: 14px;
				height: 14px;
			}
		}

	}

}




/* @Members */

.gen_ai-ambassador .members {

	.orig-contents {
		gap: 38px 30px;
		flex-wrap: wrap;
		margin: 2.5em 0 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);

		@media (max-width: 767px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.ambassador-item {
		display: block;
		cursor: pointer;
		text-decoration: none;
		position: relative;

		&[data-col="2"] {
			grid-column: span 2;
		}

		&.hidden {
			display: none;
		}


		&.new::after {
			content: '';
			position: absolute;
			right: 0;
			bottom: calc(100%);
			display: block;
			background: url(https://d1uzk9o9cg136f.cloudfront.net/f/portal/16777633/rc/2025/06/26/bd5112574f50fde8b971d7f051195cf13624d44b.png) no-repeat 0 0;
			width: 50px;
			height: 50px;
			background-size: cover;
			transform: translateY(50%);

			@media (max-width: 767px) {
				width: 2rem;
				height: 0;
				padding: 2rem 0 0;
			}
		}

		&.produce-hover:hover .ambassador-thum {
			filter: brightness(1.1);

			&::after {
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					background: var(--color-main-dark);
					position: absolute;
					top: 0;
					left: 0;
					filter: revert;
					mix-blend-mode: overlay;
					opacity: 0.3;
			}
		}

		.ambassador-thum {
			background-position: left top;
			background-repeat: no-repeat;
			background-size: cover;

		}

		&:hover {
			.ambassador-thum {
				>img {
					opacity: 0;
				}
			}
		}

	}





	.ambassador-name {
		display: flex;
		color: #fff;
		align-items: start;
		justify-content: start;
		flex-direction: column;
		font-size: 100%;
		line-height: 1;
		margin: 1em 0 0;
	}

	.name-jp {
		font-size: 1.25em;
		margin-top: 0.75em;
	}

	.name-en {
		font-size: 1.875em;
		font-weight: 700;
	}

	.ambassador-catchphrase {
		margin: 0.875em 0 0;
		line-height: 1.3;
	}

	@media (max-width: 767px) {

		.orig-contents {
			gap: 1.25rem 4.424%;
			margin: 1.25rem 0 0;
		}

		.ambassador-item {
			/* width: calc(100% / 2 - 4.424% / 2); */
		}

		.ambassador-name {
			margin: 0.625rem 0 0;
		}

		.name-jp {
			font-size: 0.875em;
			margin-top: 0.5rem;
		}

		.name-en {
			font-size: 0.95em;
		}

		.ambassador-catchphrase {
			font-size: 0.75em;
			margin: 0.575rem 0 0;
		}
	}

}



/* @about */

.orig-inner.about {
	background: url(https://d1uzk9o9cg136f.cloudfront.net/f/portal/16777633/rc/2025/06/26/3b724ddc673ac67101c4a72401bbbf9c5a3813c3.jpg) no-repeat bottom right;
	min-height: 440px;

	.hdg-l2 {
		font-size: 1.5em;
	}

	&>* {
		width: 37%;
	}

	.page-catchphrase {
		color: var(--color-main-light);
		font-size: 1.5em;
		margin: .75em 0 0;
	}

	.page-lead {
		font-size: 1.125em;
		margin: 0.875em 0 0;
		text-shadow: 0 0 6px #0c093c;
	}

	@media (max-width: 767px) {

		padding: 0 0 56.04%;
		background-size: contain;

		.hdg-l2 {
			font-size: .885em;
			margin: .25em 0 0;
		}

		&>* {
			width: 100%;
		}

		.page-catchphrase {
			margin: 1.15rem 0 0px;
			font-size: 1.125em;
			line-height: 1.1;
		}

		.page-lead {
			font-size: 0.9375em;
			margin: 1.25rem 0 0;
			line-height: 1.5;
			font-size: 1rem;
		}

	}

}


/* @aside */

.orig-inner.aside {
	margin: 0;


	.orig-contents {
		margin: 5.25em 0 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		align-items: end;
	}

	.aside-item-lead {
		text-align: center;
		font-size: clamp(15px, 1vw, 18px);
		margin: 0;
		position: relative;
		padding: 0 2em;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;

		&::before, &::after {
			content: '';
			width: 2px;
			height: 90%;
			background: #fff;
			display: block;
			position: absolute;
			bottom: 0;
		}

		&::before {
			left: 1em;
			transform: rotateZ(-20deg);
		}

		&::after {
			right: 1em;
			transform: rotateZ(20deg);
		}

	}

	.aside-item .name {
		font-size: clamp(18px, 135%, 24px);
		/* line-height: 1; */
	}

	.aside-item .aside-item-banner {
		background: #fff;
		display: block;
		margin: 1em 0 0;
	}

	.aside-item a:hover img {
		filter: opacity(0.77);
	}

	@media (max-width: 767px) {

		.orig-contents {
			margin: 1.75em 0 0;
			grid-template-columns: repeat(1, 1fr);
			gap: 25px;
			align-items: end;
		}

		.aside-item-lead {
			font-size: 97.5%;

		}

		.aside-item .name {
			font-size: 130%;
		}

		.aside-item .aside-item-banner {
			margin: .5em 0 0;
		}

	}

}