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

/*==============================
共通設定
==============================*/

/*セクション共通*/
section{
	padding: 125px 0;
	width: 100%;
}

/*見出し共通*/
section h2{
	margin: 0 auto;
	color: #323232;
	font-family: "Roboto", sans-serif;
	font-size: 5rem;
	font-weight: 300;
	text-align: center;
	width: 800px;
	position: relative;
}

/*見出し共通*/
section h2::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/common/bg_rainbow_wave.svg) no-repeat center top 25px;
	position: absolute;
	top: 0;
	z-index: -1;
	transform: scale(0,1);/*inview用*/
}

/*見出し共通*/
section h2.inview::after{
	animation: AnimeWave 1s forwards;
}

@keyframes AnimeWave{
	0%{transform: scale(0,1);}
	50%{transform: scale(1.3,1);}
	100%{transform: scale(1,1);}
}

/*見出し 日本語共通*/
section h2 span{
	display: block;
	position: relative;
	opacity: 0;/*inview用*/
	filter: blur(30px);/*inview用*/
}

/*見出し共通*/
section h2.inview span{
	opacity: 1;
	filter: blur(0);
	transition: 1s 0.5s ease-in-out;
}

/*見出し 日本語共通*/
section h2 span::after{
	display: block;
	width: 100%;
	color: #323232;
	font-size: 1.4rem;
	font-weight: 100;
	text-align: center;
	position: absolute;
	bottom: -20px;
	opacity: 0;
	transform: translate(0, -20px);
}

/*見出し 日本語共通*/
section h2.inview span::after{
	opacity: 1;
	transform: translate(0, 0);
	transition: 0.5s 1.5s;
}


/*==============================
ヘッダー設定
==============================*/

/*ヘッダー全体*/
#headerWrap{
	padding: 0 0 300px 0;
}

/*ヘッダー装飾*/
#headerWrap::after{
	content: "";
	display: block;
	width: 438px;
	height: 724px;
	background: url(../img/common/bg_flowertheme_w.svg) no-repeat center center / cover ;
	position: absolute;
	top: 150px;
	left: -150px;
}

/*グローバルナビ*/
#globalNav{;
	transform: translate(0,-300px);
}

/*グローバルナビ*/
#headerWrap.inview #globalNav{
	transform: translate(0,0);
	transition: 1s 1.75s;
}

/*メインフォト*/
#headerWrap .mainPhoto{
	margin: -50px 0 0 auto;
	width: 80%;
	height: 850px;
	border-radius: 0 0 0 0;
	filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.15));
	transform: translate(100%,0);
}

/*メインフォト*/
#headerWrap.inview .mainPhoto{
	animation: AnimeMainPhoto 1s 0.5s forwards;
}

@keyframes AnimeMainPhoto{
	0%{
		border-radius: 0 0 0 0;
		filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
		transform: translate(100%,0);
	}
	70%{
		border-radius: 0 0 0 0;
		filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
		transform: translate(0,0);
		transition: 1s 0.5s;
	}
	100%{
		border-radius: 120px 0 0 120px;
		filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.15));
		transform: translate(0,0);
		transition: 1s 0.5s;
	}
}

/*キャッチコピー*/
#headerWrap .catchCopy{
	width: 46%;
	position: absolute;
	left: 80px;
	top: 360px;
	z-index: 2;
	opacity: 0;
	transform: scale(10);
	transform-origin: center center;
	filter: blur(60px);
}

/*キャッチコピー*/
#headerWrap.inview .catchCopy{
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
	transition: 0.75s 1.3s;
}

/*キャッチコピー リード文*/
#headerWrap .catchCopy p{
	margin: 30px 0 0 0;
	color: #505050;
	font-size: 2rem;
	font-weight: 300;
	line-height: 36px;
	text-align: justify;
}

/*==============================
メイン設定
==============================*/

/*------------------------------
about設定
------------------------------*/

/*アバウト全体*/
#about{
	margin: -125px 0 0 0;
}

/*アバウト 見出し 日本語*/
#about h2 span::after{
	content: "わたしたちについて";
}

/*aboutBox*/
#about .aboutBox{
	margin: 100px auto 0;
	width: 1000px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*aboutBox リスト 奇数*/
#about .aboutBox li:nth-of-type(odd){
	width: 330px;
}

/*aboutBox リスト 1つ目*/
#about .aboutBox li:first-of-type{
	opacity: 0;
	transform: translate(-100%,0);
}

