@charset "UTF-8";

/* =========================================================
	 ファーストビューのレイアウト & ヒーロー設定
	 ========================================================= */
.contents_all {
		position: relative;
		width: 100%;
}

/* ヒーローセクション全体（スクロールピン留め用エリア） */
.hero_section {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
}

/*コンテンツセクション1：タイトル＆導入部*/
.contents_1section.video_ex_title_box {
		display: block;
		position: absolute;
		z-index: 3;
		pointer-events: none; /* スクールを妨げない設定 */
}

.contents_1section.video_ex_title_box .section_inner{
	
}

.contents_1section.video_ex_title_box .section_inner .contents_box{
	
}

.contents_1section.video_ex_title_box .section_inner .contents_box .section_title_box{

}

.video_ex_title_e{
	display: block;
	position: relative;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: clamp(11rem, 12vw, 13rem);
	line-height: 100%;
	margin-bottom: 20px;
}

.video_ex_title{
	display: inline-block;
	position: relative;
	padding: 4px 6px 6px 4px;
	line-height: 100%;
	background-color: #000000;
	color: #ffffff;
	font-size: clamp(1.9rem, 2.0vw, 2.2rem);
}

/* =========================================================
	 タイトル演出用の設定
	 ========================================================= */
.video_ex_title_e {
		display: block;
		position: relative;
		font-family: "Outfit", sans-serif;
		font-weight: 700;
		font-size: clamp(6rem, 11vw, 12rem);
		line-height: 100%;
		margin-bottom: 20px;
		overflow: hidden;
}

.video_ex_title_e .line {
		display: block;
		will-change: transform, opacity;
}

/* 日本語タイトルのマスク表示設定 */
.video_ex_title_wrap {
		display: inline-block;
		overflow: hidden; /* 左から右へ開くマスク構造 */
		position: relative;
}

.video_ex_title {
		display: inline-block;
		position: relative;
		padding: 6px 12px;
		line-height: 120%;
		background-color: #000000;
		color: #ffffff;
		font-size: clamp(1.6rem, 2.0vw, 2.2rem);
		white-space: nowrap;
}


/* 擦りガラスパネル */
.glass_panel {
		display: block;
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-radius: 20px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 2;
		pointer-events: none;
}

/*コンテンツセクション2：サンプル＆事例一覧*/
.contents_1section.video_ex_list_box {
		display: block;
		position: relative;
		z-index: 1;
		padding-top: 25vh; /* タイトル画面の重なり調整、スクロール前の状態で、コンテンツの上を多少あける */
}

.contents_1section.video_ex_list_box .section_inner{
	
}

.contents_1section.video_ex_list_box .section_inner .contents_box{
	padding-top: 10vh;
}

/*横型サムネ2列*/
.video_ex_2column{
	display:-webkit-box; display:-moz-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
	letter-spacing: -.40em;/* 文字間を詰めて隙間を削除する */
	position: relative;
	margin-bottom: 5%;
}

.video_ex_2column .column_inner{
	display: inline-block;
	position: relative;
	vertical-align: top;
	letter-spacing: normal;
	width: calc(50% - 7.5%);
	margin-left: 5%;
	margin-right: 5%;
}

.video_ex_2column .column_inner:first-of-type{
	margin-right: 2.5%;
}

.video_ex_2column .column_inner:nth-of-type(2n){
	margin-left: 2.5%;
}

/*縦型サムネ3列*/
.video_ex_3column{
	display:-webkit-box; display:-moz-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
	letter-spacing: -.40em;/* 文字間を詰めて隙間を削除する */
	justify-content: center;
	position: relative;
	padding-left: 3%;
	padding-right: 3%;
	margin-bottom: 5%;
}

.video_ex_3column .column_inner{
	display: inline-block;
	position: relative;
	vertical-align: top;
	letter-spacing: normal;
	width: calc(33.3333% - 10%);
	margin-left: 5%;
	margin-right: 5%;
}

.video_ex_3column .column_inner:first-of-type{
	margin-right: 2.5%;
}

.video_ex_3column .column_inner:nth-of-type(2n){
	margin-right: 2.5%;
	margin-left: 2.5%;
}

.video_ex_3column .column_inner:nth-of-type(3n){
	margin-left: 2.5%;
}

/* =========================================================
	 サムネイルのマスク切抜設定
	 ========================================================= */
.video_ex_link_thumbnail {
		margin-bottom: 20px;
		position: relative;
		overflow: hidden; /* 外枠で画像をマスク（トリミング） */
		width: 100%;
		aspect-ratio: 16 / 9; /* 横長標準アスペクト比（縦長の場合は自動でfit） */
		display: flex;
		justify-content: center;
		align-items: center;
}

.video_ex_3column .video_ex_link_thumbnail {
		aspect-ratio: 9 / 16; /* 縦型サムネイル用 */
}

.video_ex_link_thumbnail a {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		/* 外枠のクリップパス（初期状態は80%サイズ） */
		clip-path: inset(10% 10% 10% 10%); 
		will-change: clip-path;
		
		border: solid 1px #e7e7e7;
}

.video_ex_link_thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		/* 画像自体のスケール補正（枠が小さく見えても画像サイズは一定を維持） */
		transform: scale(1.2); 
		will-change: transform;
		
		/* GSAPによる拡大（scale(1.0)〜(1.25)）に hover の拡大効果を乗せる */
		transition: transform 0.4s ease-out;
		transform-origin: center center; /* 中心から拡大させる基準点 */
}

