@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	/*font-family: "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif, YuGothic;*/
	font-family:"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
	height: 0;
}
.clearfix:after {
	clear: both;
	height: 0;
}
.is_pc{
	display:block !important;
}
.is_sp{
	display:none !important;
}
@media (max-width:767px) {
	.is_pc{
		display:none !important;
	}
	.is_sp{
		display:block !important;
	}
}
*{
	line-height: 1.6em;
}
body {
	width: 100%;
	margin: 0;
	background-color: #000;
}
img {
	vertical-align: bottom;
	border:none;
    max-width: 100%;
}
a{
	color:#111;
	text-decoration: none;
	transition: all .3s ease-in-out;
}
ul li{list-style-type: none;}

.mdsfont{
	font-family: alternate-gothic-atf, sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 74%;
}
/*
.mdsfont *{
	font-family: alternate-gothic-atf, sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 74%;
}
*/
.min{
	font-family: a-otf-ryumin-pr6n, serif;
	font-weight: 300;
	font-style: normal;
}
.min *{
	font-family: a-otf-ryumin-pr6n, serif;
	font-weight: 300;
	font-style: normal;
}


/*************************** loading *********/
/*.loading{display: none;}*/

.loading {
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.loading_inner {
	position: absolute;
	background: rgba(0, 0, 0, 1);
	width: 100%;
	height: 100%;
}
/*
.loading_logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	z-index: 2;
	width: 470px;
	height: auto;
	z-index: 9996;
	background: #FFF;
	opacity: 0;
}
*/
.loading_logo{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}
.loading_logo .loading_img02{
    margin: 0 20px 0 10px;
}
.loading_logo .loading_img01{
    animation: a-loading--arrowUp 3s forwards
}
.loading_logo .loading_img03{
    animation: a-loading--arrowDown 3s forwards
}
@keyframes a-loading--arrowUp {
    0% {
        opacity: 0;
        -webkit-transform: translate(-2vw,.9vw);
        transform: translate(-2vw,.9vw)
    }
    20%,80% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(2vw,-.9vw);
        transform: translate(2vw,-.9vw)
    }
}
@keyframes a-loading--arrowDown {
    0% {
        opacity: 0;
        -webkit-transform: translate(2vw,-.9vw);
        transform: translate(2vw,-.9vw)
    }
    20%,80% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-2vw,.9vw);
        transform: translate(-2vw,.9vw)
    }
}




/*************************** nav *********/
header{
	width: 100%;
	height: 100vh;
}
header img{
	max-width: 100%;
}
header h2{
    width: 760px;
    position: absolute;
    left: calc(50% - 380px);
    bottom: 120px;
}
header nav{
	position: fixed;
	width: 100%;
	padding: 20px 30px;
	z-index: 100;
	display: flex;
	justify-content: space-between;
}
header nav > div{
	display: flex;
}
header nav h1{
	width: 175px;
	margin-right: 25px;
}
header nav ul{
	display: flex;
}
header nav ul li{
	height: 47px;
}
header nav ul li a{
	font-size: 21px;
	padding: 16px 11px;
	display: block;
	letter-spacing: 1px;
    color: #FFF;
}
header nav > div:nth-of-type(2) ul li{
	height: 40px;
}
header nav > div:nth-of-type(2) ul li:last-child a{
	border: 1px solid #FFF;
	padding: 0px 20px;
	height: 100%;
	line-height: 38px;
	letter-spacing: 0px;
	box-sizing: border-box;
}

@media screen and (max-width: 1080px) {
	header nav h1{
		width: 175px;
		margin-right: 15px;
	}
	header nav ul li a{
		font-size: 18px;
		padding: 16px 8px;
		letter-spacing: 0.3px;
	}
}
@media (max-width:950px) {
	header nav {
		padding: 20px 15px;
	}
	header nav h1{
		width: 121px;
		margin-right: 15px;
	}
	header nav ul li a{
		font-size: 16px;
		padding: 11px 5px;
	}
	header nav > div:nth-of-type(2) ul li {
		height: 36px;
	}
	header nav > div:nth-of-type(2) ul li:last-child a {
		line-height: 34px;
	}
}