/*aboutBox リスト 1つ目*/
#about .aboutBox li.inview:first-of-type{
	opacity: 1;
	transform: translate(0,0);
	transition: 0.5s 0.5s ease-in-out;
}

/*aboutBox 見出し*/
#about .aboutBox li:first-of-type h3{
	color: #505050;
	font-size: 4.4rem;
	font-weight: 300;
	line-height: 70px;
	text-indent: -20px;
	position: relative;
}

/*aboutBox 見出し 日本語*/
#about .aboutBox li:first-of-type h3::before{
	content: "Communicate through design";
	display: block;
	font-family: "Roboto", sans-serif;
	font-size: 1.6rem;
	font-weight: 300;
	text-indent: 5px;
	background: linear-gradient(112deg, rgba(238,204,213,1) 5%, rgba(247,240,216,1) 35%, rgba(105,160,186,1) 74%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: absolute;
	top: -50px;
	left: 0;
}

/*aboutBox 写真*/
#about .aboutBox li:nth-of-type(2){
	width: 236px;
	height: 236px;
	border-radius: 50%;
	background: url(../img/top/img_about.jpg) no-repeat center center / cover;
	position: relative;
}

/*aboutBox 写真*/
#about .aboutBox li:nth-of-type(2)::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/top/img_about_deco.png) no-repeat center center / cover;
	position: absolute;
}

/*aboutBox 写真枠*/
#about .aboutBox li.inview:nth-of-type(2)::before{
	animation: Animedenkyu 2s linear infinite;
}

@keyframes Animedenkyu {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(0.9);
  }
  21% {
    transform: scale(1.3) skew(0.004turn)
  }
  28% {
    transform: scale(1) skew(0.008turn);
  }
  35% {
    transform: scale(1) skew(0)
  }
}

/*aboutBox 写真枠*/
#about .aboutBox li:nth-of-type(2)::after{
	content: "";
	display: block;
	width: 242px;
	height: 242px;
	border-radius: 50%;
	background: linear-gradient(112deg, rgba(238,204,213,1) 5%, rgba(247,240,216,1) 35%, rgba(105,160,186,1) 74%);
	position: absolute;
	top: -3px;
	left: -3px;
	z-index: -1;
	opacity: 0;/*inview用*/
}

/*aboutBox 写真枠*/
#about .aboutBox li.inview:nth-of-type(2)::after{
	animation: AnimeHamon 1s 0.5s forwards;
}

@keyframes AnimeHamon{
	0%{
		transform: scale(3);
		opacity: 0;
	}
	60%{
		transform: scale(1);
		opacity: 1;
	}
	80%{
		transform: scale(1.3);
		opacity: 1;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

/*aboutBox リスト 3つ目*/
#about .aboutBox li:nth-of-type(3){
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 24px;
	text-align: justify;
	opacity: 0;
	transform: translate(100%,0);
}

/*aboutBox リスト 3つ目*/
#about .aboutBox li.inview:nth-of-type(3){
	opacity: 1;
	transform: translate(0,0);
	transition: 0.5s 0.5s ease-in-out;
}

/*------------------------------
service設定
------------------------------*/

/*サービス 見出し 日本語*/
#service h2 span::after{
	content: "サービス";
}

/*サービス イントロ*/
#service .intro{
	margin: 110px auto 0;
	width: 640px;
	position: relative;
}

/*サービス イントロ 装飾*/
#service .intro::after{
	content: "";
	display: block;
	width: 104px;
	height: 82px;
	background: url(../img/common/bg_deco01.svg) no-repeat center center / cover;
	position: absolute;
	top: 35px;
	left: -10px;
	z-index: -1;
	opacity: 0;/*inview用*/
	transform: scale(10);/*inview用*/
}

/*サービス イントロ 装飾*/
#service .intro.inview::after{
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
	transition: 0.5s 0.5s ease-in-out;
}

/*サービス イントロ 見出し*/
#service .intro h3{
	color: #505050;
	font-size: 5rem;
	font-weight: 300;
	text-align: center;
	opacity: 0;/*inview用*/
	transform: translate(0,300px);/*inview用*/
	filter: blur(60px);/*inview用*/
}

/*サービス イントロ 見出し*/
#service .intro.inview h3{
	opacity: 1;
	transform: translate(0,0);
	filter: blur(0);
	transition: 1s;
}

/*サービス イントロ 説明文*/
#service .intro .desc{
	margin: 35px 0 0 0;
	color: #505050;
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 26px;
	text-align: center;
	opacity: 0;/*inview用*/
	transform: translate(0,300px);/*inview用*/
	filter: blur(60px);/*inview用*/
}

