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

/*ムービー*/
.bg-video-wrap_cpu{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	/*overflow: visible; /* hiddenからvisibleに変更 */
	
	background: #000;
}
.bg-video-wrap_cpu_po-r{
	position: relative;
	z-index: 999;
}
.bg-video-wrap_cpu.eye1{
	overflow: hidden;
}
.bg-video_cpu {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	
	background: #000;
	object-fit: cover;
	top: 0;
	left: 0;
}
/*
.bg-video_cpu.gray1 {
	filter: grayscale(65%);  /*グレースケール *//*
}
*/
.bg-video_cpu.gray1 {
	filter: grayscale(100%); /* グレースケール */
}

/*ムービー枠*/
.bg-video-wrap.top1 {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	
	background: #000;
}
.bg-video-wrap.top1 {
    overflow: visible; /* hiddenからvisibleに変更 */
}


/*ムービー文字*/
.menu_txt_bg1.top1{
	clear: both;
	width: 104.167%;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 59.3%;
	top: 63.5%;
	left: 0;
	opacity: 1;
	
/*	background: rgba(180,41,226,1.00);*/
}
@media screen and (min-width: 801px) {
.menu_txt_bg1.top1{
	top: 59.2%;
	top: 63.5%;
}
}


/*ムービー文字*/
.menu_txt_bg1.top2{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
/*	top: 57%;*/
	left: 0;
	opacity: 1;
	z-index: 20;
	
/*	background: rgba(180,41,226,1.00);*/
}
@media screen and (min-width: 801px) {
.menu_txt_bg1.top2{
	bottom: 0;
/*	top: 57%;*/
}
}






.contents100.ofh1{
	overflow: hidden
}


.space1{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	
/*	background: rgba(131,255,75,1.00);*/
}

.txtbox_base1{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}






/***

ブランド用

***/
.brand_title_top1{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-end; /* 下揃え */
}


/* ページタイトル1 */
.brand_title1.top1 {
	font-size: 28px;
	color:#000;
	text-align: left;
	line-height:110%;
}
@media screen and (max-width: 600px) {
.brand_title1.top1 {
	font-size: 5.6vw;
}
}
.brand_title1.top2 {
	font-size: 21px;
	font-size: 23px;
	color:#000;
	text-align: left;
	line-height:125%;
}
.brand_title1.top2.enfont1 {
	font-size: 24px;
	line-height:101%;
}
.brand_title1.top2 span {
	font-size: 0.7em;
}
@media screen and (max-width: 600px) {
.brand_title1.top2 {
	font-size: 4.2vw;
}
}


/* ページタイトル2 */
.brand_title2.top1 {
	font-size: 20px;
	line-height: 190%;
	color:#000;
	font-weight: 600;
	text-align: justify;
	margin: 0;
	margin-bottom: 0.5em;
}
@media screen and (max-width: 600px) {
.brand_title2.top1 {
	font-size: 4vw;
}
}
.brand_title2.top2 {
	font-size: 17px;
	line-height: 200%;
	color:#000;
	font-weight: 400;
	text-align: justify;
	margin: 0;
	margin-bottom: 0.8em;
	letter-spacing: 0.12em;
	
}
.brand_title2.top2.white1 {
	color:#fff;
}
@media screen and (max-width: 600px) {
.brand_title2.top2 {
	font-size: 3.4vw;
}
}
.brand_title2.top2.m01 {
/*
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	flex-direction:row-reverse;
	
*/	
	clear: both;
	width: 100%;
	margin: 0;
	margin-top: 45px;
	
/*	background: rgba(76,160,203,1.00);*/
}
.brand_title2.top2.m02 {
	margin: 0;
	margin-top: 70px;
	
}
.brand_title2.top2.m01 p.afg_txt1 {
	width: auto;
/*
	text-align: right;
	float: right;
*/
	letter-spacing: 0.12em;
	margin-bottom: 0.7em;
	text-align: center;
/*	background: rgba(227,127,129,1.00);*/
}

/* ページタイトル4 */
.brand_title4.top1 {
	font-weight: bold;
	text-align: left;
	margin: 0;
	margin-right: 15px;
	color: #9a9b9b;
}





