@charset "UTF-8";

header {
	
	position: relative;
	width:  100%;
	height: 20.4rem;
	background-image: url('../img/header_bg.webp');
	background-size: cover;
	background-position: center center;
	border-bottom: 1rem solid #333;
	box-shadow: 0 1rem 1rem rgba(0,0,0, 0.2);

}

header h1 {
	
	width: 100%;
	font-family: toppan-bunkyu-midashi-go-std, sans-serif;
	font-style: normal;
  font-weight: 900;
	font-size: 3.6rem;
	letter-spacing: 0.06em;

}

header h1 span {
	
	display: inline-block;
	margin-left: 0.1em;
	letter-spacing: 0.16em;

}

header h1 img {
	
	width: 8.9rem;
	margin-right: 2.5rem;

}

header h1 a {

	color: #fff;

}

#work {

	overflow-x: hidden;

}

#work h2 {
	
	margin-bottom: 20.1rem;
	text-align: center;
	font-family: poiret-one, sans-serif;
	font-size: 3rem;
	font-style: normal;
  font-weight: 700;
 	letter-spacing: 0.25em;
 	transform: translateX(0.1em);
 	
}

#work h2 img {

	display: block;
	width: 4.5rem;
	margin: 0 auto;
	margin-top: 0.2rem;

}

#work .inner {

	width: 116rem;

}

#work .bg1 {

	padding-top:    12rem;
	padding-bottom: 2.4rem;
	background-image: url('../img/works.webp');
	background-size: cover;
	background-position: center center;
	box-shadow: 0 1rem 1rem rgba(0,0,0, 0.2);

}

#work .bg1 h3 {
	
	opacity: 0;
	position: relative;
	margin-bottom: 5.8rem;
	text-align: right;
	font-size: 2.4rem;
	line-height: 1.6;
	color: #010101;
	letter-spacing: 0.65em;
	transform: translateX(6rem);

}

#work .bg1 h3.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

#work .bg1 h3:after {

	position: absolute;
	right:  0;
	bottom: -0.3rem;
	content: "";
	width: 102%;
	height: 0.2rem;
	background: #010101;

}

#work .bg1 h3 .block {
	
	display: inline-block;
	margin-right: 0.35em;
	padding: 0 0.2em;
	line-height: 1.5;
	color: #DCD6D3;
	background: #010101;
	letter-spacing: 0;

}

#work .bg1 h3 .en {

	display: block;
	font-size: 1.6rem;
	letter-spacing: 0.55em;

}

#work h3 .last {

	letter-spacing: 0;

}

#work .bnr {
	
	opacity: 0;
	position: relative;
	display: block;
	height: 6.2rem;
	margin-bottom: 5rem;
  color: #fff;
	background: #172240;
	transform: translateX(6rem);
	transition: all 0.06s linear;

}

#work .bnr.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

@media (any-hover: hover) {

	#work .bnr:hover {
		
		color: #000;
		background: #fff;
	
	}

}

#work .bnr .ja {

	position: absolute;
	top:   1.1rem;
	right: 1rem;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.65em;

}

#work .bnr .en {

	position: absolute;
	top:  3.0rem;
	left: 3.0rem;
	font-family: din-2014, sans-serif;
	font-style: normal;
  font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.45em;

}

#work .bg2 {
	
	position: relative;
	padding-top:    22.5rem;
	padding-bottom: 12.2rem;
	background: #DCD6D3;

}

#work .type2 h3 {
	
	opacity: 0;
	position: relative;
	margin-bottom: 12.2rem;
	text-align: right;
	font-size: 3rem;
	line-height: 1.6;
	color: #010101;
	letter-spacing: 0.65em;
	transform: translateX(6rem);

}

#work .type2 h3.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

#work .type2 h3:after {

	position: absolute;
	right:  0;
	bottom: -0.3rem;
	content: "";
	width: 102%;
	height: 0.2rem;
	background: #010101;

}

#work .type2 h3 .block {
	
	display: inline-block;
	margin-right: 0.35em;
	padding: 0 0.35em;
	line-height: 1.2;
	color: #DCD6D3;
	background: #010101;
	letter-spacing: 0;

}

#work .type2 h3 .block2 {
	
	padding: 0 0.25em;
	color: #fff;

}