/*サービス イントロ 説明文*/
#service .intro.inview .desc{
	opacity: 1;
	transform: translate(0,0);
	filter: blur(0);
	transition: 1s;
}

/*workBox共通*/
#service .workBox{
	margin: 210px 0 0 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*workBox 1つ目*/
#service .genre .workBox:first-of-type{
	margin: 140px 0 0 0;
}

/*workBox 偶数*/
#service .genre .workBox:nth-of-type(even){
	flex-direction:row-reverse;
}

/*workBox txtBox*/
#service .workBox .txtBox{
	padding: 30px 140px;
	width: 45%;
	opacity: 0;/*inview用*/
	transform: scale(-1,1);/*inview用*/
	background: linear-gradient(112deg, rgba(238,204,213,1) 5%, rgba(247,240,216,1) 35%, rgba(105,160,186,1) 74%);/*inview用*/
	filter: drop-shadow(0 0 30px rgba(0,0,0,0.4));/*inview用*/
}

/*workBox txtBox*/
#service .workBox.inview .txtBox{
	background: #FFF;
	opacity: 1;
	transform: scale(1,1);
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
	transition: 1s 0.5s;
}

/*workBox txtBox ジャンル名*/
#service .workBox .txtBox h4{
	color: #505050;
	font-size: 4.6rem;
	font-weight: 300;
	font-family: "Roboto", sans-serif;
	position: relative;
}

/*workBox txtBox ジャンル名 装飾共通*/
#service .genre .workBox h4::before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	opacity: 0;
	transform: scale(10);
}

/*workBox txtBox ジャンル名 装飾共通*/
#service .genre .workBox.inview h4::before{
	opacity: 1;
	transform: scale(1);
	transition: 0.3s 1.3s ease-in-out;
}


/*workBox txtBox グラフィックデザイン 装飾*/
#service .genre .workBox:first-of-type h4::before{
	width: 60px;
	height: 60px;
	background: url(../img/common/bg_deco02.svg) no-repeat center center / cover;
	left: -10px;
	top: -25px;
}

/*workBox txtBox WEBデザイン 装飾*/
#service .genre .workBox:nth-of-type(2) h4::before{
	width: 42px;
	height: 45px;
	background: url(../img/common/bg_deco03.svg) no-repeat center center / cover;
	left: 195px;
	top: 10px;
}

/*workBox txtBox フォトグラフ 装飾*/
#service .genre .workBox:nth-of-type(3) h4::before{
	width: 60px;
	height: 55px;
	background: url(../img/common/bg_deco04.svg) no-repeat center center / cover;
	left: -25px;
	top: -25px;
}

/*workBox txtBox ムービー 装飾*/
#service .genre .workBox:nth-of-type(4) h4::before{
	width: 112px;
	height: 71px;
	background: url(../img/common/bg_deco05.svg) no-repeat center center / cover;
	left: 50px;
	top: 20px;
}

/*workBox txtBox ジャンル名 日本語共通*/
#service .genre .workBox h4::after{
	display: block;
	color: #505050;
	font-size: 1.4rem;
	font-weight: 100;
	font-family:"Noto Sans JP", sans-serif;
	position: absolute;
	left: 0;
	bottom: -25px;
}

/*workBox txtBox ジャンル名 日本語 グラフィックデザイン*/
#service .genre .workBox:first-of-type h4::after{
	content: "グラフィックデザイン";
}

/*workBox txtBox ジャンル名 日本語 Webデザイン*/
#service .genre .workBox:nth-of-type(2) h4::after{
	content: "Webデザイン";
}

/*workBox txtBox ジャンル名 日本語 フォトグラフ*/
#service .genre .workBox:nth-of-type(3) h4::after{
	content: "フォトグラフ";
}

/*workBox txtBox ジャンル名 日本語 動画撮影＆編集*/
#service .genre .workBox:nth-of-type(4) h4::after{
	content: "動画撮影＆編集";
}

/*workBox txtBox 説明*/
#service .workBox .txtBox p{
	margin: 50px 0 0 0;
	color: #505050;
	font-size: 1.8rem;
	font-weight: 300;
	line-height: 36px;
	text-align: justify;
}

/*workBox photoBox共通*/
#service .workBox .photoBox{
	width: 55%;
}

/*workBox photo共通*/
#service .workBox .photo{
	width: 100%; 
	height: 480px;
	position: relative;
}