/*************************** slogan *********/
.slogan {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	width: 100%;
	height: 100vh;
	opacity: 1;
	pointer-events: auto;
	z-index: -1;
}
.slogan{
}
.slogan img{
	max-width: 100%;
}
.slogan h2{
	width: 100%;
	height: 100vh;
	position: relative;
}
.slogan h2 img{
	width: 621px;
	margin: 0 auto;
	position: absolute;
	left: calc(50% - 300px);
	bottom: 10vh;
}
.section-top__arw {
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px);
    width: 34px;
    height: 50px;
}

.section-top__arw a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.section-top__arw a:before {
    display: block;
    position: absolute;
    content: '';
    background: url(../img/arw_w.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 4px;
    width: 16px;
    height: 39px;
    z-index: 99;
    transform: rotate(90deg);
    animation: arw 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}
@keyframes arw {
  0% {
    margin-top: 20px; }
  60% {
    margin-top: 0px; }
  80% {
    margin-top: 20px; }
  100% {
    margin-top: 20px; } }

@keyframes arw-sp {
  0% {
    margin-top: 4vw; }
  60% {
    margin-top: 0; }
  80% {
    margin-top: 4vw; }
  100% {
    margin-top: 4vw; } }
@media (max-width:1400px) {
	.slogan{
		background-size: 50%;
	}
	.slogan:after{
	}
	.slogan h2{
		background: url("../img/slogan_racket.png") no-repeat right 120px;
		background-size: 85%;
	}
	.slogan h2 img{
		width: 40%;
		left: calc(50% - 20%);
		top: 70vh;
		-webkit-backface-visibility: hidden;
	}
}


/******** VIDEO *********/
@media screen and (max-width: 768px) {
	.slogan {
		height: 100%;
	}
}
.slogan video {
	display: none;
	position: absolute;
	top: 0;
}
.slogan video.show {
	display: block;
}
@media (max-aspect-ratio: 16 / 9) {
	.slogan video {
		left: calc(50% - 100vh / 9 * 16 / 2);
		height: 100%;
	}
}
@media screen and (max-aspect-ratio: 16 / 9) and (max-width: 768px) {
	.slogan video {
		left: 0;
		top: 0;
		width: 100%;
		object-fit: cover;
	}
}
@media (min-aspect-ratio: 16 / 9) {
	.slogan video {
		top: calc(50% - 100vw / 16 * 9 / 2);
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
	}
}
/******** VIDEO END *********/




/*************************** contents common *********/
main .contents{
	width: 100%;
	min-width: 1100px;
	padding-top: 90px;
	position: relative;
}
main .contents .inr{
	width: 1100px;
	margin: 0 auto;
}
main .contents h2{
	text-align: center;
}
main .contents .flex{
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 1200px) {
    main .contents{
        min-width: 100%;
        padding-top: 90px;
    }
    main .contents .inr{
        width: calc(100% - 100px);
    }
}
@media screen and (max-width: 1000px) {
    main .contents{
        padding-top: calc(90/1000 * 100vw);
    }
    main .contents .inr{
        width: calc(100% - 60px);
    }
}



/*********************************************************** TECHNOLOGY 01 *********/
main .contents#tec01{
	/*
    background: url("../img/tec01_bg.png") no-repeat center top;
    background-size: cover;
	
	background: url("../img/tec01_bg1.svg") no-repeat right top , url("../img/tec01_bg2.svg") no-repeat left top , #545156;
	*/
	/* background: url("../img/tec01_bg.svg") no-repeat 100% center, #545156; */
    background:#545156;
	background-position: right -50% center;
	background-size: 90%;
	background-attachment: fixed;
    padding: 140px 0 140px;
    position: relative;
    z-index: 2;
	margin-top: 400px;
	margin-bottom: 200px;
}
main .contents#tec01:before {
    content: "";
    width: 100%;
    height: 400px;
    background: linear-gradient(rgba(84,81,86,0),rgba(84,81,86,1));
    position: absolute;
    top: -399px;
}
main .contents#tec01:after {
    content: "";
    width: 100%;
    height: 400px;
    background: linear-gradient(rgba(84,81,86,1),rgba(84,81,86,0));
    position: absolute;
    bottom: -399px;
}
main .contents#tec01 .inr h2{
    margin-bottom: 100px;
}
main .contents#tec01 .inr .flexbox{
	display: flex;
	justify-content: space-between;
}
main .contents#tec01 .inr a{
	width: calc(50% - 20px);
    height: auto;
    display: block;
    position: relative;
}
main .contents#tec01 .inr a:before{
    content: "";
    width: 60px;
    height: 60px;
    background: url("../img/movie_btn.svg") no-repeat center center;
    background-size: contain;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    opacity: 0.7;
    transition: all .5s ease-in-out;
    z-index: 2;
}
main .contents#tec01 .inr a:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #FFF;
    z-index: 1;
    opacity: 0;
    transition: all .5s ease-in-out;
}
main .contents#tec01 .inr a:hover:before{
    opacity: 1;
}
main .contents#tec01 .inr a:hover:after{
    opacity: .1;
}
main .contents#tec01 .inr a img{
    box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.75);
}