#work .type2 h3 .en {

	display: block;
	font-size: 1.6rem;
	letter-spacing: 0.55em;

}

#work .wrap {

	width: 122rem;
	margin: 0 auto;
	color: #000;
	white-space: nowrap;

}

#work .read {
	
	margin-bottom: 5.7rem;
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 0.5em;

}

#work .wrap h4 {
	
	margin-bottom: 0.4rem;
	font-size: 1.6rem;
	letter-spacing: 0.6em;

}

#work .wrap h4:before {

	content: "";
	display: inline-block;
	width:  0.75em;
	height: 0.75em;
	margin-right: 1em;
	background: #000;

}

#work .wrap .line {
	
	margin-bottom: 3rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.65em;

}

#work .bg2 .aqua_arrow {

	position: absolute;
	top:   29.6rem;
	right: 5.2rem;
	width: 4rem;

}

#work .bg3 {
	
	padding-top: 13.6rem;
	background: #C2C2C2;

}

#work .bg3 .wrap .line {

	margin-bottom: 3.7rem;

}

#work .bg3 .wrap h4.last {
	
	margin-top: 5.6rem;

}

#work .bg3 .wrap .line.last {
	
	margin-bottom: 0;

}

#work .bg3 .work_bg {
	
	position: relative;
	height: 73.8rem;
	background-image: url('../img/work_bg.webp');
	background-size: cover;
	background-position: center center;

}

#work .bg3 .work_bg:after {

	position: absolute;
	top: -1px;
	left: 0;
	content: "";
	width:  100%;
	height: 2px;
	background: #C2C2C2;

}

#work .bg4 {

	padding-top:    13.2rem;
	padding-bottom: 15.5rem;
	background: #E8E3D7;

}

#work .bg4 h4 {
	
	margin-bottom: 5.6rem;
	font-size: 2rem;
	letter-spacing: 0.67em;

}

#work .bg4 .wrap h4:before {

	display: none;

}

#work .bg4 p {
	
	margin-bottom: 14.8rem;
	font-size: 1.6rem;
	line-height: 1.85;
	letter-spacing: 0.65em;

}

#work .bg4 .box {

	position: relative;

}

#work .bg4 .box .img {

	position: absolute;
	top:   1.8rem;
	right: -14rem;
	width: 29.6rem;

}

#work .bg5 {

	padding-top:    14.6rem;
	padding-bottom: 15.2rem;
	background: #DCD6D3;

}

#work .bg5 h4 {
	
	margin-bottom: 5.6rem;
	font-size: 2rem;
	letter-spacing: 0.67em;

}

#work .bg5 .wrap h4:before {

	display: none;

}

#work .bg5 p {
	
	margin-bottom: 3rem;
	font-size: 1.6rem;
	line-height: 1.85;
	letter-spacing: 0.65em;

}

#work .list {
	
	position: relative;
	padding-top:    6rem;
	padding-bottom: 2rem;
	background: #172240;

}

#work .list ul {
	
	opacity: 0;
	width: 100rem;
	margin: 0 auto;
	transform: translateX(6rem);

}

#work .list ul.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

#work .list ul li {
	
	float: left;
	width: 50%;
	margin-bottom: 0.7rem;
	padding-left: 5.8rem;
	font-size: 1.8rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.53em;

}

#work .list ul li:nth-child(even) {

	padding-left: 6.4rem;

}

#work .list ul li:before {
	
	display: inline-block;
	content: "";
	width:  0.8em;
	height: 0.8em;
	margin-right: 0.7em;
	background: #fff;
	transform: translateY(0.1rem);

}

#work .anime {

	opacity: 0;
	transform: translateX(6em);

}

#work .anime.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

@media only screen and (max-width: 1820px) {



}


/* MacBook Pro16 */
@media only screen and (max-width: 1728px) {



}


@media only screen and (max-width: 1670px) {



}


@media only screen and (max-width: 1620px) {



}


@media only screen and (max-width: 1570px) {



}


/* MacBook Pro14 */
@media only screen and (max-width: 1512px) {



}


@media only screen and (max-width: 1440px) {



}


@media only screen and (max-width: 1400px) {



}


/* 中サイズ */
@media only screen and (max-width: 1366px) {



}


@media only screen and (max-width: 1320px) {



}


/* MacBook Air */
@media only screen and (max-width: 1280px) {



}