/*workBox photo 奇数*/
#service .genre .workBox:nth-of-type(odd) .photo{
	right: -100%;/*inview用*/
}

/*workBox photo 奇数*/
#service .genre .workBox.inview:nth-of-type(odd) .photoBox .photo{
	right: 0;
	transition: 0.7s;
	animation: AnimeWorkPhotoR 1s forwards;
}

@keyframes AnimeWorkPhotoR {
	0%{
		border-radius: 0 0 0 0;
	}
	70%{
		border-radius: 0 0 0 0;
	}
	100%{
		border-radius: 80px 0 0 0;
	}
}

/*workBox photo 偶数*/
#service .genre .workBox:nth-of-type(even) .photo{
	left: -100%;/*inview用*/
}

/*workBox photo 偶数*/
#service .genre .workBox.inview:nth-of-type(even) .photoBox .photo{
	left: 0;
	transition: 0.7s;
	animation: AnimeWorkPhotoL 1s forwards;
}

@keyframes AnimeWorkPhotoL {
	0%{
		border-radius: 0 0 0 0;
	}
	70%{
		border-radius: 0 0 0 0;
	}
	100%{
		border-radius: 0 80px 0 0;
	}
}

/*workBox photo グラフィックデザイン*/
#service .genre .workBox:first-of-type .photo{
	background: url(../img/top/bg_graphic.jpg) no-repeat center center / cover;
}

/*workBox photo WEBデザイン*/
#service .genre .workBox:nth-of-type(2) .photo{
	background: url(../img/top/bg_web.jpg) no-repeat center center / cover;
}

/*workBox photo フォトグラフ*/
#service .genre .workBox:nth-of-type(3) .photo{
	background: url(../img/top/bg_photograph.jpg) no-repeat center center / cover;
}

/*workBox photo ムービー*/
#service .genre .workBox:nth-of-type(4) .photo{
	background: url(../img/top/bg_movie.jpg) no-repeat center center / cover;
}

/*アイテムナビゲーション*/
#service .workBox .itemNav{
	margin: 16px 0 0 0;
}

/*アイテムナビゲーション 偶数*/
#service .genre .workBox:nth-of-type(even) .itemNav ul{
    justify-content: flex-end;
}

/*アイテムナビゲーション リスト全体*/
#service .workBox .itemNav ul{
	display: flex;
}

/*アイテムナビゲーション リスト*/
#service .workBox .itemNav ul li{
	margin: 0 15px 0 0;
	opacity: 0;/*inview用*/
}

/*アイテムナビゲーション リスト*/
#service .workBox:nth-of-type(odd) .itemNav ul li{
	transform: translate(300px,0);
}

/*アイテムナビゲーション リスト*/
#service .workBox:nth-of-type(even) .itemNav ul li{
	transform: translate(-300px,0);
}

/*アイテムナビゲーション リスト*/
#service .workBox:nth-of-type(even) .itemNav ul li{
	transform: translate(-300px,0);
	opacity: 0;
}

/*アイテムナビゲーション リスト*/
#service .workBox:nth-of-type(odd).inview .itemNav ul li,
#service .workBox:nth-of-type(even).inview .itemNav ul li{
	transform: translate(0,0);
	opacity: 1;
}

#service .workBox.inview .itemNav ul li:first-of-type{
	transition: 1s 1s;
}

#service .workBox.inview .itemNav ul li:nth-of-type(2){
	transition: 1s 1.1s;
}

#service .workBox.inview .itemNav ul li:nth-of-type(3){
	transition: 1s 1.2s;
}

#service .workBox.inview .itemNav ul li:nth-of-type(4){
	transition: 1s 1.3s;
}

#service .workBox.inview .itemNav ul li:nth-of-type(5){
	transition: 1s 1.4s;
}

#service .workBox.inview .itemNav ul li:nth-of-type(6){
	transition: 1s 1.5s;
}

#service .workBox.inview .itemNav ul li:nth-of-type(7){
	transition: 1s 1.6s;
}

/*アイテムナビゲーション リスト リンク*/
#service .workBox .itemNav ul li a{
	color: #505050;
	font-size: 1.6rem;
	font-weight: 300;
	position: relative;
}

/*アイテムナビゲーション リスト リンク*/
#service .workBox .itemNav ul li a::after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	transform: scale(0,1);
	transform-origin: center center;
	position: absolute;
	bottom: -8px;
	left: 0;
	transition: 0.3s;
}