@media screen and (max-width: 1200px) {
}
/*********************************************************** TECHNOLOGY 01 END *********/





/*********************************************************** TECHNOLOGY 02 *********/
main .contents#tec02{
    /*background: rgba(0,0,0,0.8);*/
    padding: 300px 0 0px;
    position: relative;
    z-index: 1;
    margin-top: -200px;
}
main .contents#tec02.active:after{
    content: "";
    width: 100%;
    height: 100vh;
    /*background: url("../img/tec02_bg.png") no-repeat center top;
    background-size: cover;*/
	background: rgba(0,0,0,0.9);
    position: fixed;
    top: 0;
    left: 0;
}
main .contents#tec02 h3{
    text-align: center;
    position: relative;
    z-index: 3;
}
main .contents#tec02 .inr > ul{
    margin-top: 100px;
    margin-bottom: 200px;
    position: relative;
    z-index: 3;
}
main .contents#tec02 .inr > ul > li{
    width: 100%;
    height: 200px;
    background: url(../img/slush.png) repeat rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    color: #FFF;
    position: relative;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease-in-out;
    border: 1px solid #000;
    cursor: pointer;
}
main .contents#tec02 .inr > ul.pt2 > li{
    height: 160px;
}
main .contents#tec02 .inr > ul > li:after{
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 13px 13px;
    border-color: transparent transparent #ffffff transparent;
    opacity: 0;
    transition: all .5s ease-in-out;
}
main .contents#tec02 .inr > ul > li:hover{
    background: rgba(0,0,0,0.3);
    border: 1px solid #F6F335;
}
main .contents#tec02 .inr > ul.pt2 > li:hover{
    border: 1px solid #2098B7;
}
main .contents#tec02 .inr > ul.pt3 > li:hover{
    border: 1px solid #AAA;
}
main .contents#tec02 .inr > ul > li:hover:after{
    opacity: 1;
}
main .contents#tec02 .inr > ul > li > div > span{
    display: block;
    width: 150px;
    height: 30px;
    line-height: 30px;
    background: #111;
    color: #FFF;
    font-size: 14px;
    position: absolute;
    top: 10px;
    left: 10px;
}
main .contents#tec02 .inr > ul > li h4{
    margin-bottom: 15px;
    padding-top: 10px;
}
main .contents#tec02 .inr > ul > li h4.h4-20230124{
	margin-bottom: 0;
}
main .contents#tec02 .inr > ul.pt2 > li h4{
    margin-bottom: 0px;
    padding-top: 0px;
}
main .contents#tec02 .inr > ul > li h4 span{
    display: block;
    font-size: 16px;
    margin-top: 10px;
}
main .contents#tec02 .inr > ul > li h5{
    font-size: 22px;
    color: #FFF;
    font-weight: bold;
}
main .contents#tec02 .inr > ul > li a{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
@media screen and (max-width: 1200px) {
    main .contents#tec02 .inr > ul > li > div > span{
        width: calc(150/1200 * 100vw);
        height: calc(30/1200 * 100vw);
        line-height: calc(30/1200 * 100vw);
        font-size: calc(14/1200 * 100vw);
        top: calc(10/1200 * 100vw);
        left: calc(10/1200 * 100vw);
    }
    main .contents#tec02 .inr > ul > li h4 span{
        font-size: calc(16/1200 * 100vw);
        margin-top: calc(10/1200 * 100vw);
    }
    main .contents#tec02 .inr > ul > li h5{
        font-size: calc(24/1200 * 100vw);
    }
}
@media screen and (max-width: 1000px) {
    main .contents#tec02 .inr > ul > li h4 img{
        zoom:80%;
    }
}