/***

一行一見

***/
.afg_title1 {
	font-size: 13px;
	color:#fff;
	text-align: left;
	line-height:101%;
	font-weight: 500;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 600px) {
.afg_title1 {
	font-size: 2.6vw;
}
}
.afg_title2 {
	font-size: 36px;
	color:#fff;
	text-align: left;
	line-height:101%;
	font-weight: 700;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
}
@media screen and (max-width: 600px) {
.afg_title2 {
	font-size: 7.2vw;
}
}

.afg_txt1 {
	
	width: auto;
	font-size: 27px;
	font-size: 36px;
	color:#fff;
	text-align: left;
	text-align: center;
	line-height:101%;
	font-weight: 600;
	font-weight: 700;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
}
@media screen and (max-width: 600px) {
.afg_txt1 {
	font-size: 5.4vw;
	font-size: 7.2vw;
}
}
.afg_txt2 {
	font-size: 22px;
	color:#fff;
	text-align: left;
	line-height:101%;
	font-weight: 600;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
	
}
@media screen and (max-width: 600px) {
.afg_txt2 {
	font-size: 4.4vw;
}
}

.afg_ph1 {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}
.afg_btn1 {
	clear: both;
	width: calc( 100% - 32px);
	height: 56px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.afg_btn1 a {
	clear: both;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	
	font-family: "din-2014", sans-serif;

	font-size: 12px;
	line-height:101%;
	color:#fff;
	font-weight: 400;
	text-align: right;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
	
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
}
@media screen and (max-width: 600px) {
.afg_btn1 a {
	font-size: 2.4vw;
}
}
/* 通常時の状態 */
.afg_btn1 a {
	--delay:0s;
	--y:22%;
}
.afg_btn1 a :before{
	display:block;
	position:absolute;
	height:-moz-fit-content;
	height:fit-content;
	margin:auto;
	inset:0;
	translate:0 var(--y);
	content:attr(data-txt);
	color: #d0a378;
	clip-path:inset(-10% 0 130% 0);
	opacity:.3;
}
.afg_btn1 a span,
.afg_btn1 a:before{
	transition:translate .9s cubic-bezier(.16,1,.3,1),clip-path .6s cubic-bezier(0,.55,.45,1),opacity .3s ease-in;
}


@media (any-hover:hover){
.afg_btn1 a:hover span{
	translate:0 calc(var(--y)*-1);
	translate:0 calc(var(--y)*0);
	clip-path:inset(130% 0 -10% 0);
	opacity:.3;
	transition-delay:0s;
}
.afg_btn1 a:hover:before{
	translate:0 0;
	clip-path:inset(-10% 0 -10% 0);
	opacity:1;
	transition-delay:var(--delay);
}
}







.afg_btn2 {
	clear: both;
	width: calc( 100% - 32px);
	height: 40px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.afg_btn2.m01 {
	border-bottom: 1px solid #000;
}
.afg_btn2 a {
	clear: both;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	
	font-family: "din-2014", sans-serif;

	font-size: 12px;
	line-height:101%;
	color:#fff;
	font-weight: 400;
	text-align: right;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
}
@media screen and (max-width: 600px) {
.afg_btn2 a {
	font-size: 2.4vw;
}
}



/* 通常時の状態 */
.afg_btn2 a{
	--delay:0s;
	--y:22%;
}
.afg_btn2 a:before{
	display:block;
	position:absolute;
	height:-moz-fit-content;
	height:fit-content;
	margin:auto;
	inset:0;translate:0 var(--y);
	content:attr(data-txt);
	color:var(--color-02);
	color: #d0a378;
	clip-path:inset(-10% 0 130% 0);
	opacity:.3;
}
.afg_btn2 a span,
.afg_btn2 a:before{
	transition:translate .9s cubic-bezier(.16,1,.3,1),clip-path .6s cubic-bezier(0,.55,.45,1),opacity .3s ease-in;
}


@media (any-hover:hover){
.afg_btn2 a:hover span{
	translate:0 calc(var(--y)*-1);
	translate:0 calc(var(--y)*0);
	clip-path:inset(130% 0 -10% 0);
	opacity:.3;
	transition-delay:0s;
}
.afg_btn2 a:hover:before{
	translate:0 0;
	clip-path:inset(-10% 0 -10% 0);
	opacity:1;
	transition-delay:var(--delay);
}
}









/* 概要テキスト */
table.company1 {
	clear: both;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;

	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
	font-weight: 400;

	font-size: 13px;
	line-height:165%;
	
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.06em;
	text-align: left;

	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}
@media screen and (max-width: 800px) {
table.company1 {
	font-size: 1.2em;
	line-height:165%;
}
}

table.company1 th,
table.company1 td{
	clear: both;
	/* width: calc( 40% - 1px); */
	/* width: 120px; */
	height: auto;
	margin: 0;
	padding: 0;
	padding-bottom: 0.6em;
	position: relative;

	border: none;
	border-right: 1px solid #000;

	font-weight: 400;
	vertical-align: top;
}
table.company1 th{
	width: 5.5em;
	padding-right: 3em;
}
table.company1 td{
	clear: both;
	/* width: calc( 60% - 20px); */
	height: auto;
	padding-left: 3em;
	border-right: none;

}
table.company1 td.m01{
	padding-bottom: 1.5em;
}
table.company1 th.m02,
table.company1 td.m02{
	padding-bottom: 0;
	line-height:110%;
}











/***

Canvasスクロール

***/
.scrub-track { position:relative; width:100%; pointer-events:none; }
#section1 { height:16000px; }   /* box1: 1349枚 */
#section2 { height:24000px; }   /* box2: 1795枚 */


.scrub-fixed {
  position:fixed; top:0; left:0; width:100%;
  z-index:9999; visibility:hidden; pointer-events:none;
}
.scrub-fixed.active { visibility:visible; }

.canvas-wrap {
  position:relative;
  width:100%;
  padding-top:177.78%;
  background:#000;
}
.canvas-wrap canvas {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  display:block;
}

.prog-wrap {
  position:absolute; bottom:0; left:0; width:100%;
  height:5px; background:rgba(255,255,255,0.15); z-index:10;
}
.prog-bar { height:100%; width:0%; background:#fff; }
.prog-lbl {
  position:absolute; top:10px; left:12px; font-size:12px; color:#fff;
  background:rgba(0,0,0,0.6); padding:3px 8px; border-radius:4px; z-index:10;
}





/***

一見スライダー

***/
.overlay-nav-txt1{
	clear: both;
	width: 200px;
	height: 30px;
	display: flex;
	align-items: center;
	position: relative;
	top: -2px;
	cursor: pointer;
/*	pointer-events: none;*/
}




/* =============================
   BASE
============================= */
/*
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  background: #f5f5f5;
  color: #000;
}
a { text-decoration: none; color: inherit; }
section {
  padding: 60px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
*/
.section-note {
  font-size: 13px;
  color: #888;
  margin-bottom: 30px;
}
.section-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0 40px;
}

/* =============================
   ▼ スライダー 1・2 共通
   （既存スタイルを再現）
============================= */
/*
.swiper-outer {
  position: relative;
}
*/
/* スライドが左に少しはみ出すデザインを再現 */
/*
.works-swiper {
  overflow: visible;
  width: 100%;
  position: relative;
   元コード: left: calc(-6.668% - 20px); 必要に応じてコメントアウト解除 
}
.works-swiper .swiper-slide {
  width: 53.334%;
  height: auto;
}
.card {
  display: block;
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.slider_ph1 {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 1px solid #e0e0e0;
}
.slider_ph1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slider_title1 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  padding: 14px 16px 10px;
}
.slider_txt1 {
  padding: 0 16px 16px;
}
.slider_txt1 p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #555;
  margin-bottom: 4px;
}
.slider_txt1 p:first-child {
  font-size: 14px;
  color: #222;
  font-weight: 600;
}
*/

/* ---- ナビボタン（既存と同じ位置・スタイル） ---- */
/*
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: calc(100% + 18px);
  transform: none;
  z-index: 20;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  background: #222;
  border-radius: 50%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}
*/
/* SVGの代わりにCSSで矢印を描画（ダミー用） */
/*
.swiper-button-prev::before,
.swiper-button-next::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.swiper-button-prev::before {
  transform: rotate(-135deg) translateX(-2px);
}
.swiper-button-next::before {
  transform: rotate(45deg) translateX(-2px);
}
.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
*/

/* ボタン位置：各スライダーのouterを基準にする */
/*
.swiper-outer .swiper-button-prev { left: 0; }
.swiper-outer .swiper-button-next { left: 44px; }
*/






/***

位置調整

***/
#philosophy{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -175px;
}
#planning{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -150px;
}
#ikken{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -65px;
}
#branding{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -65px;
}
#creative{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -65px;
}

#branding2{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -175px;
}
#creative2{
	clear: both;
	width: 100%;
	height: 1px;
	position: absolute;
	top: -175px;
}