/*アイテムナビゲーション リスト リンク*/
#service .workBox .itemNav ul li a.active::after{
	transform: scale(1,1);
	transition: 0.5s;
}

#service .workBox.inview .itemNav ul li:first-of-type a.active::after{
	background: #ED1C24;
}

#service .workBox.inview .itemNav ul li:nth-of-type(2) a.active::after{
	background: #F7931E;
}

#service .workBox.inview .itemNav ul li:nth-of-type(3) a.active::after{
	background: #D9E021;
}

#service .workBox.inview .itemNav ul li:nth-of-type(4) a.active::after{
	background: #39B54A;
}

#service .workBox.inview .itemNav ul li:nth-of-type(5) a.active::after{
	background: #29ABE2;
}

#service .workBox.inview .itemNav ul li:nth-of-type(6) a.active::after{
	background: #0071BC;
}

#service .workBox.inview .itemNav ul li:nth-of-type(7) a.active::after{
	background: #9E005D;
}

/*------------------------------
conpany info設定
------------------------------*/

/*インフォ 見出し 日本語*/
#info h2 span::after{
	content: "会社概要";
}

/*インフォ 見出し 装飾*/
#info h2::before{
	content: "";
	width: 450px;
	height: 40px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
	position: absolute;
	top: 10px;
	left: calc(50% - 450px / 2);
	z-index: 0;
}

/*会社概要テーブル*/
#info table{
	margin: 115px auto 50px;
	width: 1000px;
}

/*会社概要テーブル 行*/
#info table tr{
	display: block;
	padding: 45px 0;
	border-top: 1px solid #505050 ;
	opacity: 0;
	transform: translate(0, 300px);
}

/*会社概要テーブル 行*/
#info table tr.inview{
	opacity: 1;
	transform: translate(0, 0);
	transition: 1s 0.3s ease-in-out;
}

/*会社概要テーブル 最後の行*/
#info table tr:last-of-type{
	border-bottom: 1px solid #505050 ;
}

/*会社概要テーブル 見出し列*/
#info table th{
	width: 220px;
	color: #505050;
	font-size: 1.6rem;
	font-weight: 400;
	text-align: left;
	letter-spacing: 3px;
}

/*会社概要テーブル 情報列*/
#info table td{
	color: #505050;
	font-size: 1.6rem;
	font-weight: 300;
	text-align: left;
}

/*会社概要テーブル 地図*/
#info table td .map{
	margin: 0 0 0 60px;
	position: relative;
}

/*会社概要テーブル 地図 リンクアイコン*/
#info table td .map a::before{
	content: "";
	display: block;
	width: 10px;
	height: 15px;
	background: url(../img/common/ico_mappin.svg) no-repeat center center / cover;
	position: absolute;
	left: -14px;
	top: 5px;
}

/*会社概要テーブル 地図リンク*/
#info table td .map a{
	transition: 0.3s;
}

/*会社概要テーブル 地図リンク*/
#info table td .map a.active{
	text-decoration: underline;
	transition: 0.5s;
}


/*------------------------------
contact設定
------------------------------*/
/*コンタクト 見出し 日本語*/
#contact h2 span::after{
	content: "お問い合わせ";
}

/*コンタクト お問い合わせボタン*/
#contact .contactBtn{
	margin: 90px 0 0 0;
	width: 100%;
	opacity: 0;
	transform: translate(0,300px);
	filter: blur(60px);
}

/*コンタクト お問い合わせボタン*/
#contact .contactBtn.inview{
	opacity: 1;
	transform: translate(0,0);
	filter: blur(0);
	transition: 1.5s;
}

/*コンタクト お問い合わせ リンク*/
#contact .contactBtn a{
	display: block;
	width: 100%;
	height: 500px;
	color: #ffffff;
	font-size: 5rem;
	font-weight: 700;
	text-align: center;
	line-height: 500px;
	background: url(../img/top/bg_contact.jpg) no-repeat center center / cover;
}

/*コンタクト お問い合わせ リンク*/
#contact .contactBtn a.active{
	filter: grayscale(50%);
}

/*==============================
レスポンシブ設定
==============================*/