/*********** modal *******/
/* モーダルCSS */
#modal04 .modalouter {
	height: 585px;
}
.modalArea {
	display: none;
	position: fixed;
	z-index: 110;
	/*サイトによってここの数値は調整 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30, 30, 30, 0.9);
	cursor: pointer;
}
.modalouter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1000px;
	max-width: 1000px;
	height: 80%;
}
.modalWrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	/*padding: 10px 30px;*/
	background-color: #484848;
	height: 100%;
	overflow: auto;
}
.modalContents{
    text-align: center;
    padding: 50px 0 50px;
}
.modalContents img{
}
.closeModal {
	position: absolute;
	bottom: -50px;
	right: 0px;
	display: block;
	width: 50px;
	height: 50px;
	text-indent: -9999px;
	transform: rotate(-45deg);
	cursor: pointer;
}
.closeModal:before {
	content: "";
	width: 50px;
	height: 2px;
	background: #FFF;
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
}
.closeModal:after {
	content: "";
	width: 2px;
	height: 50px;
	background: #FFF;
	position: absolute;
	top: 0;
	left: calc(50% - 1px);
}
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}
@media screen and (max-width: 1100px) {
    #modal04 .modalouter {
        height: calc(585/1100 * 100vw);
    }
    .modalouter {
        width: calc(1000/1100 * 100vw);
        max-width: calc(1000/1100 * 100vw);
        height: 80%;
    }
    .modalContents{
        padding: calc(50/1100 * 100vw) calc(30/1100 * 100vw);
    }
    .modalContents img{
        max-width: 100%;
    }
}
/*********** modal END *******/
main .contents#tec02 .inr .other{
    position: relative;
    z-index: 1;
    font-size: 14px;
}
main .contents#tec02 .inr .other > p{
    background: rgba(43,43,43,0.8);
    color: #FFF;
    text-align: center;
    margin:100px 0 8px;
    height: 30px;
    line-height: 30px;
}
main .contents#tec02 .inr .other ul{
    display: flex;
    justify-content: space-between;
}
main .contents#tec02 .inr .other ul li{
    width: calc(33.3% - 6px);
    background: rgba(43,43,43,0.8);
    color: #FFF;
    text-align: center;
    padding: 50px 0 50px;
}
main .contents#tec02 .inr .other ul li h4 span{
    display: block;
    margin-top: 5px;
}
main .contents#tec02 .inr .other ul li > span{
    font-size: 14px;
    width: 222px;
    height: 25px;
    line-height: 25px;
    background: #454545;
    display: block;
    margin: 16px auto 20px;
}
main .contents#tec02 .inr .other ul li p{
    font-size: 15px;
}
main .contents#tec02 .inr .other ul li:nth-of-type(1),
main .contents#tec02 .inr .other ul li:nth-of-type(2){
    padding: 70px 0 50px;
}
@media screen and (max-width: 1070px) {
    main .contents#tec02 .inr .other{
        font-size: calc(14/1070 * 100vw);
    }
    main .contents#tec02 .inr .other > p{
        margin:calc(40/1070 * 100vw) 0 calc(8/1070 * 100vw);
        height: calc(30/1070 * 100vw);
        line-height: calc(30/1070 * 100vw);
    }
    main .contents#tec02 .inr .other ul li{
        width: calc(33.3% - 6px);
        padding: calc(50/1070 * 100vw) 0;
    }

    main .contents#tec02 .inr .other ul li > span{
        font-size: calc(14/1070 * 100vw);
        width: calc(222/1070 * 100vw);
        height: calc(25/1070 * 100vw);
        line-height: calc(25/1070 * 100vw);
        margin: calc(16/1070 * 100vw) auto calc(20/1070 * 100vw);
    }
    main .contents#tec02 .inr .other ul li p{
        font-size: calc(15/1070 * 100vw);
    }
    main .contents#tec02 .inr .other ul li:nth-of-type(1),
    main .contents#tec02 .inr .other ul li:nth-of-type(2){
        padding: calc(70/1070 * 100vw) 0 calc(50/1070 * 100vw);
    }
    main .contents#tec02 .inr .other ul li h4 img{
        max-width: 90%;
    }
}
/*********************************************************** TECHNOLOGY 02 END *********/