/* ホバー時の状態：1.08〜1.1倍程度に拡大 */
.video_ex_link_thumbnail a:hover img {
	transform: scale(1.08) !important; /* 8%拡大（お好みの倍率に調整可能） */
}


.video_ex_text_box{
	display: block;
	position: relative;
	min-height: 22rem;
}

.video_ex_name{
	font-weight: 600;
	display: inline;
	
	background-color: #000000;
	color: #ffffff;
}

.video_ex_name a,
.video_ex_name a:hover,
.video_ex_name a:visited{
}


.video_ex_client{
	font-size: 90%;
	color: #696969;
	margin-bottom: 10px;
}

.video_ex_size{
	font-size: 70%;
	color: #9b9b9b;
}

.video_ex_comment{
	
	
	font-size: 90%;
}

/* =========================================================
	 ランダム文字シャッフル（Decryption / Scramble）演出
	 ========================================================= */
.scramble_text {
		display: block;
		position: relative;
		font-family: inherit;
}



/*=========================iPad用スタイルここから=========================*/

@media screen and (min-width: 736px) and (max-width: 1024px) {/*元 min-width:768、max-width: 920px*/
	
	.contents_all {
		padding: 80px 40px 80px 40px;
	}
	
	.contents_1section.video_ex_title_box {
		padding: 40px;
	}
	
	/*コンテンツセクション2：サンプル＆事例一覧*/
	.contents_1section.video_ex_list_box {
		padding-top: 20vh; /* タイトル画面の重なり調整、スクロール前の状態で、コンテンツの上を多少あける */
	}
	
	.contents_1section.video_ex_list_box .section_inner .contents_box{
		padding-top: 10vh;
	}
	
	/*横型サムネ2列*/
	.video_ex_2column{
		margin-bottom: 5%;
	}
	
	.video_ex_2column .column_inner{
		width: calc(50% - 2.5%);
		margin-left: 0%;
		margin-right: 0%;
	}
	
	.video_ex_2column .column_inner:first-of-type{
		margin-right: 2.5%;
	}
	
	.video_ex_2column .column_inner:nth-of-type(2n){
		margin-left: 2.5%;
	}
	
	/*縦型サムネ3列*/
	.video_ex_3column{
		padding-left: 4%;
		padding-right: 4%;
		margin-bottom: 5%;
	}
	
	.video_ex_3column .column_inner{
		display: inline-block;
		position: relative;
		vertical-align: top;
		letter-spacing: normal;
		width: calc(33.3333% - (6% / 3));
		margin-left: 0%;
		margin-right: 0%;
	}
	
	.video_ex_3column .column_inner:first-of-type{
		margin-right: 0%;
	}
	
	.video_ex_3column .column_inner:nth-of-type(2n){
		margin-right: 3%;
		margin-left: 3%;
	}
	
	.video_ex_3column .column_inner:nth-of-type(3n){
		margin-left: 0%;
	}
	

}/*iPad用スタイルここまで*/



/*=========================スマホ用スタイルここから（横画面）=========================*/

@media screen and (max-width:896px) and (orientation:landscape) {/*スマホ用 横画面*/

}


/*=========================スマホ用スタイルここから（縦画面）=========================*/

@media screen and ( max-width: 767px ) {/*元767*/
	
	.contents_all {
		padding: 80px 20px 80px 20px;
	}
	
	.contents_1section.video_ex_title_box {
		padding: 20px;
	}
	
	.video_ex_title_e{
		font-size: 5rem;
	}
	
	.video_ex_title{
		font-size: 1.3rem;
	}
	
	/*コンテンツセクション2：サンプル＆事例一覧*/
	.contents_1section.video_ex_list_box {
		padding-top: 15vh; /* タイトル画面の重なり調整、スクロール前の状態で、コンテンツの上を多少あける */
	}
	
	.contents_1section.video_ex_list_box .section_inner .contents_box{
		padding-top: 15vh;
	}
	
	/*横型サムネ2列*/
	.video_ex_2column{
		display: block;
		margin-bottom: 5%;
	}
	
	.video_ex_2column .column_inner{
		display: block;
		width: 100%;
		margin-left: 0%;
		margin-right: 0%;
	}
	
	.video_ex_2column .column_inner:first-of-type{
		margin-right: 0%;
	}
	
	.video_ex_2column .column_inner:nth-of-type(2n){
		margin-left: 0%;
	}
	
	.video_ex_2column .column_inner .video_ex_link_thumbnail {
		margin-bottom: 10px;
	}

	
	/*縦型サムネ3列*/
	.video_ex_3column{
		display: block;
		padding-left: 0%;
		padding-right: 0%;
		margin-bottom: 5%;
	}
	
	.video_ex_3column .column_inner{
		display: block;
		width: 100%;
		margin-left: 0%;
		margin-right: 0%;
	}
	
	.video_ex_3column .column_inner:first-of-type{
		margin-right: 0%;
	}
	
	.video_ex_3column .column_inner:nth-of-type(2n){
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.video_ex_3column .column_inner:nth-of-type(3n){
		margin-left: 0%;
	}
	
	.video_ex_3column .column_inner .video_ex_link_thumbnail {
		max-width: 200px;
		margin: 0 auto;
		margin-bottom: 10px;
	}

}/*@media screen and ( max-width: 768px )ここまで*/



/*プリント用調整（PC画面をA4に最適化）*/
@page {
	/*margin: 10mm 10mm !important;*/
}/*@pageここまで*/

@media print {

}/*@media printここまで*/