html{
	cursor: none !important;
}
body {
    height: 100%;
    margin: 0;
    font-feature-settings: 'palt';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-family: "source-han-sans-cjk-ja", sans-serif;
	font-weight: 300;
	font-style: normal; 
	color: #231815;
	cursor: none !important;
	background: #eee;
}

/* 

Yu Gothic Pr6N R
font-family: "yu-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;

DNP ShueiAntiStd B
font-family: "dnp-shuei-anti-std", sans-serif;
font-weight: 600;
font-style: normal;

Corporate S Pro Regular
font-family: "corporate-s", sans-serif;
font-weight: 400;
font-style: normal;

Source Han Sans Normal
font-family: "source-han-sans-cjk-ja", sans-serif;
font-weight: 300;
font-style: normal;

Source Han Sans Medium
font-family: "source-han-sans-cjk-ja", sans-serif;
font-weight: 500;
font-style: normal;

Source Han Sans Bold
font-family: "source-han-sans-cjk-ja", sans-serif;
font-weight: 700;
font-style: normal;




*/

.ge{
	width: 80px;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
}

/* cursor -------------------------------- */
a{
	text-decoration: none;
	color: #000;
}

@media screen and (min-width: 1401px) and (max-width: 5120px) {
	.sp-on{
		display: none !important;
	}

	/* .all_bg{
		width: 100%;
		background: rgba(255, 255, 255, .4);
		backdrop-filter: blur(0.5px);
	} */

	#cursor{
		position: fixed;
		background: #000;
		border-radius:10px;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		z-index: 2;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.1s;
		z-index: 9999;
	}
	#stalker{
		position: fixed;
		background: #ffff00;
		width: 40px;
		height: 40px;
		border-radius:30px;
		margin: -20px 0 0 -20px;
		z-index: 1;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.3s;
		z-index: 9999;
	}
	#stalker.active{
		transform: scale(1.8);
	}

	/* fix-logo -------------------------------- */
	.fix-logo{
		width: max-content;
		position: fixed;
		top: 3%;
		left: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 1% 2%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
	}
	.fix-logo .fix-logo-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-logo .fix-logo-in li{
		width: max-content;
	}
	.fix-logo .fix-logo-in li:nth-child(2){
		margin: 0 20px;
	}
	.fix-logo .fix-logo-in li img{
		height: 36px;
	}

	/* fix-nav -------------------------------- */
	.fix-nav{
		width: max-content;
		position: fixed;
		top: 3%;
		right: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 1.5% 2%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);

		opacity: 0;
		transform: translateY(-20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		pointer-events: none;
	}
	.fix-nav.visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.fix-nav .fix-nav-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-nav .fix-nav-in li{
		width: max-content;
		margin: 0 30px 0 0;
	}
	.fix-nav .fix-nav-in li:last-child{
		width: max-content;
		margin: 0 0px 0 0;
	}
	.fix-nav .fix-nav-in li a{
		width: max-content;
		display: block;
		font-size: 14px;
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 2px;
		position: relative;
	}
	.fix-nav .fix-nav-in li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform 0.3s;
	}
	.fix-nav .fix-nav-in li a:hover::after {
		transform: scale(.97, 1);
	}

	.fix-nav .fix-nav-in li a.link-motion {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.fix-nav .fix-nav-in li a.link-motion:hover {
		box-shadow: none;
	}

	/* header -------------------------------- */
	header{
		width: 100%;
		height: 100vh;
	}

	header .mv-logo{
		width: 15%;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 5%;
		bottom: 10%;
	}
	header .mv-logo li{
		width: 45%;
	}
	header .mv-title{
		width: 35%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 5%;
	}
	header .mv-title li:nth-child(1){
		width: 80%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(2){
		width: 100%;
		position: relative;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-title li:nth-child(3){
		width: 69%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(4){
		width: 100%;
		line-height: 0;
	}
	header .mv-title li .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #ffff00;
		z-index: 10;
	}
	header .mv-title li .txt {
		font-size: 26px;
		line-height: 1.6;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		width: 100%;
	}
	header .mv-title li .dot {
		color: #ffff00;
		transition: color 0.2s ease;
		display: inline-block;
		width: 1em;
		text-align: center;
		margin: 0 1px 0 0;
	}

	header .mv-banner{
		width: 20%;
		position: absolute;
		right: 2%;
		bottom: 3%;
	}
	header .mv-banner .cup{
		width: 100%;
		text-align: right;
		font-size: 10px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}
	header .mv-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	header .mv-banner a:hover{
		border-radius: 25px;
		transition: .3s;
	}
	header .mv-banner a .title{
		width: 100%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-banner a .img{
		width: 45%;
		overflow: hidden;
	}
	header .mv-banner a .data{
		width: 50%;
	}
	header .mv-banner a .data .txt01{
		width: 100%;
	}

	.container {
		text-align: center;
		display: flex;
		align-items: center;
		position: absolute;
		top: 3%;
		right: 2%;
	}
	.japan-text {
		font-size: 14px;
		font-weight: bold;
		margin-right: 10px;
	}
	.countdown {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	/* project -------------------------------- */
	.project{
		width: 100%;
		padding: 10% 0 0 0;
		margin: 0 0 0% 0;
	}
	.project .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.project .main-title li{
		width: max-content;
		overflow: hidden;
	}
	.project .main-title li:nth-child(1){
		margin: 0 5px 0 0;
	}
	.project .main-title li img{
		height: 45px;
		line-height: 0;
	}
	.project .main-txt-box{
		width: 70%;
        background: rgba(255, 255, 255, .7);
        box-sizing: border-box;
        padding: 7% 10% 3% 10%;
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin: 0 auto 7% auto;
	}
	.project .main-txt {
		font-size: 28px;
		line-height: 2.3em;
		letter-spacing: 4px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		width: 100%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box{
		width: 50%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box a{
		width: 100%;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.project .youtube-box a .icon{
		width: 100px;
		height: 100px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #fff;
		border-radius: 300px;
		overflow: hidden;
	}
	.project .youtube-box a .icon span{
		width: 20px;
		line-height: 0;
		display: block;
		position: absolute;
		top: 45%;
		left: 40%;
		animation: moveRightWithEasing 3s forwards infinite;
	}
	@keyframes moveRightWithEasing {
		0% {
			opacity: 0;
		}
		10% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateX(15px);
			opacity: 0;
		}
	}

	.project .icon-box{
		width: 50%;
		margin: 0 auto 7% auto;
		position: relative;
	}
	.project .icon-box .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.project .icon-box .icon-c{
		width: 41.5%;
	}
	.project .icon-box .icon-c .on{
		width: 40%;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height: 0;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}
	.project .icon-box .icon01{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	.project .icon-box .icon02{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	.explanation{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 5% 7%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 7% auto;
	}
	.explanation .data01{
		width: 40%;
	}
	.explanation .data01 .logo{
		width: 80%;
		line-height: 0;
		margin: 5% 0 0 0;
	}
	.explanation .data01 .img{
		width: 100%;
		overflow: hidden;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.explanation .data01 .img a{
		width: 100%;
		position: relative;
		display: block;
	}
	.explanation .data01 .img a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.explanation .data01 .img a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.explanation .data01 .img a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.explanation .data01 .img a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .img a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .name{
		font-size: 15px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.explanation .data01 .name a {
		width: max-content;
        position: relative;
        display: block;
		margin: 0 0 3% 0;
	}
	.explanation .data01 .name a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.explanation .data01 .name a:hover::after {
		transform: scale(1, 1);
	}
	.explanation .data01 .name .icon {
        background-image: url(../img/common-icon05.svg);
        background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
    }

	.explanation .data02{
		width: 50%;
	}
	.explanation .data02 .txt{
		width: 100%;
		font-size: 19px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.project .project-img-s-box{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.project .project-img-s-box .project-img-s{
		width: 100%;
		margin: 0 auto;
	}

	/* exhibition -------------------------------- */
	.exhibition{
		width: 100%;
		padding: 10% 0 0 0;
		margin: 0 0 5% 0;
	}
	.exhibition .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.exhibition .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.exhibition .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.exhibition .main-title li img{
		height: 45px;
		line-height: 0;
	}

	.exhibition .message{
		width: 100%;
		position: relative;
		margin: 0 auto 10% auto;
		padding: 5% 0;
	}
	.exhibition .message .bg{
		width: 70%;
		height: 100%;
        background: rgba(255, 255, 255, .7);
        border-radius: 10px;
        backdrop-filter: blur(0px);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.exhibition .message .img01{
		width: 60%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img01 .in{
		width: 75%;
	}
	.exhibition .message .img02{
		width: 60%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img02 .in{
		width: 100%;
	}
	.exhibition .message .img03{
		width: 60%;
		margin: 0 auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img03 .in{
		width: 40%;
		margin: 0 0 0 60%;
	}
	.me-con01{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		left: 5%;
	}
	.me-con01 .img{
		width: 40%;
	}
	.me-con01 .data{
		width: 50%;
	}
	.me-con01 .data .title{
		width: 100%;
        font-size: 33px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con01 .data .txt{
		width: 100%;
        font-size: 19px;
        line-height: 2.2em;
        letter-spacing: 3px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.me-con02{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		right: 5%;
	}
	.me-con02 .img{
		width: 40%;
		margin: 0 0 1% 0;
	}
	.me-con02 .data{
		width: 50%;
	}
	.me-con02 .data .title{
		width: 100%;
        font-size: 33px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con02 .data .txt{
		width: 100%;
        font-size: 19px;
        line-height: 2.2em;
        letter-spacing: 3px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}


	.exhibition .concept{
		width: 65%;
		margin: 0 auto 7% auto;
		position: relative;
		padding: 5% 0 0 0;
	}
	.exhibition .concept .map{
		width: 70%;
		position: relative;
		margin: 0 5% 0 25%;
	}
	.exhibition .concept .map .on{
		width: 11%;
		position: absolute;
		top: 9.4%;
		right: 1%;
	}
	.exhibition .concept .map .txt-box{
		width: max-content;
		position: absolute;
		top: 0%;
		right: 2%;
	}
	.exhibition .concept .map .txt-box .name{
		width: max-content;
		font-size: 14px;
		letter-spacing: 3px;
		text-align: justify;
		font-weight: 900;
	}
	.exhibition .concept .map .txt-box .line{
		width: 1px;
		height: 90px;
		background: #000;
		margin: 10% auto 0 auto;
	}
	.exhibition .concept .title{
		font-family: "dnp-shuei-anti-std", sans-serif;
		font-weight: 600;
		font-style: normal;
		width: max-content;
		font-size: 100px;
		font-weight: bold;
		letter-spacing: 3px;
		display: block;
		cursor: pointer !important;
		margin: 0 auto;
		letter-spacing: 10px;
		writing-mode: vertical-rl;
		white-space: nowrap;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
	.exhibition .concept .txt{
		width: 40%;
		font-size: 18px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		position: absolute;
		right: 5%;
		bottom: 24%;
		z-index: 10;
	}

	.exhibition .bg-movie{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
	}

	.exhibition .people-interview{
		width: 70%;
		padding: 0 0 0 0;
		margin: 0 auto 5% auto;
	}
	.exhibition .people-interview .people-interview-list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.exhibition .people-interview .people-interview-list li{
		width: 32%;
		overflow: hidden;
		margin: 0 0 2% 0;
	}
	.exhibition .people-interview .people-interview-list li a{
		width: 100%;
		position: relative;
		display: block;
	}
	.exhibition .people-interview .people-interview-list li a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}

	/* interview -------------------------------- */
	.interview{
		width: 100%;
		padding: 5% 0 0 0;
		margin: 0 0 7% 0;
	}
	.interview .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.interview .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.interview .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.interview .main-title li img{
		height: 45px;
		line-height: 0;
	}
	.interview-box{
		width: 70%;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 7% 0% 7% 0%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 0% auto;
	}
	.interview-main-title{
		width: 55%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 12% auto;
	}
	.interview-main-title li:nth-child(1){
		width: 30%;
		position: relative;
	}
	.interview-main-title li:nth-child(2){
		width: 30%;
		position: relative;
	}
	.interview-main-title li:nth-child(2) .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.interview-main-title li:nth-child(3){
		width: 30%;
		position: relative;
	}
	.interview-main-title li .name{
		width: max-content;
		position: absolute;
		bottom: -33%;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 14px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		text-align: center;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.interview-main-title li .name-s{
		left: -12%;
	}

	.interview-box .interview-list{
		width: 80%;
		margin: 0 auto;
	}
	.interview-box .interview-list li.right{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 0 5% 30%;
	}
	.interview-box .interview-list li.left{
		width: 70%;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		margin: 0 0 5% 0%;
	}
	.speechBubble {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 16px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #000;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #fff;
	}
	.speechBubble::after {
		content: "";
		position: absolute;
		top: 60px;
		right: 0;
		border-style: solid;
		border-width: 0 0 16px 16px;
		border-color: transparent transparent transparent #000;
		translate: 100% calc(-50% - 0.4px);
	}
	.speechBubble02 {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 16px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #ffff00;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #000;
	}
	.speechBubble02::after {
		content: "";
		position: absolute;
		top: 60px;
		left: 0;
		border-style: solid;
		border-width: 0 16px 16px 0;
		border-color: transparent #ffff00 transparent transparent;
		translate: -100% calc(-50% - 0.4px);
	}
	.face{
		width: 13%;
	}
	.face .name{
		font-size: 14px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: center;
		margin: 5% 0 0 0;
	}
	.end-btn{
		width: 30%;
		margin: 8% auto 0 auto;
	}
	.end-btn a{
		width: 100%;
		display: block;
		margin: 0 auto;
		background: #ffff00;
		color: #000;
		position: relative;
		padding: 4% 0;
		transition: .3s;
	}
	.end-btn a::after {
		background: #000;
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 100%;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
		z-index:2;
	}
	.end-btn a:hover {
		color: #fff;
	}
	.end-btn a:hover::after {
		transform: scale(1, 1);
	}
	.end-btn a .txt{
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 16px;
		letter-spacing: 2px;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.end-btn a .icon{
		width: 15px;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
		z-index: 10;
	}

	/* contact -------------------------------- */
	.contact{
		width: 100%;
		padding: 7% 10% 0% 10%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	.contact .data{
		width: 45%;
	}
	.contact .data .sub-title{
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		font-weight: 500;
		margin: 0 0 2% 0;
	}
	.contact .data .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 0 10% 0;
	}
	.contact .data .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.contact .data .main-title li:last-child{
		margin: 0 0px 0 30px !important;
	}
	.contact .data .main-title li img{
		height: 45px;
		line-height: 0;
	}
	.contact .data .txt{
		width: 80%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		margin: 0 0 10% 0;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.contact .data .logo{
		width: 10%;
		line-height: 0;
	}
	.contact .data .staff{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .staff li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .production li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production li a{
		width: max-content;
		position: relative;
		display: block;
	}
	.contact .data .production li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.contact .data .production li a:hover::after {
		transform: scale(1, 1);
	}
	.contact .data .production li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
	}
	.contact .data .production li .sp-in{
		width: 100px;
	}

	.contact .data .special{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .special li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .special li:nth-child(3){
		width: 70%;
		margin: 3% 0 0 0;
	}
	.contact .data .special li a{
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
		display: block;
		position: relative;
	}
	.contact .data .special li a .img img{
		transition: .3s;
		transform: scale(1);
	}
	.contact .data .special li a:hover .img img{
		transition: .3s;
		transform: scale(1.05);
	}
	.contact .data .special li a .title{
		width: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.contact .data .special li a .icon{
		width: 15px;
		position: absolute;
		bottom: 15%;
		right: 5%;
	}

	/* company -------------------------------- */
	.company{
		width: 100%;
		background: #fff;
		padding: 5% 0 7% 0;
	}
	.company-list{
		width: 50%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 7% auto;
	}
	.company-list li{
		width: 45%;
	}
	.company-list li:nth-child(2){
		margin: 10% 0 0 0;
	}
	.company-list li .img{
		width: 100%;
		margin: 0 auto 8% auto;
	}
	.company-list li .company-name{
		width: 80%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .company-name02{
		width: 30%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .name{
		width: 100%;
		font-size: 16px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a{
		width: max-content;
		position: relative;
		font-size: 16px;
		line-height: 1.3em;
		letter-spacing: 2px;
		text-align: justify;
		margin: 0 0 2% 0;
		display: block;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -2px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.company-list li a:hover::after {
		transform: scale(.97, 1);
	}
	.company-list li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 20px;
		padding-bottom: 1px;
	}

	.company-banner{
		width: 45%;
		margin: 0 auto 5% auto;
	}
	.company-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	.company-banner a:hover{
		border-radius: 30px;
		transition: .3s;
	}
	.company-banner a .title{
		width: 100%;
		border-bottom: 1px solid #fff;
		padding: 0 0 2% 0;
		margin: 0 auto 3% auto;
	}
	.company-banner a .title img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.company-banner a .img{
		width: 30%;
		overflow: hidden;
	}
	.company-banner a .data{
		width: 30%;
	}
	.company-banner a .data .txt01 {
		font-size: 100%;
		line-height: 0;
	}
	.company-banner .cup {
		width: 100%;
		text-align: right;
		font-size: 12px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}

	.company-logo-end{
		width: 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
	.company-logo-end li{
		width: 45%;
	}

	/* footer -------------------------------- */
	footer{
		width: 100%;
		background: #000;
		padding: 5% 5%;
		box-sizing: border-box;
		position: relative;
	}
	footer .logo{
		width: 10%;
	}
	footer .sns{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		bottom: 15%;
		right: 2%;
	}
	footer .sns li{
		width: 25px;
		line-height: 0;
		margin: 0 10px 0 0;
	}
	footer .sns li:last-child{
		margin: 0 0 0 0 !important;
	}
	footer .txt a{
		width: max-content;
		position: absolute;
		top: 50%;
		right: 15%;
		transform: translate(0%, -50%);
		font-size: 28px;
		letter-spacing: 4px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fff;
	}

}

/* 1400px -------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
	.sp-on{
		display: none !important;
	}

	/* .all_bg{
		width: 100%;
		background: rgba(255, 255, 255, .4);
		backdrop-filter: blur(0.5px);
	} */

	#cursor{
		position: fixed;
		background: #000;
		border-radius:10px;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		z-index: 2;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.1s;
		z-index: 9999;
	}
	#stalker{
		position: fixed;
		background: #ffff00;
		width: 40px;
		height: 40px;
		border-radius:30px;
		margin: -20px 0 0 -20px;
		z-index: 1;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.3s;
		z-index: 9999;
	}
	#stalker.active{
		transform: scale(1.8);
	}

	/* fix-logo -------------------------------- */
	.fix-logo{
		width: max-content;
		position: fixed;
		top: 3%;
		left: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 1% 2%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
	}
	.fix-logo .fix-logo-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-logo .fix-logo-in li{
		width: max-content;
	}
	.fix-logo .fix-logo-in li:nth-child(2){
		margin: 0 20px;
	}
	.fix-logo .fix-logo-in li img{
		height: 30px;
		line-height: 0;
	}

	/* fix-nav -------------------------------- */
	.fix-nav{
		width: max-content;
		position: fixed;
		top: 3%;
		right: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 1.5% 2%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);

		opacity: 0;
		transform: translateY(-20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		pointer-events: none;
	}
	.fix-nav.visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.fix-nav .fix-nav-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-nav .fix-nav-in li{
		width: max-content;
		margin: 0 30px 0 0;
	}
	.fix-nav .fix-nav-in li:last-child{
		width: max-content;
		margin: 0 0px 0 0;
	}
	.fix-nav .fix-nav-in li a{
		width: max-content;
		display: block;
		font-size: 14px;
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 2px;
		position: relative;
	}
	.fix-nav .fix-nav-in li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform 0.3s;
	}
	.fix-nav .fix-nav-in li a:hover::after {
		transform: scale(.97, 1);
	}
	.fix-nav .fix-nav-in li a.link-motion {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.fix-nav .fix-nav-in li a.link-motion:hover {
		box-shadow: none;
	}

	/* header -------------------------------- */
	header{
		width: 100%;
		height: 100vh;
	}

	header .mv-logo{
		width: 20%;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 5%;
		bottom: 10%;
	}
	header .mv-logo li{
		width: 45%;
	}
	header .mv-title{
		width: 35%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 5%;
	}
	header .mv-title li:nth-child(1){
		width: 80%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(2){
		width: 100%;
		position: relative;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-title li:nth-child(3){
		width: 69%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(4){
		width: 100%;
		line-height: 0;
	}
	header .mv-title li .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #ffff00;
		z-index: 10;
	}
	header .mv-title li .txt {
		font-size: 23px;
		line-height: 1.6;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		width: 100%;
		white-space: nowrap;
	}
	header .mv-title li .dot {
		color: #ffff00;
		transition: color 0.2s ease;
		display: inline-block;
		width: 1em;
		text-align: center;
		margin: 0 1px 0 0;
	}

	header .mv-banner{
		width: 22%;
		position: absolute;
		right: 2%;
		bottom: 3%;
	}
	header .mv-banner .cup{
		width: 100%;
		text-align: right;
		font-size: 10px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}
	header .mv-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	header .mv-banner a:hover{
		border-radius: 25px;
		transition: .3s;
	}
	header .mv-banner a .title{
		width: 100%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-banner a .img{
		width: 45%;
		overflow: hidden;
	}
	header .mv-banner a .data{
		width: 50%;
	}
	header .mv-banner a .data .txt01{
		width: 100%;
	}

	.container {
		text-align: center;
		display: flex;
		align-items: center;
		position: absolute;
		top: 3%;
		right: 2%;
	}
	.countdown {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	/* project -------------------------------- */
	.project{
		width: 100%;
		padding: 10% 0 0 0;
		margin: 0 0 0% 0;
	}
	.project .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.project .main-title li{
		width: max-content;
		overflow: hidden;
	}
	.project .main-title li:nth-child(1){
		margin: 0 5px 0 0;
	}
	.project .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.project .main-txt-box{
		width: 70%;
        background: rgba(255, 255, 255, .7);
        box-sizing: border-box;
        padding: 7% 10% 3% 10%;
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin: 0 auto 7% auto;
	}
	.project .main-txt {
		font-size: 22px;
		line-height: 2.2em;
		letter-spacing: 4px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		width: 100%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box{
		width: 60%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box a{
		width: 100%;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.project .youtube-box a .icon{
		width: 100px;
		height: 100px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #fff;
		border-radius: 300px;
		overflow: hidden;
	}
	.project .youtube-box a .icon span{
		width: 20px;
		line-height: 0;
		display: block;
		position: absolute;
		top: 45%;
		left: 40%;
		animation: moveRightWithEasing 3s forwards infinite;
	}
	@keyframes moveRightWithEasing {
		0% {
			opacity: 0;
		}
		10% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateX(15px);
			opacity: 0;
		}
	}

	.project .icon-box{
		width: 50%;
		margin: 0 auto 7% auto;
		position: relative;
	}
	.project .icon-box .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.project .icon-box .icon-c{
		width: 41.5%;
	}
	.project .icon-box .icon-c .on{
		width: 40%;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height: 0;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}
	.project .icon-box .icon01{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	.project .icon-box .icon02{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	.explanation{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 5% 7%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 7% auto;
	}
	.explanation .data01{
		width: 40%;
	}
	.explanation .data01 .logo{
		width: 80%;
		line-height: 0;
		margin: 5% 0 0 0;
	}
	.explanation .data01 .img{
		width: 100%;
		overflow: hidden;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.explanation .data01 .img a{
		width: 100%;
		position: relative;
		display: block;
	}
	.explanation .data01 .img a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.explanation .data01 .img a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.explanation .data01 .img a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.explanation .data01 .img a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .img a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .name{
		font-size: 15px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.explanation .data01 .name a {
		width: max-content;
        position: relative;
        display: block;
		margin: 0 0 3% 0;
	}
	.explanation .data01 .name a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.explanation .data01 .name a:hover::after {
		transform: scale(1, 1);
	}
	.explanation .data01 .name .icon {
        background-image: url(../img/common-icon05.svg);
        background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
    }
	.explanation .data02{
		width: 50%;
	}
	.explanation .data02 .txt{
		width: 100%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.project .project-img-s-box{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.project .project-img-s-box .project-img-s{
		width: 100%;
		margin: 0 auto;
	}

	/* exhibition -------------------------------- */
	.exhibition{
		width: 100%;
		padding: 10% 0 0 0;
		margin: 0 0 5% 0;
	}
	.exhibition .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.exhibition .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.exhibition .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.exhibition .main-title li img{
		height: 35px;
		line-height: 0;
	}

	.exhibition .message{
		width: 100%;
		position: relative;
		margin: 0 auto 10% auto;
		padding: 5% 0;
	}
	.exhibition .message .bg{
		width: 70%;
		height: 100%;
        background: rgba(255, 255, 255, .7);
        border-radius: 10px;
        backdrop-filter: blur(0px);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.exhibition .message .img01{
		width: 60%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img01 .in{
		width: 75%;
	}
	.exhibition .message .img02{
		width: 60%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img02 .in{
		width: 100%;
	}
	.exhibition .message .img03{
		width: 60%;
		margin: 0 auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img03 .in{
		width: 40%;
		margin: 0 0 0 60%;
	}
	.me-con01{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		left: 5%;
	}
	.me-con01 .img{
		width: 40%;
	}
	.me-con01 .data{
		width: 50%;
	}
	.me-con01 .data .title{
		width: 100%;
        font-size: 33px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con01 .data .txt{
		width: 100%;
        font-size: 19px;
        line-height: 2.2em;
        letter-spacing: 3px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.me-con02{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		right: 5%;
	}
	.me-con02 .img{
		width: 40%;
		margin: 0 0 1% 0;
	}
	.me-con02 .data{
		width: 50%;
	}
	.me-con02 .data .title{
		width: 100%;
        font-size: 33px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con02 .data .txt{
		width: 100%;
        font-size: 19px;
        line-height: 2.2em;
        letter-spacing: 3px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}


	.exhibition .concept{
		width: 65%;
		margin: 0 auto 7% auto;
		position: relative;
		padding: 5% 0 0 0;
	}
	.exhibition .concept .map{
		width: 70%;
		position: relative;
		margin: 0 5% 0 25%;
	}
	.exhibition .concept .map .on{
		width: 11%;
		position: absolute;
		top: 9.4%;
		right: 1%;
	}
	.exhibition .concept .map .txt-box{
		width: max-content;
		position: absolute;
		top: 0%;
		right: 2%;
	}
	.exhibition .concept .map .txt-box .name{
		width: max-content;
		font-size: 14px;
		letter-spacing: 3px;
		text-align: justify;
		font-weight: 900;
	}
	.exhibition .concept .map .txt-box .line{
		width: 1px;
		height: 60px;
		background: #000;
		margin: 10% auto 0 auto;
	}
	.exhibition .concept .title{
		font-family: "dnp-shuei-anti-std", sans-serif;
		font-weight: 600;
		font-style: normal;
		width: max-content;
		font-size: 80px;
		font-weight: bold;
		letter-spacing: 3px;
		display: block;
		cursor: pointer !important;
		margin: 0 auto;
		letter-spacing: 10px;
		writing-mode: vertical-rl;
		white-space: nowrap;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
	.exhibition .concept .txt{
		width: 50%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		position: absolute;
		right: 5%;
		bottom: 15%;
		z-index: 10;
	}

	.exhibition .bg-movie{
		width: 80%;
		margin: 0 auto 5% auto;
		position: relative;
	}

	.exhibition .people-interview{
		width: 80%;
		padding: 0 0 0 0;
		margin: 0 auto 5% auto;
	}
	.exhibition .people-interview .people-interview-list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.exhibition .people-interview .people-interview-list li{
		width: 32%;
		overflow: hidden;
		margin: 0 0 2% 0;
	}
	.exhibition .people-interview .people-interview-list li a{
		width: 100%;
		position: relative;
		display: block;
	}
	.exhibition .people-interview .people-interview-list li a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}

	/* interview -------------------------------- */
	.interview{
		width: 100%;
		padding: 5% 0 0 0;
		margin: 0 0 5% 0;
	}
	.interview .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.interview .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.interview .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.interview .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.interview-box{
		width: 80%;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 7% 0% 7% 0%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 0% auto;
	}
	.interview-main-title{
		width: 65%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 12% auto;
	}
	.interview-main-title li:nth-child(1){
		width: 30%;
		position: relative;
	}
	.interview-main-title li:nth-child(2){
		width: 20%;
		position: relative;
	}
	.interview-main-title li:nth-child(2) .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.interview-main-title li:nth-child(3){
		width: 30%;
		position: relative;
	}
	.interview-main-title li .name{
		width: max-content;
		position: absolute;
		bottom: -33%;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 12px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		text-align: center;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.interview-main-title li .name-s{
		left: -5%;
	}

	.interview-box .interview-list{
		width: 80%;
		margin: 0 auto;
	}
	.interview-box .interview-list li.right{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 0 5% 30%;
	}
	.interview-box .interview-list li.left{
		width: 70%;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		margin: 0 0 5% 0%;
	}
	.speechBubble {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 16px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #000;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #fff;
	}
	.speechBubble::after {
		content: "";
		position: absolute;
		top: 60px;
		right: 0;
		border-style: solid;
		border-width: 0 0 16px 16px;
		border-color: transparent transparent transparent #000;
		translate: 100% calc(-50% - 0.4px);
	}
	.speechBubble02 {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 16px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #ffff00;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #000;
	}
	.speechBubble02::after {
		content: "";
		position: absolute;
		top: 60px;
		left: 0;
		border-style: solid;
		border-width: 0 16px 16px 0;
		border-color: transparent #ffff00 transparent transparent;
		translate: -100% calc(-50% - 0.4px);
	}
	.face{
		width: 13%;
	}
	.face .name{
		font-size: 14px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: center;
		margin: 5% 0 0 0;
	}
	.end-btn{
		width: 30%;
		margin: 8% auto 0 auto;
	}
	.end-btn a{
		width: 100%;
		display: block;
		margin: 0 auto;
		background: #ffff00;
		color: #000;
		position: relative;
		padding: 4% 0;
		transition: .3s;
	}
	.end-btn a::after {
		background: #000;
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 100%;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
		z-index:2;
	}
	.end-btn a:hover {
		color: #fff;
	}
	.end-btn a:hover::after {
		transform: scale(1, 1);
	}
	.end-btn a .txt{
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 16px;
		letter-spacing: 2px;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.end-btn a .icon{
		width: 15px;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
		z-index: 10;
	}

	/* contact -------------------------------- */
	.contact{
		width: 100%;
		padding: 10% 10% 0% 10%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	.contact .data{
		width: 50%;
	}
	.contact .data .sub-title{
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		font-weight: 500;
		margin: 0 0 2% 0;
	}
	.contact .data .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 0 10% 0;
	}
	.contact .data .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.contact .data .main-title li:last-child{
		margin: 0 0px 0 30px !important;
	}
	.contact .data .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.contact .data .txt{
		width: 80%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
		margin: 0 0 10% 0;
	}
	.contact .data .logo{
		width: 10%;
		line-height: 0;
	}
	.contact .data .staff{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .staff li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .production li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production li a{
		width: max-content;
		position: relative;
		display: block;
	}
	.contact .data .production li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.contact .data .production li a:hover::after {
		transform: scale(1, 1);
	}
	.contact .data .production li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
	}

	.contact .data .special{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .special li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .special li:nth-child(3){
		width: 70%;
		margin: 3% 0 0 0;
	}
	.contact .data .special li a{
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
		display: block;
		position: relative;
	}
	.contact .data .special li a .img img{
		transition: .3s;
		transform: scale(1);
	}
	.contact .data .special li a:hover .img img{
		transition: .3s;
		transform: scale(1.05);
	}
	.contact .data .special li a .title{
		width: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.contact .data .special li a .icon{
		width: 15px;
		position: absolute;
		bottom: 15%;
		right: 5%;
	}

	/* company -------------------------------- */
	.company{
		width: 100%;
		background: #fff;
		padding: 10% 0 7% 0;
	}
	.company-list{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 7% auto;
	}
	.company-list li{
		width: 45%;
	}
	.company-list li:nth-child(2){
		margin: 10% 0 0 0;
	}
	.company-list li .img{
		width: 100%;
		margin: 0 auto 8% auto;
	}
	.company-list li .company-name{
		width: 80%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .company-name02{
		width: 30%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .name{
		width: 100%;
		font-size: 16px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a{
		width: max-content;
		position: relative;
		font-size: 16px;
		line-height: 1.3em;
		letter-spacing: 2px;
		text-align: justify;
		margin: 0 0 2% 0;
		display: block;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -2px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.company-list li a:hover::after {
		transform: scale(1, 1);
	}
	.company-list li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 20px;
		padding-bottom: 1px;
	}

	.company-banner{
		width: 55%;
		margin: 0 auto 5% auto;
	}
	.company-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	.company-banner a:hover{
		border-radius: 30px;
		transition: .3s;
	}
	.company-banner a .title{
		width: 100%;
		border-bottom: 1px solid #fff;
		padding: 0 0 2% 0;
		margin: 0 auto 3% auto;
	}
	.company-banner a .title img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.company-banner a .img{
		width: 30%;
		overflow: hidden;
	}
	.company-banner a .data{
		width: 30%;
	}
	.company-banner a .data .txt01 {
		font-size: 100%;
		line-height: 0;
	}
	.company-banner .cup {
		width: 100%;
		text-align: right;
		font-size: 12px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}

	.company-logo-end{
		width: 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
	.company-logo-end li{
		width: 45%;
	}

	/* footer -------------------------------- */
	footer{
		width: 100%;
		background: #000;
		padding: 5% 5%;
		box-sizing: border-box;
		position: relative;
	}
	footer .logo{
		width: 10%;
	}
	footer .sns{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		bottom: 15%;
		right: 2%;
	}
	footer .sns li{
		width: 25px;
		line-height: 0;
		margin: 0 10px 0 0;
	}
	footer .sns li:last-child{
		margin: 0 0 0 0 !important;
	}
	footer .txt a{
		width: max-content;
		position: absolute;
		top: 50%;
		right: 15%;
		transform: translate(0%, -50%);
		font-size: 21px;
		letter-spacing: 4px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fff;
	}

}

/* 1280px -------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
	.sp-on{
		display: none !important;
	}

	/* .all_bg{
		width: 100%;
		background: rgba(255, 255, 255, .4);
		backdrop-filter: blur(0.5px);
	} */

	#cursor{
		position: fixed;
		background: #000;
		border-radius:10px;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		z-index: 2;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.1s;
		z-index: 9999;
	}
	#stalker{
		position: fixed;
		background: #ffff00;
		width: 40px;
		height: 40px;
		border-radius:30px;
		margin: -20px 0 0 -20px;
		z-index: 1;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.3s;
		z-index: 9999;
	}
	#stalker.active{
		transform: scale(1.8);
	}

	/* fix-logo -------------------------------- */
	.fix-logo{
		width: max-content;
		position: fixed;
		top: 3%;
		left: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 1% 2%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
	}
	.fix-logo .fix-logo-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-logo .fix-logo-in li{
		width: max-content;
	}
	.fix-logo .fix-logo-in li:nth-child(2){
		margin: 0 20px;
	}
	.fix-logo .fix-logo-in li img{
		height: 30px;
		line-height: 0;
	}

	/* fix-nav -------------------------------- */
	.fix-nav{
		width: max-content;
		position: fixed;
		top: 3%;
		right: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 1.5% 2%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);

		opacity: 0;
		transform: translateY(-20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		pointer-events: none;
	}
	.fix-nav.visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.fix-nav .fix-nav-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-nav .fix-nav-in li{
		width: max-content;
		margin: 0 30px 0 0;
	}
	.fix-nav .fix-nav-in li:last-child{
		width: max-content;
		margin: 0 0px 0 0;
	}
	.fix-nav .fix-nav-in li a{
		width: max-content;
		display: block;
		font-size: 14px;
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 2px;
		position: relative;
	}
	.fix-nav .fix-nav-in li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform 0.3s;
	}
	.fix-nav .fix-nav-in li a:hover::after {
		transform: scale(.97, 1);
	}
	.fix-nav .fix-nav-in li a.link-motion {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.fix-nav .fix-nav-in li a.link-motion:hover {
		box-shadow: none;
	}

	/* header -------------------------------- */
	header{
		width: 100%;
		height: 100vh;
	}

	header .mv-logo{
		width: 20%;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 5%;
		bottom: 10%;
	}
	header .mv-logo li{
		width: 45%;
	}
	header .mv-title{
		width: 35%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 5%;
	}
	header .mv-title li:nth-child(1){
		width: 80%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(2){
		width: 100%;
		position: relative;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-title li:nth-child(3){
		width: 69%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(4){
		width: 100%;
		line-height: 0;
	}
	header .mv-title li .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #ffff00;
		z-index: 10;
	}
	header .mv-title li .txt {
		font-size: 23px;
		line-height: 1.6;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		width: 100%;
		white-space: nowrap;
	}
	header .mv-title li .dot {
		color: #ffff00;
		transition: color 0.2s ease;
		display: inline-block;
		width: 1em;
		text-align: center;
		margin: 0 1px 0 0;
	}

	header .mv-banner{
		width: 22%;
		position: absolute;
		right: 2%;
		bottom: 3%;
	}
	header .mv-banner .cup{
		width: 100%;
		text-align: right;
		font-size: 10px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}
	header .mv-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	header .mv-banner a:hover{
		border-radius: 25px;
		transition: .3s;
	}
	header .mv-banner a .title{
		width: 100%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-banner a .img{
		width: 45%;
		overflow: hidden;
	}
	header .mv-banner a .data{
		width: 50%;
	}
	header .mv-banner a .data .txt01{
		width: 100%;
	}

	.container {
		text-align: center;
		display: flex;
		align-items: center;
		position: absolute;
		top: 3%;
		right: 2%;
	}
	.countdown {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	/* project -------------------------------- */
	.project{
		width: 100%;
		padding: 10% 0 0 0;
		margin: 0 0 0% 0;
	}
	.project .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.project .main-title li{
		width: max-content;
		overflow: hidden;
	}
	.project .main-title li:nth-child(1){
		margin: 0 5px 0 0;
	}
	.project .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.project .main-txt-box{
		width: 70%;
        background: rgba(255, 255, 255, .7);
        box-sizing: border-box;
        padding: 7% 10% 3% 10%;
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin: 0 auto 7% auto;
	}
	.project .main-txt {
		font-size: 22px;
		line-height: 2.2em;
		letter-spacing: 4px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		width: 100%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box{
		width: 60%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box a{
		width: 100%;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.project .youtube-box a .icon{
		width: 100px;
		height: 100px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #fff;
		border-radius: 300px;
		overflow: hidden;
	}
	.project .youtube-box a .icon span{
		width: 20px;
		line-height: 0;
		display: block;
		position: absolute;
		top: 45%;
		left: 40%;
		animation: moveRightWithEasing 3s forwards infinite;
	}
	@keyframes moveRightWithEasing {
		0% {
			opacity: 0;
		}
		10% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateX(15px);
			opacity: 0;
		}
	}

	.project .icon-box{
		width: 50%;
		margin: 0 auto 7% auto;
		position: relative;
	}
	.project .icon-box .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.project .icon-box .icon-c{
		width: 41.5%;
	}
	.project .icon-box .icon-c .on{
		width: 40%;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height: 0;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}
	.project .icon-box .icon01{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	.project .icon-box .icon02{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	.explanation{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 5% 7%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 7% auto;
	}
	.explanation .data01{
		width: 40%;
	}
	.explanation .data01 .logo{
		width: 80%;
		line-height: 0;
		margin: 5% 0 0 0;
	}
	.explanation .data01 .img{
		width: 100%;
		overflow: hidden;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.explanation .data01 .img a{
		width: 100%;
		position: relative;
		display: block;
	}
	.explanation .data01 .img a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.explanation .data01 .img a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.explanation .data01 .img a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.explanation .data01 .img a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .img a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .name{
		font-size: 15px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.explanation .data01 .name a {
		width: max-content;
        position: relative;
        display: block;
		margin: 0 0 3% 0;
	}
	.explanation .data01 .name a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.explanation .data01 .name a:hover::after {
		transform: scale(1, 1);
	}
	.explanation .data01 .name .icon {
        background-image: url(../img/common-icon05.svg);
        background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
    }
	.explanation .data02{
		width: 50%;
	}
	.explanation .data02 .txt{
		width: 100%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.project .project-img-s-box{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.project .project-img-s-box .project-img-s{
		width: 100%;
		margin: 0 auto;
	}

	/* exhibition -------------------------------- */
	.exhibition{
		width: 100%;
		padding: 10% 0 0 0;
		margin: 0 0 5% 0;
	}
	.exhibition .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.exhibition .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.exhibition .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.exhibition .main-title li img{
		height: 35px;
		line-height: 0;
	}

	.exhibition .message{
		width: 100%;
		position: relative;
		margin: 0 auto 10% auto;
		padding: 5% 0;
	}
	.exhibition .message .bg{
		width: 80%;
		height: 100%;
        background: rgba(255, 255, 255, .7);
        border-radius: 10px;
        backdrop-filter: blur(0px);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.exhibition .message .img01{
		width: 65%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img01 .in{
		width: 75%;
	}
	.exhibition .message .img02{
		width: 65%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img02 .in{
		width: 100%;
	}
	.exhibition .message .img03{
		width: 65%;
		margin: 0 auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img03 .in{
		width: 40%;
		margin: 0 0 0 60%;
	}
	.me-con01{
		width: 75%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		left: 5%;
	}
	.me-con01 .img{
		width: 40%;
	}
	.me-con01 .data{
		width: 50%;
	}
	.me-con01 .data .title{
		width: 100%;
        font-size: 25px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con01 .data .txt{
		width: 100%;
        font-size: 15px;
        line-height: 2.2em;
        letter-spacing: 1px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.me-con02{
		width: 75%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		right: 5%;
	}
	.me-con02 .img{
		width: 40%;
		margin: 0 0 1% 0;
	}
	.me-con02 .data{
		width: 50%;
	}
	.me-con02 .data .title{
		width: 100%;
        font-size: 25px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con02 .data .txt{
		width: 100%;
        font-size: 15px;
        line-height: 2.2em;
        letter-spacing: 1px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.exhibition .concept{
		width: 65%;
		margin: 0 auto 7% auto;
		position: relative;
		padding: 5% 0 0 0;
	}
	.exhibition .concept .map{
		width: 70%;
		position: relative;
		margin: 0 5% 0 25%;
	}
	.exhibition .concept .map .on{
		width: 11%;
		position: absolute;
		top: 9.4%;
		right: 1%;
	}
	.exhibition .concept .map .txt-box{
		width: max-content;
		position: absolute;
		top: 0%;
		right: 2%;
	}
	.exhibition .concept .map .txt-box .name{
		width: max-content;
		font-size: 14px;
		letter-spacing: 3px;
		text-align: justify;
		font-weight: 900;
	}
	.exhibition .concept .map .txt-box .line{
		width: 1px;
		height: 60px;
		background: #000;
		margin: 10% auto 0 auto;
	}
	.exhibition .concept .title{
		font-family: "dnp-shuei-anti-std", sans-serif;
		font-weight: 600;
		font-style: normal;
		width: max-content;
		font-size: 80px;
		font-weight: bold;
		letter-spacing: 3px;
		display: block;
		cursor: pointer !important;
		margin: 0 auto;
		letter-spacing: 10px;
		writing-mode: vertical-rl;
		white-space: nowrap;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
	.exhibition .concept .txt{
		width: 52%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		position: absolute;
		right: 5%;
		bottom: 15%;
		z-index: 10;
	}

	.exhibition .bg-movie{
		width: 80%;
		margin: 0 auto 5% auto;
		position: relative;
	}

	.exhibition .people-interview{
		width: 80%;
		padding: 0 0 0 0;
		margin: 0 auto 5% auto;
	}
	.exhibition .people-interview .people-interview-list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.exhibition .people-interview .people-interview-list li{
		width: 32%;
		overflow: hidden;
		margin: 0 0 2% 0;
	}
	.exhibition .people-interview .people-interview-list li a{
		width: 100%;
		position: relative;
		display: block;
	}
	.exhibition .people-interview .people-interview-list li a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}

	/* interview -------------------------------- */
	.interview{
		width: 100%;
		padding: 5% 0 0 0;
		margin: 0 0 5% 0;
	}
	.interview .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.interview .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.interview .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.interview .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.interview-box{
		width: 80%;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 7% 0% 7% 0%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 0% auto;
	}
	.interview-main-title{
		width: 65%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 12% auto;
	}
	.interview-main-title li:nth-child(1){
		width: 30%;
		position: relative;
	}
	.interview-main-title li:nth-child(2){
		width: 20%;
		position: relative;
	}
	.interview-main-title li:nth-child(2) .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.interview-main-title li:nth-child(3){
		width: 30%;
		position: relative;
	}
	.interview-main-title li .name{
		width: max-content;
		position: absolute;
		bottom: -33%;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 12px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		text-align: center;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.interview-main-title li .name-s{
		left: -5%;
	}

	.interview-box .interview-list{
		width: 80%;
		margin: 0 auto;
	}
	.interview-box .interview-list li.right{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 0 5% 30%;
	}
	.interview-box .interview-list li.left{
		width: 70%;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		margin: 0 0 5% 0%;
	}
	.speechBubble {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 16px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #000;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #fff;
	}
	.speechBubble::after {
		content: "";
		position: absolute;
		top: 60px;
		right: 0;
		border-style: solid;
		border-width: 0 0 16px 16px;
		border-color: transparent transparent transparent #000;
		translate: 100% calc(-50% - 0.4px);
	}
	.speechBubble02 {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 16px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #ffff00;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #000;
	}
	.speechBubble02::after {
		content: "";
		position: absolute;
		top: 60px;
		left: 0;
		border-style: solid;
		border-width: 0 16px 16px 0;
		border-color: transparent #ffff00 transparent transparent;
		translate: -100% calc(-50% - 0.4px);
	}
	.face{
		width: 13%;
	}
	.face .name{
		font-size: 14px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: center;
		margin: 5% 0 0 0;
	}
	.end-btn{
		width: 30%;
		margin: 8% auto 0 auto;
	}
	.end-btn a{
		width: 100%;
		display: block;
		margin: 0 auto;
		background: #ffff00;
		color: #000;
		position: relative;
		padding: 4% 0;
		transition: .3s;
	}
	.end-btn a::after {
		background: #000;
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 100%;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
		z-index:2;
	}
	.end-btn a:hover {
		color: #fff;
	}
	.end-btn a:hover::after {
		transform: scale(1, 1);
	}
	.end-btn a .txt{
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 16px;
		letter-spacing: 2px;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.end-btn a .icon{
		width: 15px;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
		z-index: 10;
	}

	/* contact -------------------------------- */
	.contact{
		width: 100%;
		padding: 10% 10% 0% 10%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	.contact .data{
		width: 45%;
	}
	.contact .data .sub-title{
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		font-weight: 500;
		margin: 0 0 2% 0;
	}
	.contact .data .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 0 10% 0;
	}
	.contact .data .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.contact .data .main-title li:last-child{
		margin: 0 0px 0 30px !important;
	}
	.contact .data .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.contact .data .txt{
		width: 80%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
		margin: 0 0 10% 0;
	}
	.contact .data .logo{
		width: 10%;
		line-height: 0;
	}
	.contact .data .staff{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .staff li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .production li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production li a{
		width: max-content;
		position: relative;
		display: block;
	}
	.contact .data .production li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.contact .data .production li a:hover::after {
		transform: scale(1, 1);
	}
	.contact .data .production li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
	}

	.contact .data .special{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .special li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .special li:nth-child(3){
		width: 70%;
		margin: 3% 0 0 0;
	}
	.contact .data .special li a{
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
		display: block;
		position: relative;
	}
	.contact .data .special li a .img img{
		transition: .3s;
		transform: scale(1);
	}
	.contact .data .special li a:hover .img img{
		transition: .3s;
		transform: scale(1.05);
	}
	.contact .data .special li a .title{
		width: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.contact .data .special li a .icon{
		width: 15px;
		position: absolute;
		bottom: 15%;
		right: 5%;
	}

	/* company -------------------------------- */
	.company{
		width: 100%;
		background: #fff;
		padding: 10% 0 7% 0;
	}
	.company-list{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 7% auto;
	}
	.company-list li{
		width: 45%;
	}
	.company-list li:nth-child(2){
		margin: 10% 0 0 0;
	}
	.company-list li .img{
		width: 100%;
		margin: 0 auto 8% auto;
	}
	.company-list li .company-name{
		width: 80%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .company-name02{
		width: 30%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .name{
		width: 100%;
		font-size: 16px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a{
		width: max-content;
		position: relative;
		font-size: 16px;
		line-height: 1.3em;
		letter-spacing: 2px;
		text-align: justify;
		margin: 0 0 2% 0;
		display: block;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -2px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.company-list li a:hover::after {
		transform: scale(1, 1);
	}
	.company-list li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 20px;
		padding-bottom: 1px;
	}

	.company-banner{
		width: 55%;
		margin: 0 auto 5% auto;
	}
	.company-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	.company-banner a:hover{
		border-radius: 30px;
		transition: .3s;
	}
	.company-banner a .title{
		width: 100%;
		border-bottom: 1px solid #fff;
		padding: 0 0 2% 0;
		margin: 0 auto 3% auto;
	}
	.company-banner a .title img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.company-banner a .img{
		width: 30%;
		overflow: hidden;
	}
	.company-banner a .data{
		width: 30%;
	}
	.company-banner a .data .txt01 {
		font-size: 100%;
		line-height: 0;
	}
	.company-banner .cup {
		width: 100%;
		text-align: right;
		font-size: 12px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}

	.company-logo-end{
		width: 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
	.company-logo-end li{
		width: 45%;
	}

	/* footer -------------------------------- */
	footer{
		width: 100%;
		background: #000;
		padding: 5% 5%;
		box-sizing: border-box;
		position: relative;
	}
	footer .logo{
		width: 10%;
	}
	footer .sns{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		bottom: 15%;
		right: 2%;
	}
	footer .sns li{
		width: 25px;
		line-height: 0;
		margin: 0 10px 0 0;
	}
	footer .sns li:last-child{
		margin: 0 0 0 0 !important;
	}
	footer .txt a{
		width: max-content;
		position: absolute;
		top: 50%;
		right: 15%;
		transform: translate(0%, -50%);
		font-size: 21px;
		letter-spacing: 4px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fff;
	}

}

/* 769px-1024px --------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.sp-on{
		display: none !important;
	}

	/* .all_bg{
		width: 100%;
		background: rgba(255, 255, 255, .4);
		backdrop-filter: blur(0.5px);
	} */

	#cursor{
		position: fixed;
		background: #000;
		border-radius:10px;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		z-index: 2;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.1s;
		z-index: 9999;
	}
	#stalker{
		position: fixed;
		background: #ffff00;
		width: 40px;
		height: 40px;
		border-radius:30px;
		margin: -20px 0 0 -20px;
		z-index: 1;
		pointer-events: none;
		opacity: 0;
		transition: transform 0.3s;
		z-index: 9999;
	}
	#stalker.active{
		transform: scale(1.8);
	}

	/* fix-logo -------------------------------- */
	.fix-logo{
		width: max-content;
		position: fixed;
		top: 2%;
		left: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 2% 3%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
	}
	.fix-logo .fix-logo-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-logo .fix-logo-in li{
		width: max-content;
	}
	.fix-logo .fix-logo-in li:nth-child(2){
		margin: 0 20px;
	}
	.fix-logo .fix-logo-in li img{
		height: 29px;
		line-height: 0;
	}

	/* fix-nav -------------------------------- */
	.fix-nav{
		width: max-content;
		position: fixed;
		top: 2%;
		right: 2%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 2.8% 3%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
		opacity: 0;
		transform: translateY(-20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		pointer-events: none;
	}
	.fix-nav.visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.fix-nav .fix-nav-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fix-nav .fix-nav-in li{
		width: max-content;
		margin: 0 30px 0 0;
	}
	.fix-nav .fix-nav-in li:last-child{
		width: max-content;
		margin: 0 0px 0 0;
	}
	.fix-nav .fix-nav-in li a{
		width: max-content;
		display: block;
		font-size: 14px;
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 2px;
		position: relative;
	}
	.fix-nav .fix-nav-in li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform 0.3s;
	}
	.fix-nav .fix-nav-in li a:hover::after {
		transform: scale(.97, 1);
	}
	.fix-nav .fix-nav-in li a.link-motion {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.fix-nav .fix-nav-in li a.link-motion:hover {
		box-shadow: none;
	}

	/* header -------------------------------- */
	header{
		width: 100%;
		height: 100vh;
	}

	header .mv-logo{
		width: 28%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        left: 5%;
        bottom: 5%;
	}
	header .mv-logo li{
		width: 45%;
	}
	header .mv-title{
		width: 60%;
		position: absolute;
		top: 45%;
		transform: translateY(-45%);
		left: 5%;
	}
	header .mv-title li:nth-child(1){
		width: 80%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(2){
		width: 100%;
		position: relative;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-title li:nth-child(3){
		width: 69%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(4){
		width: 100%;
		line-height: 0;
	}
	header .mv-title li .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #ffff00;
		z-index: 10;
	}
	header .mv-title li .txt {
		font-size: 23px;
		line-height: 1.6;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		width: 100%;
		white-space: nowrap;
	}
	header .mv-title li .dot {
		color: #ffff00;
		transition: color 0.2s ease;
		display: inline-block;
		width: 1em;
		text-align: center;
		margin: 0 1px 0 0;
	}

	header .mv-banner{
		width: 30%;
		position: absolute;
		right: 2%;
		bottom: 3%;
	}
	header .mv-banner .cup{
		width: 100%;
		text-align: right;
		font-size: 10px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}
	header .mv-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	header .mv-banner a:hover{
		border-radius: 25px;
		transition: .3s;
	}
	header .mv-banner a .title{
		width: 100%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-banner a .img{
		width: 45%;
		overflow: hidden;
	}
	header .mv-banner a .data{
		width: 50%;
	}
	header .mv-banner a .data .txt01{
		width: 100%;
	}

	.container {
		text-align: center;
		display: flex;
		align-items: center;
		position: absolute;
		top: 2%;
		right: 2%;
	}
	.countdown {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	/* project -------------------------------- */
	.project{
		width: 100%;
		padding: 15% 0 0 0;
		margin: 0 0 0% 0;
	}
	.project .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.project .main-title li{
		width: max-content;
		overflow: hidden;
	}
	.project .main-title li:nth-child(1){
		margin: 0 5px 0 0;
	}
	.project .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.project .main-txt-box{
		width: 90%;
        background: rgba(255, 255, 255, .7);
        box-sizing: border-box;
        padding: 7% 10% 3% 10%;
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin: 0 auto 7% auto;
	}
	.project .main-txt {
		font-size: 19px;
		line-height: 2.2em;
		letter-spacing: 4px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		width: 100%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box{
		width: 70%;
		margin: 0 auto 7% auto;
	}
	.project .youtube-box a{
		width: 100%;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.project .youtube-box a .icon{
		width: 100px;
		height: 100px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #fff;
		border-radius: 300px;
		overflow: hidden;
	}
	.project .youtube-box a .icon span{
		width: 20px;
		line-height: 0;
		display: block;
		position: absolute;
		top: 45%;
		left: 40%;
		animation: moveRightWithEasing 3s forwards infinite;
	}
	@keyframes moveRightWithEasing {
		0% {
			opacity: 0;
		}
		10% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateX(15px);
			opacity: 0;
		}
	}

	.project .icon-box{
		width: 65%;
		margin: 0 auto 7% auto;
		position: relative;
	}
	.project .icon-box .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.project .icon-box .icon-c{
		width: 41.5%;
	}
	.project .icon-box .icon-c .on{
		width: 40%;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height: 0;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}
	.project .icon-box .icon01{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	.project .icon-box .icon02{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	.explanation{
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 5% 7%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 7% auto;
	}
	.explanation .data01{
		width: 40%;
	}
	.explanation .data01 .logo{
		width: 80%;
		line-height: 0;
		margin: 5% 0 0 0;
	}
	.explanation .data01 .img{
		width: 100%;
		overflow: hidden;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.explanation .data01 .img a{
		width: 100%;
		position: relative;
		display: block;
	}
	.explanation .data01 .img a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.explanation .data01 .img a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.explanation .data01 .img a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.explanation .data01 .img a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .img a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .name{
		font-size: 15px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.explanation .data01 .name a {
		width: max-content;
        position: relative;
        display: block;
		margin: 0 0 3% 0;
	}
	.explanation .data01 .name a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.explanation .data01 .name a:hover::after {
		transform: scale(1, 1);
	}
	.explanation .data01 .name .icon {
        background-image: url(../img/common-icon05.svg);
        background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
    }
	.explanation .data02{
		width: 50%;
	}
	.explanation .data02 .txt{
		width: 100%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.project .project-img-s-box{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.project .project-img-s-box .project-img-s{
		width: 100%;
		margin: 0 auto;
	}

	/* exhibition -------------------------------- */
	.exhibition{
		width: 100%;
		padding: 15% 0 0 0;
		margin: 0 0 5% 0;
	}
	.exhibition .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.exhibition .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.exhibition .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.exhibition .main-title li img{
		height: 35px;
		line-height: 0;
	}

	.exhibition .message{
		width: 100%;
		position: relative;
		margin: 0 auto 10% auto;
		padding: 5% 0;
	}
	.exhibition .message .bg{
		width: 80%;
		height: 100%;
        background: rgba(255, 255, 255, .7);
        border-radius: 10px;
        backdrop-filter: blur(0px);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.exhibition .message .img01{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img01 .in{
		width: 75%;
	}
	.exhibition .message .img02{
		width: 70%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img02 .in{
		width: 100%;
	}
	.exhibition .message .img03{
		width: 70%;
		margin: 0 auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img03 .in{
		width: 40%;
		margin: 0 0 0 60%;
	}
	.me-con01{
		width: 80%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		left: 5%;
	}
	.me-con01 .img{
		width: 40%;
	}
	.me-con01 .data{
		width: 50%;
	}
	.me-con01 .data .title{
		width: 100%;
        font-size: 25px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con01 .data .txt{
		width: 100%;
        font-size: 15px;
        line-height: 2.2em;
        letter-spacing: 1px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.me-con02{
		width: 80%;
		margin: 0 auto 5% auto;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		right: 5%;
	}
	.me-con02 .img{
		width: 40%;
		margin: 0 0 1% 0;
	}
	.me-con02 .data{
		width: 50%;
	}
	.me-con02 .data .title{
		width: 100%;
        font-size: 25px;
        line-height: 2em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con02 .data .txt{
		width: 100%;
        font-size: 15px;
        line-height: 2.2em;
        letter-spacing: 1px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.exhibition .concept{
		width: 85%;
		margin: 0 auto 7% auto;
		position: relative;
		padding: 5% 0 0 0;
	}
	.exhibition .concept .map{
		width: 70%;
		position: relative;
		margin: 0 5% 0 25%;
	}
	.exhibition .concept .map .on{
		width: 11%;
		position: absolute;
		top: 9.4%;
		right: 1%;
	}
	.exhibition .concept .map .txt-box{
		width: max-content;
		position: absolute;
		top: 0%;
		right: 2%;
	}
	.exhibition .concept .map .txt-box .name{
		width: max-content;
		font-size: 14px;
		letter-spacing: 3px;
		text-align: justify;
		font-weight: 900;
	}
	.exhibition .concept .map .txt-box .line{
		width: 1px;
		height: 60px;
		background: #000;
		margin: 10% auto 0 auto;
	}
	.exhibition .concept .title{
		font-family: "dnp-shuei-anti-std", sans-serif;
		font-weight: 600;
		font-style: normal;
		width: max-content;
		font-size: 70px;
		font-weight: bold;
		letter-spacing: 3px;
		display: block;
		cursor: pointer !important;
		margin: 0 auto;
		letter-spacing: 10px;
		writing-mode: vertical-rl;
		white-space: nowrap;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
	.exhibition .concept .txt{
		width: 55%;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		position: absolute;
		right: 5%;
		bottom: 20%;
		z-index: 10;
	}

	.exhibition .bg-movie{
		width: 80%;
		margin: 0 auto 5% auto;
		position: relative;
	}

	.exhibition .people-interview{
		width: 80%;
		padding: 0 0 0 0;
		margin: 0 auto 5% auto;
	}
	.exhibition .people-interview .people-interview-list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.exhibition .people-interview .people-interview-list li{
		width: 32%;
		overflow: hidden;
		margin: 0 0 2% 0;
	}
	.exhibition .people-interview .people-interview-list li a{
		width: 100%;
		position: relative;
		display: block;
	}
	.exhibition .people-interview .people-interview-list li a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 9%;
		bottom: 5%;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}

	/* interview -------------------------------- */
	.interview{
		width: 100%;
		padding: 15% 0 0 0;
		margin: 0 0 5% 0;
	}
	.interview .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 5% auto;
	}
	.interview .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.interview .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.interview .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.interview-box{
		width: 80%;
		background: rgba(255, 255, 255, .7);
		box-sizing: border-box;
		padding: 7% 0% 7% 0%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 0% auto;
	}
	.interview-main-title{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 12% auto;
	}
	.interview-main-title li:nth-child(1){
		width: 30%;
		position: relative;
	}
	.interview-main-title li:nth-child(2){
		width: 20%;
		position: relative;
	}
	.interview-main-title li:nth-child(2) .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.interview-main-title li:nth-child(3){
		width: 30%;
		position: relative;
	}
	.interview-main-title li .name{
		width: max-content;
		position: absolute;
		bottom: -33%;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 12px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		text-align: center;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.interview-main-title li .name-s{
		left: -10%;
	}

	.interview-box .interview-list{
		width: 90%;
		margin: 0 auto;
	}
	.interview-box .interview-list li.right{
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin: 0 0 5% 20%;
	}
	.interview-box .interview-list li.left{
		width: 80%;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		margin: 0 0 5% 0%;
	}
	.speechBubble {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 14px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #000;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 2px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #fff;
	}
	.speechBubble::after {
		content: "";
		position: absolute;
		top: 60px;
		right: 0;
		border-style: solid;
		border-width: 0 0 16px 16px;
		border-color: transparent transparent transparent #000;
		translate: 100% calc(-50% - 0.4px);
	}
	.speechBubble02 {
		width: 80%;
		position: relative;
		display: inline-block;
		margin-right: 14px;
		padding: 5% 5%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #ffff00;
		text-align: left;
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 2px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #000;
	}
	.speechBubble02::after {
		content: "";
		position: absolute;
		top: 60px;
		left: 0;
		border-style: solid;
		border-width: 0 16px 16px 0;
		border-color: transparent #ffff00 transparent transparent;
		translate: -100% calc(-50% - 0.4px);
	}
	.face{
		width: 13%;
	}
	.face .name{
		font-size: 14px;
		line-height: 2.2em;
		letter-spacing: 3px;
		text-align: center;
		margin: 5% 0 0 0;
	}
	.end-btn{
		width: 40%;
		margin: 8% auto 0 auto;
	}
	.end-btn a{
		width: 100%;
		display: block;
		margin: 0 auto;
		background: #ffff00;
		color: #000;
		position: relative;
		padding: 4% 0;
		transition: .3s;
	}
	.end-btn a::after {
		background: #000;
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 100%;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
		z-index:2;
	}
	.end-btn a:hover {
		color: #fff;
	}
	.end-btn a:hover::after {
		transform: scale(1, 1);
	}
	.end-btn a .txt{
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 16px;
		letter-spacing: 2px;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.end-btn a .icon{
		width: 15px;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
		z-index: 10;
	}

	/* contact -------------------------------- */
	.contact{
		width: 100%;
		padding: 15% 5% 0% 5%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	.contact .data{
		width: 50%;
	}
	.contact .data .sub-title{
		font-size: 15px;
		line-height: 2.2em;
		letter-spacing: 3px;
		font-weight: 500;
		margin: 0 0 2% 0;
	}
	.contact .data .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 0 10% 0;
	}
	.contact .data .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 10px 0 0;
	}
	.contact .data .main-title li:last-child{
		margin: 0 0px 0 30px !important;
	}
	.contact .data .main-title li img{
		height: 35px;
		line-height: 0;
	}
	.contact .data .txt{
		width: 80%;
		font-size: 14px;
		line-height: 2.2em;
		letter-spacing: 2px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
		margin: 0 0 10% 0;
	}
	.contact .data .logo{
		width: 15%;
		line-height: 0;
	}
	.contact .data .staff{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .staff li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .production li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .production li a{
		width: max-content;
		position: relative;
		display: block;
	}
	.contact .data .production li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.contact .data .production li a:hover::after {
		transform: scale(1, 1);
	}
	.contact .data .production li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
	}

	.contact .data .special{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .special li{
		width: 100%;
		font-size: 13px;
		letter-spacing: 2px;
		margin: 0 0 1% 0;
	}
	.contact .data .special li:nth-child(3){
		width: 70%;
		margin: 3% 0 0 0;
	}
	.contact .data .special li a{
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
		display: block;
		position: relative;
	}
	.contact .data .special li a .img img{
		transition: .3s;
		transform: scale(1);
	}
	.contact .data .special li a:hover .img img{
		transition: .3s;
		transform: scale(1.05);
	}
	.contact .data .special li a .title{
		width: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.contact .data .special li a .icon{
		width: 15px;
		position: absolute;
		bottom: 15%;
		right: 5%;
	}

	/* company -------------------------------- */
	.company{
		width: 100%;
		background: #fff;
		padding: 10% 0 7% 0;
	}
	.company-list{
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 7% auto;
	}
	.company-list li{
		width: 45%;
	}
	.company-list li:nth-child(2){
		margin: 10% 0 0 0;
	}
	.company-list li .img{
		width: 100%;
		margin: 0 auto 5% auto;
	}
	.company-list li .company-name{
		width: 80%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .company-name02{
		width: 30%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .name{
		width: 100%;
		font-size: 16px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a{
		width: max-content;
		position: relative;
		font-size: 16px;
		line-height: 1.3em;
		letter-spacing: 2px;
		text-align: justify;
		margin: 0 0 2% 0;
		display: block;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -2px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.company-list li a:hover::after {
		transform: scale(1, 1);
	}
	.company-list li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 20px;
		padding-bottom: 1px;
	}

	.company-banner{
		width: 65%;
		margin: 0 auto 5% auto;
	}
	.company-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	.company-banner a:hover{
		border-radius: 30px;
		transition: .3s;
	}
	.company-banner a .title{
		width: 100%;
		border-bottom: 1px solid #fff;
		padding: 0 0 2% 0;
		margin: 0 auto 3% auto;
	}
	.company-banner a .title img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.company-banner a .img{
		width: 30%;
		overflow: hidden;
	}
	.company-banner a .data{
		width: 30%;
	}
	.company-banner a .data .txt01 {
		font-size: 100%;
		line-height: 0;
	}
	.company-banner .cup {
		width: 100%;
		text-align: right;
		font-size: 12px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}

	.company-logo-end{
		width: 25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
	.company-logo-end li{
		width: 45%;
	}

	/* footer -------------------------------- */
	footer{
		width: 100%;
		background: #000;
		padding: 7% 5%;
		box-sizing: border-box;
		position: relative;
	}
	footer .logo{
		width: 15%;
	}
	footer .sns{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		bottom: 15%;
		right: 2%;
	}
	footer .sns li{
		width: 25px;
		line-height: 0;
		margin: 0 10px 0 0;
	}
	footer .sns li:last-child{
		margin: 0 0 0 0 !important;
	}
	footer .txt a{
		width: max-content;
		position: absolute;
		top: 50%;
		right: 15%;
		transform: translate(0%, -50%);
		font-size: 21px;
		letter-spacing: 4px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fff;
	}

}

/* 768px以下 ------------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width:0px) and ( max-width:768px) {
	.pc-on{
		display: none !important;
	}

	/* .all_bg{
		width: 100%;
		background: rgba(255, 255, 255, .5);
		backdrop-filter: blur(0.5px);
	} */

	/* fix-logo -------------------------------- */
	.fix-logo{
		width: 95%;
		position: absolute;
		top: 1%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 3% 5%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
	}
	.fix-logo .fix-logo-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto;
	}
	.fix-logo .fix-logo-in li{
		width: max-content;
		line-height: 0;
	}
	.fix-logo .fix-logo-in li:nth-child(2){
		margin: 0 20px;
		line-height: 0;
	}
	.fix-logo .fix-logo-in li img{
		height: 30px;
		line-height: 0;
	}

	/* fix-nav -------------------------------- */
	.fix-nav{
		width: 95%;
		position: fixed;
		top: 1%;
		right: 0;
		left: 0;
		margin: 0 auto;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 5% 5%;
		border-radius: 10px;
		z-index: 20;
		backdrop-filter: blur(5px);
		opacity: 0;
		transform: translateY(-20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		pointer-events: none;
	}
	.fix-nav.visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.fix-nav .fix-nav-in{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto;
	}
	.fix-nav .fix-nav-in li{
		width: max-content;
		margin: 0 15px 0 0;
	}
	.fix-nav .fix-nav-in li:last-child{
		width: max-content;
		margin: 0 0px 0 0;
	}
	.fix-nav .fix-nav-in li a{
		width: max-content;
		display: block;
		font-size: 12px;
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 1px;
		position: relative;
	}
	.fix-nav .fix-nav-in li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform 0.3s;
	}
	.fix-nav .fix-nav-in li a:hover::after {
		transform: scale(.97, 1);
	}
	.fix-nav .fix-nav-in li a.link-motion {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.fix-nav .fix-nav-in li a.link-motion:hover {
		box-shadow: none;
	}

	/* header -------------------------------- */
	header{
		width: 100%;
		height: 100vh;
		background: rgba(255, 255, 255, .2);
		backdrop-filter: blur(0.0px);
	}

	header .mv-title{
		width: 85%;
		position: absolute;
		top: 35%;
		transform: translateY(-35%);
		left: 5%;
	}
	header .mv-title li:nth-child(1){
		width: 80%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(2){
		width: 100%;
		position: relative;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	header .mv-title li:nth-child(3){
		width: 69%;
		position: relative;
		line-height: 0;
		margin: 0 0 7% 0;
	}
	header .mv-title li:nth-child(4){
		width: 100%;
		line-height: 0;
	}
	header .mv-title li .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #ffff00;
		z-index: 10;
	}
	header .mv-title li .txt {
		font-size: 18px;
		line-height: 1.6;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		width: 100%;
		white-space: nowrap;
	}
	header .mv-title li .dot {
		color: #ffff00;
		transition: color 0.2s ease;
		display: inline-block;
		width: 1em;
		text-align: center;
		margin: 0 1px 0 0;
	}

	header .mv-logo{
		width: 45%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        right: 5%;
        bottom: 15%;
	}
	header .mv-logo li{
		width: 45%;
		line-height: 0;
	}

	.container {
		width: 40px;
		text-align: center;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 25%;
        right: 2%;
		writing-mode: vertical-rl;
	}
	.countdown {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	
	.mv-banner{
		width: 100%;
		margin: 0 auto;
	}
	.mv-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0% 0 0 3%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	.mv-banner a:hover{
		border-radius: 25px;
		transition: .3s;
	}
	.mv-banner a .img{
		width: 30%;
		overflow: hidden;
	}
	.mv-banner a .img img{
		transform: scale(1);
		transition: .3s;
	}
	.mv-banner a:hover .img img{
		transform: scale(1.1);
		transition: .3s;
	}
	.mv-banner a .data{
		width: 67%;
	}
	.mv-banner a .data .txt01{
		width: 100%;
		line-height: 0;
	}

	/* project -------------------------------- */
	.project{
		width: 100%;
		padding: 25% 0 0 0;
		margin: 0 0 0% 0;
	}
	.project .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 10% auto;
	}
	.project .main-title li{
		width: max-content;
		overflow: hidden;
	}
	.project .main-title li:nth-child(1){
		margin: 0 5px 0 0;
	}
	.project .main-title li img{
		height: 25px;
		line-height: 0;
	}
	.project .main-txt-box{
		width: 95%;
        background: rgba(255, 255, 255, .8);
        box-sizing: border-box;
        padding: 7% 7% 7% 7%;
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin: 0 auto 15% auto;
	}
	.project .main-txt {
		font-size: 15px;
		line-height: 1.8em;
		letter-spacing: 2px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		width: 100%;
		margin: 0 auto 0% auto;
	}
	.project .youtube-box{
		width: 90%;
		margin: 0 auto 15% auto;
	}
	.project .youtube-box a{
		width: 100%;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.project .youtube-box a .icon{
		width: 60px;
		height: 60px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #fff;
		border-radius: 300px;
		overflow: hidden;
	}
	.project .youtube-box a .icon span{
		width: 10px;
		line-height: 0;
		display: block;
		position: absolute;
		top: 45%;
		left: 40%;
		animation: moveRightWithEasing 3s forwards infinite;
	}
	@keyframes moveRightWithEasing {
		0% {
			opacity: 0;
		}
		10% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateX(15px);
			opacity: 0;
		}
	}

	.project .icon-box{
		width: 90%;
		margin: 0 auto 15% auto;
		position: relative;
	}
	.project .icon-box .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.project .icon-box .icon-c{
		width: 41.5%;
	}
	.project .icon-box .icon-c .on{
		width: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height: 0;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}
	.project .icon-box .icon01{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	.project .icon-box .icon02{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	.explanation{
		width: 95%;
		display: block;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 10% 7%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 10% auto;
	}
	.explanation .data01{
		width: 100%;
		margin: 0 auto 10% auto;
	}
	.explanation .data01 .logo{
		width: 90%;
		line-height: 0;
		margin: 6% 0 0 0;
	}
	.explanation .data01 .img{
		width: 100%;
		overflow: hidden;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.explanation .data01 .img a{
		width: 100%;
		display: block;
		position: relative;
	}
	.explanation .data01 .img a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.explanation .data01 .img a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.explanation .data01 .img a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 12%;
		bottom: 7%;
		transition: .3s;
	}
	.explanation .data01 .img a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .img a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}
	.explanation .data01 .name{
		font-size: 13px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.explanation .data01 .name a {
		width: max-content;
        position: relative;
        display: block;
	}
	.explanation .data01 .name a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.explanation .data01 .name a:hover::after {
		transform: scale(1, 1);
	}
	.explanation .data01 .name .icon {
        background-image: url(../img/common-icon05.svg);
        background-size: 7px;
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 15px;
    }
	.explanation .data02{
		width: 100%;
	}
	.explanation .data02 .txt{
		width: 100%;
		font-size: 15px;
		line-height: 1.8em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.project .project-img-s-box{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.project .project-img-s-box .project-img-s{
		width: 100%;
		margin: 0 auto;
	}

	/* exhibition -------------------------------- */
	.exhibition{
		width: 100%;
		padding: 25% 0 0 0;
		margin: 0 0 0% 0;
	}
	.exhibition .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 10% auto;
	}
	.exhibition .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 5px 0 0;
	}
	.exhibition .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.exhibition .main-title li img{
		height: 25px;
		line-height: 0;
	}

	.exhibition .message{
		width: 100%;
		position: relative;
		margin: 0 auto 15% auto;
		padding: 7% 0 10% 0;
	}
	.exhibition .message .bg{
		width: 95%;
		height: 100%;
        background: rgba(255, 255, 255, .8);
        border-radius: 10px;
        backdrop-filter: blur(0px);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.exhibition .message .img01{
		width: 80%;
		margin: 0 auto 7% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img01 .in{
		width: 100%;
	}
	.exhibition .message .img02{
		width: 95%;
		margin: 0 auto 7% auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img02 .in{
		width: 100%;
	}
	.exhibition .message .img03{
		width: 80%;
		margin: 0 auto;
		position: relative;
		z-index: 10;
	}
	.exhibition .message .img03 .in{
		width: 60%;
		margin: 0 0 0 40%;
	}
	.me-con01{
		width: 80%;
		margin: 0 auto 10% auto;
		position: relative;
		z-index: 10;
	}
	.me-con01 .img{
		width: 50%;
		margin: 0 0 7% 50%;
	}
	.me-con01 .data{
		width: 100%;
	}
	.me-con01 .data .title{
		width: 100%;
        font-size: 23px;
        line-height: 1.7em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con01 .data .txt{
		width: 100%;
        font-size: 15px;
        line-height: 1.8em;
        letter-spacing: 1px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.me-con02{
		width: 80%;
		margin: 0 auto 7% auto;
		position: relative;
		z-index: 10;
	}
	.me-con02 .img{
		width: 75%;
		margin: 0 0 7% 0;
	}
	.me-con02 .data{
		width: 100%;
	}
	.me-con02 .data .title{
		width: 100%;
        font-size: 23px;
        line-height: 1.7em;
        letter-spacing: 4px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
        font-weight: 500;
		margin: 0 0 5% 0;
    }
	.me-con02 .data .txt{
		width: 100%;
        font-size: 15px;
        line-height: 1.8em;
        letter-spacing: 1px;
        text-align: justify;
        word-break: break-all;
        text-justify: inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}

	.exhibition .concept{
		width: 90%;
		margin: 0 auto 25% auto;
		position: relative;
		padding: 35% 0 0 0;
	}
	.exhibition .concept .map{
		width: 160%;
        position: absolute;
		top: 0%;
		right: -5%;
		margin: 0;
	}
	.exhibition .concept .map .on{
		width: 11.5%;
        position: absolute;
        top: 9.2%;
        right: 0.8%;
	}
	.exhibition .concept .map .txt-box{
		width: max-content;
		position: absolute;
		top: 4%;
		right: 2%;
	}
	.exhibition .concept .map .txt-box .name{
		width: max-content;
		font-size: 10px;
		letter-spacing: 3px;
		text-align: justify;
		font-weight: 900;
	}
	.exhibition .concept .map .txt-box .line{
		width: 1px;
		height: 40px;
		background: #000;
		margin: 10% auto 0 auto;
	}
	.exhibition .concept .title{
		font-family: "dnp-shuei-anti-std", sans-serif;
		font-weight: 600;
		font-style: normal;
		width: 90px;
        font-size: 50px;
		font-weight: bold;
		display: block;
		cursor: pointer !important;
		margin: 0 auto;
		letter-spacing: 10px;
		writing-mode: vertical-rl;
		white-space: nowrap;
		position: absolute;
		left: -3%;
		top: 0;
		z-index: 10;
	}
	.exhibition .concept .txt{
		width: 75%;
		font-size: 13px;
		line-height: 2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-weight: 500;
		position: relative;
		z-index: 10;
		margin: 0 0 0 25%;
	}

	.exhibition .bg-movie{
		width: 100%;
		margin: 0 auto 10% auto;
		position: relative;
	}

	.exhibition .people-interview{
		width: 90%;
		padding: 0 0 0 0;
		margin: 0 auto 5% auto;
	}
	.exhibition .people-interview .people-interview-list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.exhibition .people-interview .people-interview-list li{
		width: 48%;
		overflow: hidden;
		margin: 0 0 5% 0;
	}
	.exhibition .people-interview .people-interview-list li a{
		width: 100%;
		display: block;
		position: relative;
	}
	.exhibition .people-interview .people-interview-list li a .img-in{
		width: 100%;
		position: relative;
		filter: grayscale(100%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .img-in{
		filter: grayscale(0%);
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon{
		width: 40px;
		line-height: 0;
		position: absolute;
		right: 17%;
		bottom: 7%;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a .icon .on{
		width: 13px;
		line-height: 0;
		position: absolute;
		right: -20px;
		top: -1px;
		opacity: 1;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .icon .on{
		position: absolute;
		right: -25px;
		opacity: 1;
		transition: .3s;
	}
	.exhibition .people-interview .people-interview-list li a:hover .icon .on{
		position: absolute;
		right: -15px;
		opacity: 1;
		transition: .3s;
	}

	/* interview -------------------------------- */
	.interview{
		width: 100%;
		padding: 25% 0 0 0;
		margin: 0 0 10% 0;
	}
	.interview .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto 10% auto;
	}
	.interview .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 5px 0 0;
	}
	.interview .main-title li:last-child{
		margin: 0 0px 0 0 !important;
	}
	.interview .main-title li img{
		height: 25px;
		line-height: 0;
	}
	.interview-box{
		width: 95%;
		background: rgba(255, 255, 255, .8);
		box-sizing: border-box;
		padding: 10% 0% 10% 0%;
		border-radius: 10px;
		backdrop-filter: blur(0px);
		margin: 0 auto 0% auto;
	}
	.interview-main-title{
		width: 85%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 30% auto;
	}
	.interview-main-title li:nth-child(1){
		width: 35%;
		position: relative;
	}
	.interview-main-title li:nth-child(2){
		width: 20%;
		position: relative;
	}
	.interview-main-title li:nth-child(2) .on{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.interview-main-title li:nth-child(3){
		width: 35%;
		position: relative;
	}
	.interview-main-title li .name{
		width: max-content;
		position: absolute;
		bottom: -60%;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 10px;
		line-height: 1.8em;
		letter-spacing: 1px;
		text-align: justify;
		text-align: center;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.interview-main-title li .name-s{
		left: -10%;
	}

	.interview-box .interview-list{
		width: 90%;
		margin: 0 auto;
	}
	.interview-box .interview-list li.right{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 0 0 10% 0%;
	}
	.interview-box .interview-list li.left{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		margin: 0 0 10% 0%;
	}
	.speechBubble {
		width: 75%;
		position: relative;
		display: inline-block;
		margin-right: 14px;
		padding: 5% 7%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #000;
		text-align: left;
		font-size: 13px;
		line-height: 2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #fff;
	}
	.speechBubble::after {
		content: "";
		position: absolute;
		top: 60px;
		right: 0;
		border-style: solid;
		border-width: 0 0 16px 16px;
		border-color: transparent transparent transparent #000;
		translate: 100% calc(-50% - 0.4px);
	}
	.speechBubble02 {
		width: 75%;
		position: relative;
		display: inline-block;
		margin-left: 14px;
		margin-right: 0px;
		padding: 5% 7%;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #ffff00;
		text-align: left;
		font-size: 13px;
		line-height: 2em;
		letter-spacing: 1px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		color: #000;
	}
	.speechBubble02::after {
		content: "";
		position: absolute;
		top: 60px;
		left: 0;
		border-style: solid;
		border-width: 0 16px 16px 0;
		border-color: transparent #ffff00 transparent transparent;
		translate: -100% calc(-50% - 0.4px);
	}
	.face{
		width: 17%;
	}
	.face .name{
		font-size: 10px;
		line-height: 2.2em;
		letter-spacing: 0px;
		text-align: center;
		margin: 5% 0 0 0;
	}
	.end-btn{
		width: 85%;
		margin: 8% auto 0 auto;
	}
	.end-btn a{
		width: 100%;
		display: block;
		margin: 0 auto;
		background: #ffff00;
		color: #000;
		position: relative;
		padding: 4% 0;
		transition: .3s;
	}
	.end-btn a::after {
		background: #000;
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 100%;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
		z-index:2;
	}
	.end-btn a:hover {
		color: #fff;
	}
	.end-btn a:hover::after {
		transform: scale(1, 1);
	}
	.end-btn a .txt{
		font-family: "corporate-s", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 14px;
		letter-spacing: 2px;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.end-btn a .icon{
		width: 15px;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
		z-index: 10;
	}

	/* contact -------------------------------- */
	.contact{
		width: 100%;
		padding: 15% 7.5% 5% 7.5%;
		box-sizing: border-box;
		background: #fff;
	}
	.contact .data{
		width: 100%;
	}
	.contact .data .sub-title{
		font-size: 13px;
		line-height: 1em;
		letter-spacing: 1px;
		font-weight: 500;
		margin: 0 0 4% 0;
	}
	.contact .data .main-title{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		margin: 0 0 10% 0;
	}
	.contact .data .main-title li{
		width: max-content;
		overflow: hidden;
		margin: 0 5px 0 0;
	}
	.contact .data .main-title li:last-child{
		margin: 0 0px 0 20px !important;
	}
	.contact .data .main-title li img{
		height: 30px;
		line-height: 0;
	}
	.contact .data .txt{
		font-size: 14px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		word-break:break-all;
		text-justify:inter-character;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .logo{
		width: 15%;
		line-height: 0;
		margin: 0 0 15% 0;
	}
	.contact .data .staff{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 10% 0;
	}
	.contact .data .staff li{
		width: 100%;
		font-size: 12px;
		letter-spacing: 1px;
		margin: 0 0 1% 0;
	}
	.contact .data .production{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 10% 0;
	}
	.contact .data .production li{
		width: 100%;
		font-size: 12px;
		letter-spacing: 1px;
		margin: 0 0 1% 0;
	}
	.contact .data .production li a{
		width: max-content;
		position: relative;
		display: block;
	}
	.contact .data .production li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -3px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.contact .data .production li a:hover::after {
		transform: scale(1, 1);
	}
	.contact .data .production li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 7px;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 13px;
	}

	.contact .data .special{
		width: 100%;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 5% 0;
	}
	.contact .data .special li{
		width: 100%;
		font-size: 12px;
		letter-spacing: 1px;
		margin: 0 0 1% 0;
	}
	.contact .data .special li:nth-child(3){
		width: 100%;
		margin: 5% 0 0 0;
	}
	.contact .data .special li a{
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
		display: block;
		position: relative;
	}
	.contact .data .special li a .img img{
		transition: .3s;
		transform: scale(1);
	}
	.contact .data .special li a:hover .img img{
		transition: .3s;
		transform: scale(1.05);
	}
	.contact .data .special li a .title{
		width: 65%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.contact .data .special li a .icon{
		width: 15px;
		position: absolute;
		bottom: 15%;
		right: 5%;
	}

	/* company -------------------------------- */
	.company{
		width: 100%;
		background: #fff;
		padding: 10% 0 15% 0;
	}
	.company-list{
		width: 85%;
		display: block;
		margin: 0 auto 15% auto;
	}
	.company-list li{
		width: 100%;
	}
	.company-list li:nth-child(2){
		margin: 20% 0 0 0;
	}
	.company-list li .img{
		width: 100%;
		margin: 0 auto 8% auto;
	}
	.company-list li .company-name{
		width: 80%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .company-name02{
		width: 35%;
		line-height: 0;
		margin: 0 0 5% 0;
	}
	.company-list li .name{
		width: 100%;
		font-size: 14px;
		line-height: 2em;
		letter-spacing: 2px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a{
		width: max-content;
		position: relative;
		font-size: 14px;
		line-height: 1.3em;
		letter-spacing: 2px;
		text-align: justify;
		margin: 0 0 2% 0;
		display: block;
		font-family: "yu-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
	}
	.company-list li a::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #000000;
		bottom: -2px;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}
	.company-list li a:hover::after {
		transform: scale(1, 1);
	}
	.company-list li .icon{
		background-image: url("../img/common-icon05.svg");
		background-size: 7px;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 15px;
		padding-bottom: 1px;
	}

	.company-banner{
		width: 90%;
		margin: 0 auto 10% auto;
	}
	.company-banner a{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5% 5%;
		color: #fff;
		background: #0000ff;
		border-radius: 0px;
		overflow: hidden;
		transition: .3s;
	}
	.company-banner a:hover{
		border-radius: 30px;
		transition: .3s;
	}
	.company-banner a .title{
		width: 100%;
		border-bottom: 1px solid #fff;
		padding: 0 0 4% 0;
		margin: 0 auto 5% auto;
	}
	.company-banner a .title img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.company-banner a .img{
		width: 40%;
		overflow: hidden;
	}
	.company-banner a .data{
		width: 50%;
	}
	.company-banner a .data .txt01 {
		font-size: 100%;
		line-height: 0;
	}
	.company-banner .cup {
		width: 100%;
		text-align: right;
		font-size: 8px;
		letter-spacing: 2px;
		margin: 2% 0 0 0;
	}

	.company-logo-end{
		width: 50%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
	.company-logo-end li{
		width: 45%;
	}

	/* footer -------------------------------- */
	footer{
		width: 100%;
		background: #000;
		padding: 10% 5% 15% 5%;
		box-sizing: border-box;
		position: relative;
	}
	footer .logo{
		width: 35%;
		margin: 0 0 10% 0;
	}
	footer .sns{
		width: max-content;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		top: 15%;
		right: 5%;
	}
	footer .sns li{
		width: 25px;
		line-height: 0;
		margin: 0 10px 0 0;
	}
	footer .sns li:last-child{
		margin: 0 0 0 0 !important;
	}
	footer .txt a{
		width: max-content;
		position: relative;
		left: 0%;
		font-size: 15px;
		letter-spacing: 4px;
		text-align: justify;
		font-family: "yu-gothic-pr6n", sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fff;
	}

}