/*********************************************************** PERFORMANS *********/
main .contents#pfm{
    padding: 250px 0 0px;
    position: relative;
    z-index: 1;
    margin-top: 0px;
}
main .contents#pfm h3{
    text-align: center;
}
main .contents#pfm .inr > h4 {
    background: rgba(43,43,43,0.8);
    color: #FFF;
    text-align: center;
    margin: 0;
    height: 40px;
    line-height: 40px;
	font-size: 17px;
    margin-top: 100px;
}
main .contents#pfm .inr > h4:nth-of-type(1) {
    margin-top: 50px;
}
main .contents#pfm .inr ul{
    margin-top: 20px;
}
main .contents#pfm .inr ul li{
    /*border: 1px solid #CCC;*/
    color: #FFF;
    text-align: center;
    padding: 35px 20px 20px;
    margin-bottom: 40px;
	background-color: rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}






main .contents#pfm .inr ul li h4{
    font-size: 37px;
    font-weight: bold;
    margin-bottom: 20px;
}
main .contents#pfm .inr ul li h5{
    color: #EEE;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
main .contents#pfm .inr ul.vr5 li h5{
    color: #26AACC;
}
main .contents#pfm .inr ul li .flex{
    display: flex;
	background-color: rgba(30, 30, 30, 0.9);
    padding: 30px;
}
main .contents#pfm .inr ul li .flex .img{
    width: 498px;
}
main .contents#pfm .inr ul li .flex .txt{
    width: calc(100% - 498px);
    padding-right: 20px;
}
main .contents#pfm .inr ul li .flex .txt h6{
    font-size: 16px;
    background: #FFF;
    text-align: center;
    width: 435px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #111;
    margin: 60px 0 40px auto;
}
main .contents#pfm .inr ul li .flex .txt img,
main .contents#pfm .inr ul li .flex .txt p{
    position: relative;
    left: -30px;
}
main .contents#pfm .inr ul li .flex .txt p .br990{
    display: none;
}
main .contents#pfm .inr ul li .flex .txt img{
    display: block;
    margin-left: auto;
}
main .contents#pfm .inr ul li .flex .txt p,
main .contents#pfm .inr ul li .img.pt3 p{
    font-size: 13px;
    text-align: right;
    margin-top: 30px;
}
main .contents#pfm .inr ul li .img.pt3{
	padding: 20px;
}
main .contents#pfm .inr ul li .flex.pt2 .img{
    width: 235px;
}
main .contents#pfm .inr ul li .flex.pt2 .txt{
    width: calc(100% - 235px);
    padding-right: 20px;
}
main .contents#pfm .inr ul li .flex.pt2 .txt h6{
    width: 685px;
    margin: 0px 0 20px auto;
}
main .contents#pfm .inr ul li .flex.pt2 .txt p{
    margin-top: 0px;
}
@media screen and (max-width: 1200px) {
	main .contents#pfm .inr > h4 {
		height: calc(40/1200 * 100vw);
		line-height: calc(40/1200 * 100vw);
		font-size: calc(18/1200 * 100vw);
		margin-top: calc(50/1200 * 100vw);
	}
	main .contents#pfm .inr ul{
		margin-top: calc(20/1200 * 100vw);
	}
	
    main .contents#pfm .inr ul li .flex{
        padding: calc(30/1200 * 100vw);
    }
    main .contents#pfm .inr ul li h4{
        font-size: calc(37/1200 * 100vw);
        margin-bottom: calc(20/1200 * 100vw);
    }
    main .contents#pfm .inr ul li h5{
        font-size: calc(22/1200 * 100vw);
        margin-bottom: calc(30/1200 * 100vw);
    }
    main .contents#pfm .inr ul li .flex .img{
        width: calc(498/1200 * 100vw);
    }
    main .contents#pfm .inr ul li .flex .txt{
        width: calc(100% - calc(498/1200 * 100vw));
        padding-right: 0;
        padding-left: 20px;
    }
    main .contents#pfm .inr ul li .flex .txt h6{
        font-size: calc(16/1200 * 100vw);
        width: 100%;
        height: calc(40/1200 * 100vw);
        line-height: calc(40/1200 * 100vw);
        border-radius: calc(40/1200 * 100vw);
        margin: calc(60/1200 * 100vw) 0 calc(40/1200 * 100vw) auto;
    }
    main .contents#pfm .inr ul li .flex .txt img,
    main .contents#pfm .inr ul li .flex .txt p{
        left: calc(-30/1200 * 100vw);
        width: 80%;
    }
    main .contents#pfm .inr ul li .flex .txt p{
        width: 100%;
        margin-left: auto;
        font-size: calc(14/1200 * 100vw);
        margin-top: calc(30/1200 * 100vw);
    }
    main .contents#pfm .inr ul li .flex.pt2 .img{
        width: calc(235/1200 * 100vw);
    }
    main .contents#pfm .inr ul li .flex.pt2 .txt{
        width: calc(100% - calc(235/1200 * 100vw));
        padding-right: 0;
    }
    main .contents#pfm .inr ul li .flex.pt2 .txt h6{
        width: calc(685/1200 * 100vw);
        margin: 0px 0 calc(20/1200 * 100vw) auto;
    }
    main .contents#pfm .inr ul li .flex.pt2 .txt img{
        width: 90%;
    }
}
@media screen and (max-width: 990px) {
    main .contents#pfm .inr ul li .flex .txt p .br990{
        display: block
    }
}
/*********************************************************** PERFORMANS END *********/