/*1980px以下の場合*/
@media screen and (max-width:1980px){

	/*==============================
	共通設定
	==============================*/

	section h2{
		font-size: 4rem;
		width: 600px;
	}

	/*見出し 日本語共通*/
	section h2 span::after{
		font-size: 1.2rem;
	}


	/*==============================
	ヘッダー設定
	==============================*/

	/*メインフォト*/
	#headerWrap .mainPhoto{
		height: 670px;
	}

	/*キャッチコピー リード文*/
	#headerWrap .catchCopy p{
		font-size: 1.4rem;
		line-height: 24px;
	}

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	service設定
	------------------------------*/

	/*workBox txtBox ジャンル名*/
	#service .workBox .txtBox h4{
		font-size: 3.8rem;
	}

	/*workBox txtBox ジャンル名 日本語共通*/
	#service .genre .workBox h4::after{
		font-size: 1.2rem;
	}

	/*workBox txtBox 説明*/
	#service .workBox .txtBox p{
		font-size: 1.4rem;
		line-height: 30px;
	}

	/*workBox photo共通*/
	#service .workBox .photo{
		height: 270px;
	}

	/*アイテムナビゲーション リスト リンク*/
	#service .workBox .itemNav ul li a{
		font-size: 1.3rem;
	}

	/*------------------------------
	conpany info設定
	------------------------------*/

	/*インフォ 見出し 装飾*/
	#info h2::before{
		width: 340px;
		height: 40px;
		left: calc(50% - 340px / 2);
	}

	/*会社概要テーブル*/
	#info table{
		width: 800px;
	}

	/*会社概要テーブル 行*/
	#info table tr{
		padding: 35px 0;
	}

	/*会社概要テーブル 見出し列*/
	#info table th{
		font-size: 1.4rem;
	}

	/*会社概要テーブル 情報列*/
	#info table td{
		font-size: 1.4rem;
	}

	/*会社概要テーブル 地図 リンクアイコン*/
	#info table td .map a::before{
		width: 8px;
		height: 12px;
		left: -14px;
		top: 5px;
	}

	/*------------------------------
	contact設定
	------------------------------*/

	/*コンタクト お問い合わせ リンク*/
	#contact .contactBtn a{
		height: 335px;
		line-height: 335px;
	}

}

/*1000px以下の場合*/
@media screen and (max-width:1000px){

	/*==============================
	ヘッダー設定
	==============================*/

	/*グローバルナビ*/
	#globalNav{;
		transform: translate(0,0);
	}

	/*グローバルナビ*/
	#headerWrap.inview #globalNav{
		transform: translate(0,0);
		transition: none;
	}

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	about設定
	------------------------------*/

	/*アバウト全体*/
	#about{
		margin: -125px 0 0 0;
	}

	/*aboutBox*/
	#about .aboutBox{
		width: calc(100% - 80px);
	}

	/*aboutBox リスト 奇数*/
	#about .aboutBox li:nth-of-type(odd){
		width: 30%;
	}

	/*aboutBox 見出し*/
	#about .aboutBox li:first-of-type h3{
		font-size: 4rem;
		line-height: 60px;
	}

	/*aboutBox 見出し 日本語*/
	#about .aboutBox li:first-of-type h3::before{
		font-size: 1.4rem;
		top: -40px;
	}

	/*------------------------------
	service設定
	------------------------------*/

	/*サービス イントロ*/
	#service .intro{
		width: calc(100% - 80px);
	}

	/*サービス イントロ 見出し*/
	#service .intro h3{
		font-size: 4rem;
	}

	/*workBox共通*/
	#service .workBox{
		margin: 150px 0 0 0;
	}

	/*workBox 1つ目*/
	#service .genre .workBox:first-of-type{
		margin: 100px 0 0 0;
	}

	/*workBox txtBox*/
	#service .workBox .txtBox{
		padding: 30px 60px;
	}

	/*workBox photoBox共通*/
	#service .workBox .photoBox{
		width: 55%;
	}

	/*アイテムナビゲーション*/
	#service .workBox .itemNav{
		margin: 10px 0 0 0;
	}

	/*------------------------------
	conpany info設定
	------------------------------*/

	/*会社概要テーブル*/
	#info table{
		width: 680px;
	}

	/*会社概要テーブル 見出し列*/
	#info table th{
		width: 160px;
	}

	/*------------------------------
	contact設定
	------------------------------*/

	/*コンタクト お問い合わせ リンク*/
	#contact .contactBtn a{
		height: 250px;
		font-size: 4rem;
		line-height: 250px;
	}

}