@media only screen and (max-width: 1240px) {



}


@media only screen and (max-width: 1200px) {



}


/* iPad Pro11の横 */
@media only screen and (max-width: 1194px) {



}


/* iPad 5th Airの横 */
@media only screen and (max-width: 1180px) {



}


/* iPad 6th Miniの横 */
@media only screen and (max-width: 1133px) {



}


@media only screen and (max-width: 1100px) {



}


/* iPad 9thの横 */
@media only screen and (max-width: 1080px) {



}


/* iPadPro */
@media only screen and (max-width: 1024px) {



}


@media only screen and (max-width: 950px) {
	
	.pc_break {
	
		display: none;
	
	}
	
	header {
		
		padding-top: 5rem;
		height: 28rem;
		background-image: url('../img/header_bg.webp');
		background-position: center center;
		border-bottom: 1rem solid #333;
		box-shadow: 0 1rem 1rem rgba(0,0,0, 0.2);

	}

	header h1 {
		
		font-size: 6rem;
		letter-spacing: 0.06em;

	}

	header h1 span {
		
		margin-left: 0.1em;
		letter-spacing: 0.16em;

	}

	header h1 img {
		
		width: 13rem;
		margin-right: 3rem;

	}

	#work h2 {
		
		margin-bottom: 26rem;
		font-size: 6rem;
	 	letter-spacing: 0.25em;
	 	transform: translateX(0);
	 	
	}

	#work h2 img {

		width: 8rem;
		margin-top: 0.4rem;

	}

	#work .inner {

		width: 94%;

	}

	#work .bg1 {

		padding-top:    18rem;
		padding-bottom:  8rem;
		background-image: url('../img/works.webp');
		background-position: center center;
		box-shadow: 0 1rem 1rem rgba(0,0,0, 0.2);

	}
	
	#work .bg1 .inner {
	
		width: 94%;
	
	}

	#work .bg1 h3 {
		
		margin-bottom: 10rem;
		font-size: 6rem;
		line-height: 1.8;
		letter-spacing: 0.65em;

	}

	#work .bg1 h3 .block {
		
		margin-right: 0.35em;
		padding: 0 0.2em;
		line-height: 1.5;

	}

	#work .bg1 h3 .en {

		font-size: 4rem;
		letter-spacing: 0.55em;

	}

	#work .bnr {
		
		height: 16rem;
		margin-bottom: 8rem;

	}

	#work .bnr .ja {

		top:   3.4rem;
		right: 2rem;
		font-size: 5rem;
		letter-spacing: 0.5em;

	}

	#work .bnr .en {

		top:  8.4rem;
		left: 4.0rem;
		font-size: 3rem;
		letter-spacing: 0.4em;

	}

	#work .bg2 {
		
		padding-top:    18rem;
		padding-bottom: 14rem;

	}

	#work .type2 h3 {
		
		margin-bottom: 12.2rem;
		font-size: 6rem;
		line-height: 1.6;
		letter-spacing: 0.65em;

	}

	#work .type2 h3 .block {
		
		margin-right: 0.35em;
		padding: 0 0.35em;
		line-height: 1.2;

	}

	#work .type2 h3 .block2 {
		
		padding: 0 0.25em;

	}

	#work .type2 h3 .en {

		font-size: 4rem;
		letter-spacing: 0.55em;

	}

	#work .wrap {

		width: 82%;
		white-space: normal;

	}

	#work .read {
		
		margin-bottom: 7rem;
		font-size: 4rem;
		letter-spacing: 0.1em;

	}

	#work .wrap h4 {
		
		margin-bottom: 2rem;
		font-size: 4rem;
		letter-spacing: 0.2em;

	}
	
	#work .wrap h4:before {

		margin-right: 0.5em;

	}

	#work .wrap .line {
		
		margin-bottom: 8rem;
		font-size: 3.4rem;
		line-height: 1.8;
		letter-spacing: 0.1em;

	}

	#work .bg2 .aqua_arrow {

		top:   80rem;
		right: 3rem;
		width: 5.5rem;

	}

	#work .bg3 {
		
		padding-top: 18rem;

	}

	#work .bg3 .wrap .line {

		margin-bottom: 8rem;

	}

	#work .bg3 .wrap h4.last {
		
		margin-top: 8rem;

	}

	#work .bg3 .work_bg {
		
		height: 73.8rem;
		margin-top: 8rem;
		background-image: url('../img/work_bg.webp');
		background-position: center center;

	}

	#work .bg4 {

		padding-top:    18rem;
		padding-bottom: 6rem;

	}

	#work .bg4 h4 {
		
		margin-bottom: 6rem;
		font-size: 4.4rem;
		letter-spacing: 0.2em;

	}

	#work .bg4 p {
		
		margin-bottom: 15rem;
		font-size: 3.4rem;
		line-height: 1.85;
		letter-spacing: 0.1em;

	}

	#work .bg4 .box .img {

		position: relative;
		top:  auto;
		right: auto;
		width: 55%;
		margin-bottom: 6rem;

	}

	#work .bg5 {

		padding-top:    18rem;
		padding-bottom: 16rem;

	}

	#work .bg5 h4 {
		
		margin-bottom: 6rem;
		font-size: 4rem;
		letter-spacing: 0.2em;

	}

	#work .bg5 p {
		
		margin-bottom: 3rem;
		font-size: 3.4rem;
		line-height: 1.85;
		letter-spacing: 0.1em;

	}

	#work .list {
		
		padding-top:    8rem;
		padding-bottom: 2rem;

	}

	#work .list ul {
		
	  width: -moz-fit-content;
	  width: fit-content;
		margin: 0;
		margin: 0 auto;
		padding-left: 0;

	}

	#work .list ul li {
		
		float: none;
		width: 100%;
		margin-bottom: 1.8rem;
		padding-left: 0;
		font-size: 5rem;
		letter-spacing: 0.4em;
	}

	#work .list ul li:nth-child(even) {

		padding-left: 0;

	}
	
	#work .list ul li:last-child {
	
		margin-bottom: 0;
	
	}

}