/*********************************************************** VIDEOS *********/
main .contents#videos{
    padding: 200px 0 400px;
    position: relative;
    z-index: 1;
    margin-top: 0px;
}
main .contents#videos .inr{
	width: 96%;
	max-width: 1400px;
}
main .contents#videos h3{
    text-align: center;
}
main .contents#videos .inr ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 100px;
}
main .contents#videos .inr ul li{
	margin: 0 20px 40px;
	width: calc(50% - 40px);
}
main .contents#videos .inr ul li.spacer{
	width: 100%;
}
main .contents#videos .inr ul li a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
main .contents#videos .inr ul li a:before {
    content: "";
    width: 74px;
    height: 74px;
    background: url(../img/movie_btn.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: calc(50% - 37px);
    left: calc(50% - 37px);
    opacity: 0.7;
    transition: all .5s ease-in-out;
    z-index: 2;
}
main .contents#videos .inr ul li a:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #FFF;
    z-index: 1;
    opacity: 0;
    transition: all .5s ease-in-out;
}
main .contents#videos .inr ul li a:hover:before{
    opacity: 1;
}
main .contents#videos .inr ul li a:hover:after{
    opacity: .2;
}
/*********************************************************** VIDEOS END *********/





/*********************************************************** LINE UP *********/
main .contents#lineup{
    background: #000;
    padding: 130px 0 0;
    position: relative;
    z-index: 2;
    color: #FFF;
}
main .contents#lineup:before{
    content: "";
    width: 100%;
    height: 200px;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
    position: absolute;
    top: -200px;
}
main .contents#lineup h3{
    text-align: center;
}
main .contents#lineup h3 span{
    display: block;
    font-size: 18px;
    margin-top: 10px;
}
main .contents#lineup .lineup1otr,
main .contents#lineup .lineup2otr,
main .contents#lineup .lineup3otr,
main .contents#lineup .lineup4otr{
    background: #000;
    position: relative;
    z-index: 3;
    margin-top: 200px;
}
main .contents#lineup .lineup2otr{
	padding-bottom: 250px;
}
main .contents#lineup .lineup1otr:before,
main .contents#lineup .lineup2otr:before,
main .contents#lineup .lineup3otr:before,
main .contents#lineup .lineup4otr:before{
    content: "";
    width: 100%;
    height: 200px;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
    position: absolute;
    top: -200px;
}
/*
main .contents#lineup .lineup1otr:before,
main .contents#lineup .lineup3otr:before,
main .contents#lineup .lineup4otr:before{
    background: linear-gradient(rgba(4,4,4,0),rgba(4,4,4,1));
}
*/
main .contents#lineup h4{
    text-align: center;
    font-size: 40px;
    letter-spacing: 5px;
    display: flex;
    align-items: center;
    padding-top: 10px;
}
main .contents#lineup h4:before,
main .contents#lineup h4:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #FFF;
}
main .contents#lineup h4:before {
    margin-right: 1rem;
}
main .contents#lineup h4:after {
    margin-left: 1rem;
}