/*768px以下の場合*/
@media screen and (max-width:768px){

	/*==============================
	共通設定
	==============================*/

	/*セクション共通*/
	section{
		padding: 90px 0;
	}

	/*見出し共通*/
	section h2{
		width: 480px;
		height: 40px;
		font-size: 3rem;
	}

	/*見出し共通*/
	section h2::after{
		top: -5px;
	}


	/*==============================
	ヘッダー設定
	==============================*/

	/*ヘッダー全体*/
	#headerWrap{
		padding: 0 0 150px 0;
		height: 100dvh;
	}

	/*メインフォト*/
	#headerWrap .mainPhoto{
		width: 80%;
		height: 80%;
	}

	@keyframes AnimeMainPhoto{
		0%{
			border-radius: 0 0 0 0;
			filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
			transform: translate(100%,0);
		}
		70%{
			border-radius: 0 0 0 0;
			filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
			transform: translate(0,0);
			transition: 1s 0.5s;
		}
		100%{
			border-radius: 60px 0 0 60px;
			filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.15));
			transform: translate(0,0);
			transition: 1s 0.5s;
		}
	}

	/*キャッチコピー*/
	#headerWrap .catchCopy{
		width: 60%;
		left: 30px;
		top: auto;
		bottom: 140px;
	}

	/*キャッチコピー リード文*/
	#headerWrap .catchCopy p{
		margin: 15px 0 0 0;
	}

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	about設定
	------------------------------*/

	/*アバウト全体*/
	#about{
		margin: -85px 0 0 0;
	}

	/*aboutBox*/
	#about .aboutBox{
		flex-direction: column;
	}

	/*aboutBox リスト 奇数*/
	#about .aboutBox li:nth-of-type(odd){
		width: 330px;
	}

	/*aboutBox 見出し*/
	#about .aboutBox li:first-of-type h3{
		text-align: center;
	}

	/*aboutBox 見出し 日本語*/
	#about .aboutBox li:first-of-type h3::before{
		width: 100%;
		text-align: center;
	}

	/*aboutBox 写真*/
	#about .aboutBox li:nth-of-type(2){
		margin: 50px auto 0;
	}

	/*aboutBox リスト 3つ目*/
	#about .aboutBox li:nth-of-type(3){
		margin: 60px auto 0;
	}

	/*------------------------------
	service設定
	------------------------------*/

	/*サービス イントロ*/
	#service .intro{
		margin: 60px auto 0;
	}

	/*サービス イントロ 見出し*/
	#service .intro h3{
		font-size: 3.6rem;
	}

	/*サービス イントロ 説明文*/
	#service .intro .desc{
		margin: 25px 0 0 0;
	}

	/*workBox共通*/
	#service .workBox{
		margin: 150px 0 0 0;
	}

	/*workBox 1つ目*/
	#service .genre .workBox:first-of-type{
		margin: 100px 0 0 0;
	}

	/*workBox txtBox*/
	#service .workBox .txtBox{
		padding: 30px 40px;
		width: 55%;
	}

	/*workBox txtBox ジャンル名*/
	#service .workBox .txtBox h4{
		font-size: 3rem;
	}

	/*workBox txtBox 説明*/
	#service .workBox .txtBox p{
		margin: 30px 0 0 0;
	}

	/*workBox photoBox共通*/
	#service .workBox .photoBox{
		width: 45%;
	}

	/*workBox photo共通*/
	#service .workBox .photo{
		height: 250px;
	}

	/*アイテムナビゲーション*/
	#service .workBox .itemNav{
		display: none;
	}

	/*------------------------------
	conpany info設定
	------------------------------*/

	/*会社概要テーブル*/
	#info table{
		width: calc(100% - 80px);
	}

	/*会社概要テーブル 見出し列*/
	#info table th{
		width: 110px;
		font-size: 1.4rem;
		letter-spacing: 0;
	}

	/*会社概要テーブル 情報列*/
	#info table td{;
		font-size: 1.4rem;
		line-height: 26px;
		text-align: justify;
	}

	/*会社概要テーブル 地図*/
	#info table td .map{
		margin: 0 0 0 30px;
	}

	/*会社概要テーブル 地図 リンクアイコン*/
	#info table td .map a::before{
		width: 9px;
		height: 14px;
	}

	/*------------------------------
	contact設定
	------------------------------*/

	/*コンタクト お問い合わせ リンク*/
	#contact .contactBtn a{
		height: 200px;
		font-size: 3.6rem;
		line-height: 200px;
	}

}


