@charset "utf-8";

.main {
	padding-bottom: 180px;
}

/*-------------------------------
	?X???C?_?[
-------------------------------*/

.mainvisual {
	width: 100%;
	/* padding-right: 30px; */
	padding-bottom: 140px;
	position: relative;
}

.mainvisual .slick-track {
	/* -webkit-animation: slide 400s -300s linear infinite;
	animation: slide 400s -300s linear infinite; */
}

/* 動画 */
.mainvisual .bg {
	height: 70vh;

	@media screen and (max-width: 768px) {
		height: 30vh;
	}

	video {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
}

.thumbnail {
	width: 100%;
	max-width: 100px;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}


.mainvisual .slide {
	padding-left: 80px;
}

.mainvisual .slide .bg {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 20px;
}

.mainvisual .slide .bg {
	-webkit-backface-visibility: hidden;
}

.mainvisual .slick-list {
	padding: 0 0 0 40% !important;
	/* padding: 0 0 0 22% !important; */
}

.mainvisual .slide img {
	opacity: 0;
}

.mainvisual .maincatchcopy {
	position: absolute;
	left: 75px;
	bottom: 0;
}

.mainvisual .catchcopy {
	font-size: 8.0rem;
	font-family: 'Boston Black';
	line-height: 1.2;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.mainvisual .catchcopy span {
	line-height: 1.2;
	display: block;
}

.mainvisual .catchcopy>span {
	display: flex;
}

.mainvisual .catchcopy .span1 {
	position: relative;
}

.mainvisual .catchcopy .span1:before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 20px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a475+0,00bdff+100 */
	background: #00a475;
	/* Old browsers */
	background: -moz-linear-gradient(left, #00a475 0%, #00bdff 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, #00a475 0%, #00bdff 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #00a475 0%, #00bdff 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a475', endColorstr='#00bdff', GradientType=1);
	/* IE6-9 */
}

.mainvisual .catchcopy .span2 {
	position: relative;
	z-index: 2;
}

.mainvisual .subcopy {
	font-size: 1.9rem;
	line-height: 2;
	font-weight: bold;
}

.mainvisual .scroll {
	font-size: 1.0rem;
	padding-bottom: 60px;
	letter-spacing: 1px;
	position: absolute;
	left: 20px;
	bottom: 0;
	font-weight: bold;
	font-family: 'Boston Bold';
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	overflow: hidden;
	cursor: pointer;
}

.mainvisual .scroll:before,
.mainvisual .scroll:after {
	content: "";
	width: 1px;
	height: 50px;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	bottom: 0;
}

.mainvisual .scroll:before {
	background: #fff;
	z-index: 2;
	animation: scroll-animation 1.5s ease-out infinite;
}

.mainvisual .scroll:after {
	background: #000;
	z-index: 1;
}

@keyframes scroll-animation {
	0% {
		bottom: 0;
	}

	100% {
		bottom: -60px;
	}
}

@-webkit-keyframes slide {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}

	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@keyframes slide {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}

	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}



/*-------------------------------
	MESSAGE
-------------------------------*/

.sec1 {
	margin: 100px 0;
	padding-bottom: 80px;
	position: relative;
}

.sec1:after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	/* width: 75%; */
	width: calc(50% + 320px);
	height: calc(100% - 80px);
	z-index: -1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a475+0,00bdff+100 */
	background: #00a475;
	/* Old browsers */
	background: -moz-linear-gradient(left, #00a475 0%, #00bdff 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, #00a475 0%, #00bdff 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #00a475 0%, #00bdff 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a475', endColorstr='#00bdff', GradientType=1);
	/* IE6-9 */
}

.sec1 .detail {
	padding-top: 50px;
}

.sec1 .detail .cont .subtitle span {
	padding: 2px 0 5px 5px;
	line-height: 1;
	background: #fff;
	font-weight: bold;
	display: inline-block;
}

.sec1 .detail .cont .subtitle span:not(:last-child) {
	margin-bottom: 15px;
}

.sec1 .detail .cont .txt {
	margin-bottom: 40px;
}


	/*-------------------------------
	INTERVIEW
-------------------------------*/

.sec-interview .sectitle {
	margin-bottom: 10px;
	text-align: center !important;
}

.widewidth{
	max-width: 1240px;
	margin: 0 auto;
}

.sec-interview .first_message {
	margin-bottom: 60px;
	text-align: center;
}

/* 最初のインタビュー記事（大きく表示） */
.interview-featured {
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	margin-bottom: 60px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interview-featured:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.interview-featured a {
	display: flex;
	text-decoration: none;
	color: inherit;
	align-items: stretch;
}

.interview-featured .interview-thumbnail {
	width: 400px;
	max-width: 400px;
	height: 300px;
	overflow: hidden;
	flex-shrink: 0;
}

.interview-featured .interview-thumbnail .thumbnail {
	width: 100%;
	height: 100%;
	max-width: none;
}

.interview-featured .interview-thumbnail .thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.interview-featured:hover .interview-thumbnail .thumbnail img {
	transform: scale(1.05);
}

.interview-featured .interview-content {
	padding: 40px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.interview-featured .interview-date {
	font-size: 1.4rem;
	color: #666;
	margin-bottom: 15px;
	font-weight: bold;
}

.interview-featured .interview-title {
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.3;
	background: linear-gradient(to right, #00a475 0%, #00bdff 100%);
    -webkit-background-clip: text;
    color: transparent;
}

.interview-featured .interview-excerpt {
	font-size: 1.6rem;
	line-height: 1.7;
	color: #666;
}

/* 通常のインタビュー記事リスト */
.interview-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 40px;
	margin-bottom: 60px;
}

.interview-item {
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interview-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.interview-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.interview-thumbnail {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.interview-thumbnail .thumbnail {
	width: 100%;
	height: 100%;
	max-width: none;
}

.interview-thumbnail .thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.interview-item:hover .interview-thumbnail .thumbnail img {
	transform: scale(1.05);
}

.interview-content {
	padding: 25px;
}

.interview-date {
	font-size: 1.2rem;
	color: #666;
	margin-bottom: 10px;
	font-weight: bold;
}

.interview-title {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 1.4;
	color: #333;
}

.interview-excerpt {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #666;
	margin-bottom: 20px;
}

.no-interviews {
	text-align: center;
	padding: 60px 20px;
	color: #666;
	font-size: 1.6rem;
}

.sec-interview .btn {
	text-align: center;
}

/*-------------------------------
	SERVICE
-------------------------------*/

.sec2 .sectitle {
	margin-bottom: 10px;
	text-align: center;
}

.sec2 .first_message {
	margin-bottom: 60px;
	text-align: center;
}

.sec2 .service:not(:last-child) {
	margin-bottom: 120px;
}

.sec2 .detail .no {
	font-size: 7.0rem;
	margin-bottom: 30px;
	line-height: 1;
	font-family: 'Boston Black';
	background: linear-gradient(to right, #00a475 0%, #00bdff 100%);
	-webkit-background-clip: text;
	color: transparent;
	display: inline-block;
}

.sec2 .detail .cont .txt {
	margin-bottom: 45px;
}

@media all and (-ms-high-contrast: none) {
	.sec2 .detail .no {
		background: #fff;
		color: #00a475;
	}
}





/*-------------------------------
	1400px
-------------------------------*/
@media screen and (max-width:1400px),
print {

	.mainvisual .slick-list {
		padding: 0 0 0 15% !important;
		/* padding: 0 0 0 22% !important; */
	}

}



/*-------------------------------
	SP??p
-------------------------------*/
@media screen and (max-width:768px), print {

	.main {
		padding-bottom: 15vw;
	}

	



	/*-------------------------------
		?X???C?_?[
	-------------------------------*/

	.mainvisual {
		width: 100%;
		/* height: 100vh; */
		/* height: calc(100vh - 25vw); */
		padding-right: 0;
		padding-bottom: 0;
	}

	.mainvisual .slide_wrap {
		/* padding-left: 3.5%;
		padding-right: 3.5%; */
		padding-left: 0;
		padding-right: 0;
	}

	.mainvisual .slide {
		padding-left: 1.75vw;
		padding-right: 1.75vw;
	}

	.mainvisual .slick-list {
		padding: 0 !important;
	}

	.mainvisual .maincatchcopy {
		left: 3.5%;
		/* top: 52.5vw; */
		top: 40vh;
		bottom: unset;
	}

	.mainvisual .catchcopy {
		font-size: 4.5rem;
		line-height: 1;
		margin-bottom: 5vw;
	}

	.mainvisual .catchcopy span {
		line-height: 1;
	}

	.mainvisual .catchcopy .span1:before {
		width: 6vw;
		height: 6vw;
		top: 3.5vw;
	}

	.mainvisual .subcopy {
		font-size: 1.65rem;
		margin-bottom: 13.5vw;
		line-height: 1.8;
	}

	.mainvisual .scroll {
		padding-bottom: 15vw;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		-ms-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		text-align: center;
	}

	.mainvisual .scroll:before,
	.mainvisual .scroll:after {
		height: 12.5vw;
	}

	.mainvisual .scroll:before {
		animation: scroll-animation-sp 1.5s ease-out infinite;
	}

	@keyframes scroll-animation-sp {
		0% {
			bottom: 0;
		}

		100% {
			bottom: -12.5vw;
		}
	}



	/*-------------------------------
		MESSAGE
	-------------------------------*/

	.sec1 {
		margin: 15vw 0 0;
		padding-bottom: 15vw;
	}

	.sec1:after {
		width: 100%;
		height: calc(100% - 27.5vw);
	}

	.sec1 .detail {
		padding-top: 10vw;
	}

	.sec1 .detail .cont .subtitle span {
		padding: 1.5vw;
	}

	.sec1 .detail .cont .subtitle span:not(:last-child) {
		margin-bottom: 3.5vw;
	}

	.sec1 .detail .cont .txt {
		margin-bottom: 10vw;
		font-size: 1.3rem;
	}



	/*-------------------------------
		SERVICE
	-------------------------------*/

	.sec2 .sectitle {
		margin-bottom: 2.5vw;
	}

	.sec2 .first_message {
		margin-bottom: 12.5vw;
	}

	.sec2 .service:not(:last-child) {
		margin-bottom: 20vw;
	}

	.sec2 .detail {
		margin-top: -8.5vw;
	}

	.sec2 .detail .no {
		font-size: 6.0rem;
		margin-bottom: 3.5vw;
	}

	.sec2 .detail .cont .txt {
		margin-bottom: 8vw;
		font-size: 1.2rem;
	}

	/*-------------------------------
		INTERVIEW
	-------------------------------*/

	/* 最初のインタビュー記事（SP対応） */
	.interview-featured {
		margin-bottom: 15vw;
	}

	.interview-featured a {
		flex-direction: column;
	}

	.interview-featured .interview-thumbnail {
		width: 100%;
		max-width: none;
		height: 50vw;
	}

	.interview-featured .interview-content {
		padding: 6vw;
	}

	.interview-featured .interview-date {
		font-size: 1.2rem;
		margin-bottom: 3vw;
	}

	.interview-featured .interview-title {
		font-size: 2rem;
		margin-bottom: 4vw;
	}

	.interview-featured .interview-excerpt {
		font-size: 1.3rem;
	}

	/* 通常のインタビュー記事リスト（SP対応） */
	.interview-list {
		gap: 8vw;
		margin-bottom: 15vw;
	}

	.interview-content {
		padding: 6vw;
	}

	.interview-date {
		font-size: 1.1rem;
		margin-bottom: 2.5vw;
	}

	.interview-title {
		font-size: 1.5rem;
		margin-bottom: 3.5vw;
	}

	.interview-excerpt {
		font-size: 1.2rem;
		margin-bottom: 5vw;
	}

	.no-interviews {
		padding: 15vw 5vw;
		font-size: 1.4rem;
	}

}