/**************** 背景固定 *************/
main .contents#lineup .lineup_inr{
    position: relative;
    margin-top: 50px;
    padding-top: 100vh;
}
main .contents#lineup .lineup_inr .lineup_bg01{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/lineup_bg01.png") center center no-repeat;
    background: url("../img/lineup_bg08.png") center center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100vh;
    transition: all 1.5s ease-in-out;
}
main .contents#lineup .lineup_inr.pt2 .lineup_bg01{
    background: url("../img/lineup_bg02.png") center center no-repeat;
    background-size: contain;
}
main .contents#lineup .lineup_inr.pt3 .lineup_bg01{
    background: url("../img/lineup_bg03.png") center center no-repeat;
    background: url("../img/lineup_bg05.png") center center no-repeat;
    background-size: contain;
}
main .contents#lineup .lineup_inr.pt4 .lineup_bg01{
    background: url("../img/lineup_bg06.png") center center no-repeat;
    background-size: contain;
}
main .contents#lineup .lineup_inr.fixed .lineup_bg01{
    position: fixed;
    opacity: .3;
}
main .contents#lineup .lineup_inr .inr{
    position: relative;
    z-index: 2;
}

/**************** 製品情報 *************/
main .contents#lineup ul.prod{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	/*align-items: flex-end;*/
}
main .contents#lineup ul.prod li{
    width: 50%;
    text-align: center;
    margin-bottom: 100px;
}
main .contents#lineup ul.prod li > img{
    width: 299px;
    filter: drop-shadow(0px 0px 20px rgba(0,0,0,1));
}
main .contents#lineup #lineup1 ul.prod li:nth-of-type(1),
main .contents#lineup #lineup3 ul.prod li:nth-of-type(1){
	width: 100%;
}
/*
main .contents#lineup ul.prod.pt1 li:nth-of-type(3) > img,
main .contents#lineup ul.prod.pt2 li:nth-of-type(1) > img{
    width: 299px;
}
*/
main .contents#lineup ul.prod.pt2 li > img,
main .contents#lineup ul.prod.pt2 li.towel > img{
    width: 422px;
}
/*
main .contents#lineup ul.prod.pt2 li:nth-of-type(1){
    width: 100%;
}
main .contents#lineup ul.prod.pt2 li:nth-of-type(1) h5 img{
    height: 29px;
}
*/
main .contents#lineup ul.prod li h5{
    margin: 30px 0 23px;
}
main .contents#lineup ul.prod li h5 span{
    display: block;
    font-size: 14px;
    margin-top: 7px;
}
main .contents#lineup ul.prod.pt2 li h5,
main .contents#lineup ul.prod.pt2 li.towel h5{
    font-size: 16px;
    font-weight: bold;
}
main .contents#lineup ul.prod.pt2 li.towel h5{
    margin-top: -40px;
}
main .contents#lineup ul.prod.pt2 li h5 span,
main .contents#lineup ul.prod.pt2 li.towel h5 span{
    font-size: 24px;
}
main .contents#lineup ul.prod li h6{
    font-size: 20px;
    font-weight: bold;
}
main .contents#lineup ul.prod li .data{
    margin: 23px 0 0 0;
}
main .contents#lineup ul.prod li .data > span{
    font-size: 14px;
    border: 1px solid #FFF;
    padding: 7px 12px;
    margin-bottom: 6px;
    display: inline-block;
    line-height: 100%;
}
main .contents#lineup ul.prod li .data p{
    font-size: 14px;
}
main .contents#lineup ul.prod li .data p.red{
    font-size: 14px;
	color: #FFF;
}
main .contents#lineup ul.prod li .data p.price{
    display: block;
    font-size: 18px;
}
main .contents#lineup ul.prod li .data p.price span{
    font-size: 14px;
}
main .contents#lineup ul.prod li .data > img{
    display: block;
    margin: 14px auto;
}

