@charset "utf-8";

#main{padding :	0px;}
.modal-inner{padding: 96px 83px;}
.modal-inner .title_box{text-align: center;}
.modal-inner .title_box h2{font-family: gill-sans-nova, sans-serif; font-weight: 500; font-style: normal; font-size: 30px; letter-spacing: 0.05em; line-height: 107%; border-bottom: 1px solid #707070; padding: 0 0 15px;}
.modal-inner .tt_box{text-align: center;}
.modal-inner .title_box h2.big_line{line-height: 134%;}
.modal-inner .tt_box .name{font-family: gill-sans-nova, sans-serif; font-weight: 600; font-style: normal; font-size: 12px; padding: 30px 0 0; letter-spacing: 0.05em;}
.modal-inner .tt_box .name span{font-family: 'Noto-Sans-JP-Medium'; font-size: 16px;display: inline-block; padding: 0 20px 0 0 ;}
.modal-inner .tt_box .name.ryu span{padding: 0px;}
.modal-inner .tt_box.profile_name .name{font-size: 14px; padding: 30px 0 0; line-height: 180%;font-weight: 500; }
.modal-inner .tt_box.profile_name .name span{ font-size: 26px;display: inline-block; padding: 0; line-height: 180%;}


.modal-inner .tt_box .box_tt{font-family: 'Noto-Sans-JP-Regular'; border: 1px solid #707070; border-radius: 100px; display: inline-block; line-height: 225%; font-size: 12px; margin: 20px 0 0; padding: 0 17px 0 20px;}



.modal-inner .textbox{padding: 32px 0 0; }
.modal-inner .img_box{width: 100%; height: auto; padding: 43px 0 0;}
.modal-inner .img_box.profile{width: 390px; margin: 0 auto; padding: 63px 0 0;}
.modal-inner .img_box.launch_box{width: 74%; margin: 0 auto;}
.modal-inner .img_box img{width: 100%; height: auto;}
.modal-inner .textbox{padding: 32px 0 0;}
.modal-inner .textbox.profile_text{padding: 52px 0 0;}
.modal-inner .textbox h2{text-align: center; font-size: 22px; line-height: 160%; font-family: 'Noto-Sans-JP-Medium';}
.modal-inner .textbox h3{text-align: center; font-size: 22px; line-height: 160%; font-family: 'Noto-Sans-JP-Medium';}
.modal-inner .textbox p{font-size: 14px; line-height: 257%; font-family: 'Noto-Sans-JP-Regular'; letter-spacing: 0.05em; }
.modal-inner .textbox.profile_text p{font-size: 16px; line-height: 225%;}
.modal-inner .textbox p.center_tt{text-align: center;}
.modal-inner .textbox p.left_tt{text-align: left; padding: 30px 0 0;}
.modal-inner .textbox .link_btn{display: flex;align-items: center;}
.modal-inner .textbox .link_btn.big{width: 705px; margin: 0 auto;}
.modal-inner .textbox .link_btn.mini{width: 462px; margin: 0 auto;}
.modal-inner .textbox .link_btn a:not(:last-child){margin-right: 7px;}
.modal-inner .textbox .link_btn a{ margin-left: 0;}
.modal-inner .textbox a.btn{font-family: gill-sans-nova, sans-serif; font-weight: 500; font-style: normal;letter-spacing: 0.05em; text-align: center; margin: 0 auto; background: url(../../images/assets/modal/icn_1.png) no-repeat left 20px center; background-size: 15px; display: block; width: 219px; height: auto; padding: 13px 0 16px; border: 1px solid #707070; color: #000; text-decoration: none; margin: 50px auto 0;}


/*--------------------------- modal-container ----------------------*/
body.mover{background: none;}


.modal-container .modal-close{font-size: 13px; font-family: 'Noto-Sans-JP-Regular'; color: #fff; letter-spacing: 0.05em; width: 42px; height: auto; padding: 0px;line-height: 100%; top: 5%; right: 3%; position: absolute; z-index: 1000;}
.modal-container .modal-close span{display: block; width: 42px; height: 42px; position: relative; }
.modal-container .modal-close span:before{display: block; content: ""; width: 100%; height: 1px; transform: rotateZ(-45deg) translateY(-50%); background: #fff; position: absolute; top: 50%; }
.modal-container .modal-close span:after{display: block; content: ""; width: 100%; height: 1px; transform: rotateZ(45deg) translateY(-50%); background: #fff; position: absolute; top: 50%; }
.modal-container #modal-content{z-index: 100; overflow: hidden !important; visibility: visible !important;}
.modal-container #modal-content video { will-change: auto; }
.modal-container{ width: 100%; height: auto; margin: 0 auto;}
.modal-container .video_box{height: 100vh;}
.modal-container .video_box .video_box_2{height: 500vh;}
.modal-container .modal-body{position: relative; height: 100%; width: 100%;}
.modal-container .modal-body .scroll_img{width: 256px; height: auto; position: fixed; transform: translate(-50%,-50%); top: 50%; left: 50%; z-index: 1000; opacity: 1; transition: opacity 0.5s ease;}


.video_box_2 canvas{min-width: auto !important; min-height: auto !important; height: auto !important; width: 100% !important; border-radius: 0px !important;}
.video_box_2 video{min-width: auto !important; min-height: auto !important; height: auto !important; width: 100% !important; border-radius: 0px !important;}
@media only screen and (max-width: 768px) {
 	.modal-inner .tt_box.profile_name .name span.name_box .SP{display: inline-block; line-height: 100%;}
}

@media only screen and (max-width:640px) {
	.modal-inner{padding:60px 26px;}
	
	.modal-inner .title_box h2{ font-size: 20px; padding: 0 0 15px;}
	.modal-inner .tt_box .name{font-size: 11px; padding: 15px 0 0;}
	.modal-inner .tt_box .name span{font-size: 13px;padding: 0 10px 0 0 ;}
	.modal-inner .tt_box .name.ryu span{padding: 0px;}

	.modal-inner .tt_box .box_tt{ line-height: 200%; font-size: 11px; margin: 10px 0 0; padding: 0 17px 0 20px;}
		
	.modal-inner .tt_box.profile_name .name{font-size: 12px; padding: 15px 0 0; }
	.modal-inner .tt_box.profile_name .name span{ font-size: 18px;}
	.modal-inner .tt_box .box_tt{font-size: 12px; margin: 20px 0 0; padding: 0 17px 0 20px;}
	
	.modal-inner .textbox{padding: 32px 0 0; }
	.modal-inner .img_box{ padding: 21px 0 0;}
	.modal-inner .img_box.profile{width: 50%; margin: 0 auto; padding: 31px 0 0;}
	.modal-inner .img_box.launch_box{width: 75%; margin: 0 auto;}
	
	.modal-inner .textbox{padding: 23px 0 0;}
	.modal-inner .textbox.profile_text{padding: 26px 0 0;}
	.modal-inner .textbox h2{font-size: 18px; }
	.modal-inner .textbox h3{font-size: 16px; }
	.modal-inner .textbox p.left_tt{padding: 20px 0 0;}
	.modal-inner .textbox p{font-size: 12px; line-height: 210%;}
	.modal-inner a{width: 100%; height: auto; margin: 23px auto; margin: 32px auto 0;padding: 16px 0; font-size: 13px;}
	
	.modal-inner .textbox.profile_text p{font-size: 13px; line-height: 200%;}
	.modal-inner .textbox a.btn{font-family: gill-sans-nova, sans-serif; background: url(../../images/assets/modal/icn_1.png) no-repeat left 5px center; background-size: 15px; display: block; width: 48%; height: auto; padding: 15px 0; margin: 14px auto 0; font-size: 12px;}
	.modal-inner .textbox a.one_link{width: 70%;}

	.modal-inner .textbox .link_btn{ display: flex; align-items: center; flex-wrap: wrap; }
	.modal-inner .textbox .link_btn.big{width: 100%; margin: 0 auto;}
	.modal-inner .textbox .link_btn.mini{width: 100%; margin: 0 auto;}
	.modal-inner .textbox .link_btn a{margin: 20px 0 0; width: 48%;}
	.modal-inner .textbox .link_btn a:not(:last-child){margin-right: 0px;}
	.modal-inner .textbox .link_btn a:not(:nth-child(2n)){margin-right: 2%;}
	
	
	/*--------------------------- modal-container ----------------------*/
	.modal-container .modal-close{font-size: 13px; width: 42px; height: auto; top: 5%; right: 3%; }
	.modal-container .modal-close span{display: block; width: 42px; height: 42px; position: relative;}
	.modal-container #modal-content{z-index: 100;}
	.modal-container{ width: auto; height: auto; margin: 0 auto;}
	.modal-container .video_box{height: 100vh;}
	.modal-container .modal-body{position: relative; height: 100%; width: 100%;}
	.modal-container .modal-body .scroll_img{width: 100px; height: auto;}
	
	
	.video_box_2 canvas{min-width: auto !important; min-height: auto !important; height: auto !important; width: 100% !important;}
	.video_box_2 video{min-width: auto !important; min-height: auto !important; height: auto !important; width: 100% !important;}
}