/* iPhone14 ProMaxの横 */
@media only screen and (max-width: 932px) {


	
}


/* XRの横 */
@media only screen and (max-width: 896px) {


	
}


/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {



}


/* iPhone14 Proの横 */
@media only screen and (max-width: 852px) {



}


/* iPhone14の横*/
@media only screen and (max-width: 844px) {



}


/* iPad Pro11 */
@media only screen and (max-width: 834px) {



}


/* iPad Air */
@media only screen and (max-width: 820px) {



}


/* iPhone13 miniの横 */
@media only screen and (max-width: 812px) {



}


/* iPad 9th */
@media only screen and (max-width: 810px) {



}


/* iPad */
@media only screen and (max-width: 768px) {


}


/* iPad 6th Mini */
@media only screen and (max-width: 744px) {



}


/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {



}


/* iPhone8の横 */
@media only screen and (max-width: 667px) {



}


/* iPhone5の横 */
@media only screen and (max-width: 568px) {



}


/* AndLoidL */
@media only screen and (max-width: 480px) {

	header {
		
		padding-top: 8rem;
		height: 28rem;
		background-image: url('../img/header_bg.webp');
		background-position: center center;
		box-shadow: 0 1rem 1rem rgba(0,0,0, 0.2);

	}

	header h1 {
		
		font-size: 8rem;
		letter-spacing: 0.06em;

	}

	header h1 span {
		
		margin-left: 0.1em;
		letter-spacing: 0.12em;

	}

	header h1 img {
		
		width: 19rem;
		margin-right: 4rem;

	}

	#work h2 {
		
		margin-bottom: 26rem;
		font-size: 9rem;
	 	letter-spacing: 0.25em;
	 	
	}

	#work h2 img {

		width: 12rem;
		margin-top: 0.8rem;

	}

	#work .inner {

		width: 94%;

	}

	#work .bg1 {

		padding-top:    18rem;
		padding-bottom:  8rem;
		background-image: url('../img/works.webp');
		background-position: center center;
		box-shadow: 0 1rem 1rem rgba(0,0,0, 0.2);

	}
	
	#work .bg1 .inner {
	
		width: 94%;
	
	}

	#work .bg1 h3 {
		
		margin-bottom: 15rem;
		font-size: 8.2rem;
		line-height: 1.8;
		letter-spacing: 0.65em;

	}

	#work .bg1 h3 .block {
		
		margin-right: 0.35em;
		padding: 0 0.2em;
		line-height: 1.5;

	}

	#work .bg1 h3 .en {

		font-size: 5.6rem;
		letter-spacing: 0.55em;

	}

	#work .bnr {
		
		height: 20rem;
		margin-bottom: 8rem;

	}

	#work .bnr .ja {

		top:   4.4rem;
		right: 2rem;
		font-size: 6rem;
		letter-spacing: 0.4em;

	}

	#work .bnr .en {

		top:  9.4rem;
		left: 4.0rem;
		font-size: 4.8rem;
		letter-spacing: 0.2em;

	}

	#work .bg2 {
		
		padding-top:    18rem;
		padding-bottom: 11rem;

	}

	#work .type2 h3 {
		
		margin-bottom: 15rem;
		font-size: 8.2rem;
		line-height: 1.7;
		letter-spacing: 0.65em;

	}
	
	#work .type2 h3:after {

		right:  0;
		bottom: -0.3rem;
		width: 102%;
		height: 0.3rem;

	}

	#work .type2 h3 .block {
		
		margin-right: 0.35em;
		padding: 0 0.35em;
		line-height: 1.2;

	}

	#work .type2 h3 .block2 {
		
		padding: 0 0.25em;

	}

	#work .type2 h3 .en {

		font-size: 5.6rem;
		letter-spacing: 0.55em;

	}

	#work .wrap {

		width: 86%;

	}

	#work .read {
		
		margin-bottom: 10rem;
		font-size: 7.2rem;
		letter-spacing: 0.08em;

	}

	#work .wrap h4 {
		
		margin-bottom: 3rem;
		font-size: 7.2rem;
		letter-spacing: 0.2em;

	}
	
	#work .wrap h4:before {

		margin-right: 0.5em;

	}

	#work .wrap .line {
		
		margin-bottom: 13rem;
		font-size: 6rem;
		line-height: 1.8;
		letter-spacing: 0.08em;

	}

	#work .bg2 .aqua_arrow {

		top:   40%;
		right: 2rem;
		width: 7rem;

	}

	#work .bg3 {
		
		padding-top: 18rem;

	}

	#work .bg3 .wrap .line {

		margin-bottom: 13rem;

	}

	#work .bg3 .wrap h4.last {
		
		margin-top: 9rem;

	}

	#work .bg3 .work_bg {
		
		height: 73.8rem;
		margin-top: 8rem;
		background-image: url('../img/work_bg.webp');
		background-position: center center;

	}

	#work .bg4 {

		padding-top:    18rem;
		padding-bottom: 6rem;

	}

	#work .bg4 h4 {
		
		margin-bottom: 6rem;
		font-size: 8rem;
		letter-spacing: 0.2em;

	}

	#work .bg4 p {
		
		margin-bottom: 16rem;
		font-size: 6rem;
		line-height: 1.8;
		letter-spacing: 0.08em;

	}

	#work .bg4 .box .img {

		width: 60%;
		margin-bottom: 9rem;

	}

	#work .bg5 {

		padding-top:    18rem;
		padding-bottom: 16rem;

	}

	#work .bg5 h4 {
		
		margin-bottom: 6rem;
		font-size: 7.2rem;
		letter-spacing: 0.2em;

	}

	#work .bg5 p {
		
		margin-bottom: 4rem;
		font-size: 6rem;
		line-height: 1.8;
		letter-spacing: 0.08em;

	}

	#work .list {
		
		padding-top:    12rem;
		padding-bottom: 5rem;

	}
	
	#work .list ul {
		
		width: 100%;
		margin: 0;
		margin-left: 7%;
		transform: translateX(6rem);

	}

	#work .list ul li {
		
		margin-bottom: 1.8rem;
		font-size: 7.2rem;
		letter-spacing: 0.15em;
	}

}


/* Iphone13 Pro Max */
@media only screen and (max-width: 430px) {



}


/* Iphone12 Pro Max */
@media only screen and (max-width: 428px) {


}


/* iPhonePlus */
@media only screen and (max-width: 414px) {



}


/* iPhone14 Pro */
@media only screen and (max-width: 393px) {



}


/* iPhone12 Pro */
@media only screen and (max-width: 390px) {



}


/* iPhone8 */
@media only screen and (max-width: 375px) {



}


/* Galaxy */
@media only screen and (max-width: 360px) {



}


/* iPhone5 */
@media only screen and (max-width: 320px) {



}