main .contents#lineup ul.prod li a{
    display: block;
    width: 205px;
    height: 45px;
    margin: 30px auto 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
main .contents#lineup ul.prod li a:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #FFF;
    transform: skewX(-15deg);
    z-index: -1;
    filter: drop-shadow(0px 0px 20px rgba(0,0,0,1));
	transition: all .3s ease-in-out;
    box-sizing: border-box;
}
main .contents#lineup ul.prod li a:hover:before{
    transform: skewX(0deg);
    background: #FFF;
}
@media screen and (max-width: 1100px) {
    main .contents#lineup {
        padding: calc(130/1100 * 100vw) 0 0;
    }
	main .contents#lineup .lineup2otr{
		padding-bottom: calc(250/1100 * 100vw);
	}
    main .contents#lineup ul.prod.pt2 li > img{
        max-width: 94%;
    }
    main .contents#lineup ul.prod.pt2 li > img,
    main .contents#lineup ul.prod.pt2 li.towel > img {
        width: calc(422/1100 * 100vw);
    }
    main .contents#lineup ul.prod li h5{
        margin: calc(30/1100 * 100vw) 0 calc(23/1100 * 100vw);
    }
    main .contents#lineup ul.prod li h5 span{
        font-size: calc(14/1100 * 100vw);
        margin-top: calc(7/1100 * 100vw);
    }
    main .contents#lineup ul.prod.pt2 li h5,
    main .contents#lineup ul.prod.pt2 li.towel h5{
        font-size: calc(16/1100 * 100vw);
    }
    main .contents#lineup ul.prod.pt2 li.towel h5{
        margin-top: calc(-40/1100 * 100vw);
    }
    main .contents#lineup ul.prod.pt2 li h5 span,
    main .contents#lineup ul.prod.pt2 li.towel h5 span{
        font-size: calc(24/1100 * 100vw);
    }
    main .contents#lineup ul.prod li h6{
        font-size: calc(20/1100 * 100vw);
    }
    main .contents#lineup ul.prod li .data{
        margin: calc(23/1100 * 100vw) 0 0 0;
    }
    main .contents#lineup ul.prod li .data > span{
        font-size: calc(14/1100 * 100vw);
        padding: calc(7/1100 * 100vw) calc(12/1100 * 100vw);
        margin-bottom: calc(6/1100 * 100vw);
    }
    main .contents#lineup ul.prod li .data p{
        font-size: calc(14/1100 * 100vw);
    }
    main .contents#lineup ul.prod li .data p.price{
        font-size: calc(18/1100 * 100vw);
    }
}

@media screen and (max-width: 580px) {
    main .contents#lineup ul.prod li a{
        width: 125px;
    }
    .navi_link{
        display:none;
    }
}
/*********************************************************** LINE UP END *********/



























/*************************** FOOTER *********/
footer{
	height: 120px;
	background: #FFF;
    position: relative;
    z-index: 5;
    min-width: 1100px;
}
footer p{
	color: #000000;
	font-size: 14px;
	text-align: center;
	line-height: 120px;
}
@media screen and (max-width: 1100px) {
    footer{
        height: calc(120/1100 * 100vw);
        min-width: 100%;
    }
    footer p{
        font-size: calc(14/1100 * 100vw);
        line-height: calc(120/1100 * 100vw);
    }
}