/*600px以下の場合*/
@media screen and (max-width:600px){

	/*==============================
	共通設定
	==============================*/

	/*セクション共通*/
	section{
		padding: 60px 0;
	}

	/*見出し共通*/
	section h2{
		width: 320px;
		font-size: 2.6rem;
	}

	/*見出し 日本語共通*/
	section h2 span::after{
		font-size: 1.1rem;
		bottom: -15px;
	}

	/*==============================
	ヘッダー設定
	==============================*/

	/*メインフォト*/
	#headerWrap .mainPhoto{
		margin: 15px 0 0 auto;
		width: 85%;
		height: 80%;
	}

	@keyframes AnimeMainPhoto{
		0%{
			border-radius: 0 0 0 0;
			filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
			transform: translate(100%,0);
		}
		70%{
			border-radius: 0 0 0 0;
			filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
			transform: translate(0,0);
			transition: 1s 0.5s;
		}
		100%{
			border-radius: 40px 0 0 40px;
			filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.15));
			transform: translate(0,0);
			transition: 1s 0.5s;
		}
	}

	/*キャッチコピー*/
	#headerWrap .catchCopy{
		width: 80%;
		bottom: 70px;
	}

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	about設定
	------------------------------*/

	/*アバウト全体*/
	#about{
		margin: 0;
	}

	/*aboutBox*/
	#about .aboutBox{
		margin: 60px auto 0;
		width: calc(100% - 60px);
	}

	/*aboutBox リスト 奇数*/
	#about .aboutBox li:nth-of-type(odd){
		width: 100%;
	}

	/*aboutBox 写真*/
	#about .aboutBox li:nth-of-type(2){
		margin: 30px auto 0;
	}

	/*aboutBox リスト 3つ目*/
	#about .aboutBox li:nth-of-type(3){
		margin: 40px auto 0;
	}

	/*------------------------------
	service設定
	------------------------------*/

	/*サービス イントロ*/
	#service .intro{
		margin: 40px auto 0;
		width: calc(100% - 60px);
	}

	/*サービス イントロ 見出し*/
	#service .intro h3{
		font-size: 3rem;
		line-height: 46px;
	}

	/*サービス イントロ 説明文*/
	#service .intro .desc{
		margin: 15px 0 0 0;
		text-align: justify;
	}

	/*workBox共通*/
	#service .workBox,
	#service .genre .workBox:nth-of-type(even){
		margin: 30px 0 0 0;
		flex-direction: column-reverse;
	}

	/*workBox 1つ目*/
	#service .genre .workBox:first-of-type{
		margin: 80px 0 0 0;
	}

	/*workBox txtBox*/
	#service .workBox .txtBox{
		padding: 30px 30px;
		width: 100%;
	}

	/*workBox txtBox WEBデザイン 装飾*/
	#service .genre .workBox:nth-of-type(2) h4::before{
		left: 160px;
		top: 0;
	}

	/*workBox txtBox ムービー 装飾*/
	#service .genre .workBox:nth-of-type(4) h4::before{
		left: 50px;
		top: -20px;
	}

	/*workBox txtBox 説明*/
	#service .workBox .txtBox p{
		margin: 30px 0 0 0;
	}

	/*workBox photoBox共通*/
	#service .workBox .photoBox{
		margin: 0 auto 0 0;
		width: 95%;
	}

	/*workBox photoBox共通*/
	#service .workBox:nth-of-type(odd) .photoBox{
		margin: 0 0 0 auto;
	}

	/*workBox photo共通*/
	#service .workBox .photo{
		height: 200px;
	}

	@keyframes AnimeWorkPhotoR {
		0%{
			border-radius: 0 0 0 0;
		}
		70%{
			border-radius: 0 0 0 0;
		}
		100%{
			border-radius: 40px 0 0 0;
		}
	}

	@keyframes AnimeWorkPhotoL {
		0%{
			border-radius: 0 0 0 0;
		}
		70%{
			border-radius: 0 0 0 0;
		}
		100%{
			border-radius: 0 40px 0 0;
		}
	}

	/*------------------------------
	conpany info設定
	------------------------------*/

	/*インフォ 見出し 装飾*/
	#info h2::before{
		width: 200px;
		left: calc(50% - 200px / 2);
	}

	/*会社概要テーブル*/
	#info table{
		margin: 60px auto 0;
		width: calc(100% - 40px);
	}

	/*会社概要テーブル 行*/
	#info table tr{
		padding: 20px 0;
	}

	/*会社概要テーブル 見出し列*/
	#info table th{
		vertical-align: middle;
	}

	/*------------------------------
	contact設定
	------------------------------*/

	/*コンタクト お問い合わせボタン*/
	#contact .contactBtn{
		margin: 40px 0 0 0;
	}
	

}