/*上書き*/
/*common*/
body{
  color: #FFFFFF;
	background-color: #000;
  font-size: 14px;
	
	/*1280確認用　あとで削除*/
	max-width:1280px;
	margin: auto;
	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
}
:root {
	  --font-family-sans-serif: "Noto Sans", "Noto Sans CJK JP", sans-serif;
	--font-family-monospace: "Noto Sans", "Noto Sans CJK JP", sans-serif;
}

a { color: #fff; text-decoration: none;}
a:hover { color: #fff; text-decoration: underline;}
sub {vertical-align:0.2em; font-size: 0.6em;}


header{background:url(../img/head_bg.png) center center no-repeat; background-size: 100% 100%;
opacity:0; z-index: 200; position: fixed; width: 100%; top:-56px; right: 0;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 1),
    inset 0 0 150px rgba(0, 0, 0, 0.75), 3px 3px 10px 2px rgba(0,0,0,0.6);}

.headlogo {max-width: 200px; z-index: 1000;}
.menu_list {display: block; position: absolute; right:40px; top:26px; font-size: 16px; list-style: none;}
.menu_list li {float: left; margin-left: 30px; letter-spacing: 0.1em; text-shadow: 2px 1.5px 0px #000;}
.menu_list li img {height: 30px; width: auto;}
.menu_list li a:hover { text-decoration: none; opacity: 0.5; text-shadow: none; }

#cover {position: fixed; width: 100%; height:100%; background: rgba(0, 0, 0, 0.95); z-index: 199;
  opacity: 0;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  visibility: hidden;
  overflow: hidden;
        display: flex;
        flex-wrap: 	wrap;
        align-items: center;
        justify-content: center;}
#cover.active {
    opacity: 1;
    visibility: visible;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;}
#cover ul{text-align: center; margin:0; padding:0;}
#cover ul li{text-align: center; display: block;
font-size: 3em;
font-weight: 700;}
#cover ul li a{ display: block; padding:14px 0;}
#cover ul li a:hover{text-decoration: none; opacity: 0.3;}

/*メニュー*/
.menuWrapper {
   z-index: 300;
  width: 40px;
  height: 40px;
	position: absolute; top:14px; right: 20px;
	display: none;/*PC時は消す*/
}

#menuButton {
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

#menuButton span,
#menuButton::before,
#menuButton::after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  width: 30px;
  height: 2px;
  margin: auto;
  background: #fff;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.3);
}
#menuButton span {
  overflow: hidden;
  z-index: 1;
  color: #000;
}
#menuButton::before {
  z-index: 2;
  transform: translate(0, -10px);
  content: "";
}
#menuButton::after {
  z-index: 2;
  transform: translate(0, 10px);
  content: "";
}
#menuButton span {
  opacity: 1;
  transition: opacity 150ms 50ms;
}
#menuButton::before,
#menuButton::after {
  transition: transform 200ms;
}

#menuButton.active span {
  opacity: 0;
  transition: opacity 150ms;
}
#menuButton.active::before {
  transform: rotate(45deg);
}
#menuButton.active::after {
  transform: rotate(-45deg);
}

img {width:100%;}

.container {clear:both; margin-bottom: 38px;}
/*bootstrapでレスポンシブ設定削除*/

/*delighter Set*/
.zoomin {opacity: 0; transform:scale(0.95); transition: all .1s ease-out;}
.delighter.zoomin.started {}
.delighter.zoomin.started.ended {opacity: 1; transform:scale(1);}

.slideup {opacity: 0; transform:translateY(10%); transition: all .7s ease-out .1s;}
.delighter.slideup.started {}
.delighter.slideup.started.ended {opacity: 1; transform:translateY(0);}

.slideup2 {opacity: 0; transform:translateY(50%); transition: all .4s ease-out;}
.delighter.slideup2.started {}
.delighter.slideup2.started.ended {opacity: 1; transform:translateY(0);}

.slidedown {opacity: 0; transform:translateY(-5%); transition: all .3s ease-out;}
.delighter.slidedown.started {}
.delighter.slidedown.started.ended {opacity: 1; transform:translateY(0);}

.slidein {opacity: 0; transform:scale(1.2); transition: all .3s ease-in;}
.delighter.slidein.started {}
.delighter.slidein.started.ended {opacity: 1; transform:scale(1);}
.diff1 { transition-delay: .2s;}
.diff2 { transition-delay: .3s;}
.diff3 { transition-delay: .4s;}
.diff4 { transition-delay: .5s;}
.diff5 { transition-delay: .6s;}
.diff6 { transition-delay: .7s;}

.fadein {opacity: 0; transition: all 3s ease-out;}
.delighter.fadein.started {}
.delighter.fadein.started.ended {opacity: 1;}

.fadein2 {opacity: 0; transition: all 1s ease-out;}
.delighter.fadein2.started {opacity: 1;}
.delighter.fadein2.started.ended {opacity: 1;}

/*top*/
h2{position: absolute; top:40%; left:5%;z-index: 100; max-width:540px;}
.plate {position: absolute;top:5px; right:5px; max-width: 278px; z-index: 100;}


.topmovie{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.topmovie video,.topmovie .sp,.topmovie .spp{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  opacity: 0.6;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.top_menu {text-align: center; position: relative; border-top:#fff 1px solid; }
.top_menu div{ position: absolute; top:-61px; left: 50%;}
.top_menu div.center_logo{width:274px; position: absolute; top: -100px; left: 50%;}
.top_menu div.center_logo img{ position: absolute; left:-137px;}
.top_menu a::after{ content: " "; display: block; position:absolute; top:-5px; width:122px; height:36px; border: #fff 1px solid; border-bottom: none;}
.top_menu a {display: block; width:122px; height: 78px; position: absolute; background: #000; top:25px; z-index: 100; 
	border-top: #b51c22 5px solid;}
.top_menu a.button {
  position: relative;
  display: inline-block;
  color: #333;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}
.top_menu a.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #b51c22;
  transform-origin: left bottom;
  transform: scale(1, 0);
  transition: transform .3s;
}
.top_menu a.button:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.top_menu a.button.on:before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.top_menu div.com a {left: -300px;}
.top_menu div.pro a {left: -60px;}
.top_menu div.equ a {left: 180px;}

.arrow {margin:80px auto 30px auto; width:72px;height: 23px; background: url(../img/arrow.png) center center no-repeat; background-size: 100%;}
.bt_movie {max-width:157px; position: absolute; right:61px; bottom: 38px;}

section {clear: both;}

.ct {max-width:850px; margin: auto; position: relative;}
.ct h3 {max-width:354px;}
.ct .text {max-width:415px; height:171px;}

.ct_01 { max-width: 950px; margin: 0 auto; height: 338px; background: url(../img/top_ct1_img.png) center bottom no-repeat; background-size:100%; position:relative;}
.ct_01 h3{ margin-bottom: 20px;}
.ct_03 { max-width: 950px; margin: auto; height: 338px; background: url(../img/top_ct3_img.png) center bottom no-repeat; background-size:100%; position:relative;}
.ct_03 h3{ margin-bottom: 14px;}

.ct_02 { margin: auto; height: 635px; background: url(../img/top_ct2_bg.png) center center no-repeat; background-size:100%; position:relative;}
.sec::before,.sec::after {content: " ";width: 90px; height:1px; background: #898989; display: block; margin: 0 auto;}
.sec::before {margin-bottom: 72px;}
.sec::after {margin-top: 72px;}

.ct_02 .container-fluid .row.align-items-center {height:635px;}
/*.ct_02 .row div {border:#fff 1px solid;}*/
.frame {background: #000; box-shadow: 7px 7px 5px rgba(0,0,0,0.75);overflow: hidden;}
.spacing {margin-top:20px;}

/*footer*/
.copyright{ max-width: 950px;margin:0 auto; padding:16px 0 38px 26px; display: block;}
.copyright img.ico{max-width:113px; float: left; margin-right:3px; }
.copyright img.name{max-width:335px; margin-top: 24px;}
.copyright h5{margin-top: 8px; font-size: 14px;}
.copyright p{margin-top: 8px; font-size: 14px;}

/*エフェクト*/
.eff img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}
.eff:hover img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}




/*Pages*/
.in_top { overflow: hidden; position: relative;}
.in_top .top_menu {margin-top: 120px;}
.in_top .top_menu . { border: #fff 1px solid;}
.in_top .in_title {}

.fortop {width:70px; position: absolute;top:0; left:0;}

.in_top section { max-width: 950px; margin: 0 auto; position:relative;}
.in_top section h3 {font-size: 19px; margin-bottom: 53px;}
.in_top section h3::after { content: " "; width:950px; position: absolute; left: -630px; display: block; border-bottom: #b51c22 1px solid; margin-top: 7px;}
.in_top .set_01,.in_top .set_02 { margin-top: 90px;}

table.infolist {position: relative;}
table.infolist tr{width:576px; display: block; border-top:#2b2b2b 1px solid; padding:17px 0;}
table.infolist th{width:109px; vertical-align:top;}
table.infolist td{width:467px; vertical-align:top;}

.ace_logo_info {position:absolute; top:0; right:0; z-index: 100; width:292px !important; display: block; border-left: #000 10px solid;}
.ace_logo_info img { border: #2b2b2b 1px solid;}
.gmap {
position: relative;
padding-bottom: 50%; /* 縦横比*/
height: 0;
overflow: hidden;
}
.gmap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.ico_mail {display:inline; width:14px;}

table.infolist.history { margin-bottom: 20px;}
table.infolist.history tr.point{ border-top:#2b2b2b 1px solid;}
table.infolist.history tr{ border:none; padding:17px 0 0 0;}
.com_images { display: block; width:370px !important; position: absolute; right:-400px; top:0;}
.com_images_slim { display: none; }


.pro table.infolist {width:100%; max-width: 600px;}
.pro table.infolist tr {width:100%;}
.pro table.infolist td {width:100%;}


.in_top.pro section { max-width: 860px;}
.howto { margin-top: 90px;}
.howto h4 {text-align: center; text-shadow: 1px 1px 4px #000; padding:45px 0; background: url(../img/pro_flow_tbg.png) top center no-repeat; background-size: 100%;}
.flow {}
.flow .col {max-width:860px; margin:0 auto; padding:0;}

img.pro_con_up{margin-top:-230px;}
.in_top.pro .pro_con .frame{ overflow: visible; height:230px;}
.in_top.pro .pro_con .frame p{ margin-top:5px;}

ul.equ_list{padding:0;}
ul.equ_list li{display: block;  border-bottom:#2b2b2b 1px solid; margin-bottom:15px;}
ul.equ_list h4{ font-size: 18px; margin-bottom:15px;}
ul.equ_list p{ margin:15px 0;}
ul.equ_list .equ_images{}
ul.equ_list .equ_images img {width:50%;}


@media (max-width: 1150px) {
.in_top .plate{max-width:200px;}
}
@media (max-width: 1040px) {
.in_top .plate{max-width:80px;top:3px; right:3px;}
	
	.com_images {display:none;}
	.com_images_slim {display:block; width:100%; margin-bottom:20px;}
	.com_images_slim img {width:50%;}
	
table.infolist {width:100%;}
table.infolist tr{width:100%;}
table.infolist th{}
table.infolist td{width:auto;}
	
.set_01,.set_02 {margin: 0 20px;}
.howto {margin-right: 20px; margin-left: 20px;}
.howto h4 { padding:30px 0;}

img.pro_con_up{margin-top:-210px; height:372px;}
.in_top.pro .pro_con .frame{ height:210px;}
}
@media (max-width: 950px) {
h2{max-width:420px; left:0; padding:0 15px;}
	 .plate{max-width:230px;}
}
@media (max-width: 899px) {
	.menu_list {display:none;}
	.menuWrapper {display:block;}
}
@media (max-width: 860px) {
	.sample .col{padding:0;}
	.sample .col-4 {max-width:80%;
    flex:80%; margin-top:20px; margin-left: auto; margin-right: auto;}
	
.in_top.pro .sample .frame{ height:auto;}
	img.pro_con_up{margin-top:0; height:auto;}
	

}
@media (max-width: 760px) {
h2{max-width:320px; top:35%;}
.plate{max-width:200px;}
.ct_02 {height: 465px;}
.ct_02 .container-fluid .row.align-items-center { height: 465px;}
.bt_movie {max-width: 100px;right: 10px;bottom: 20px;}
body { font-size: 12px;}
	p{ line-height: 20px;}
.ct_01,.ct_03 { height: 285px;}
.ct h3 {max-width:254px;}
.copyright h5{font-size: 12px;}
.copyright p{font-size: 12px;}
	
.in_top .top_menu {margin-top: 72px;}
.in_top .plate{max-width:60px;top:7px; right:5px;}
	
.in_top .set_01,.in_top .set_02 { margin-top: 50px;}
.in_top section h3 {font-size: 16px; margin-bottom: 30px;}
	
.howto { margin-top: 50px;}
.howto h4 { padding:20px 0; font-size: 20px;}
	
}
@media (max-width: 750px) {
	
.plate{max-width:150px;}
.top_menu div.center_logo{width:174px; top: -50px;}
.top_menu div.center_logo img{ left:-87px;}
.top_menu div.com a,.top_menu div.pro a,.top_menu div.equ a {display:none;}
	
header {opacity:1 !important;top:0 !important;}
body{padding-top:60px;}
.arrow {margin:40px auto 40px auto; width:52px;height: 23px;}
	
.sec::before,.sec::after {display: none;}
	
	/*おためし*/
.in_top .top_menu {margin-top: 0px;}
.howto h4{ background-size:100% 100%;}
}

@media (max-width: 600px) {

.ace_logo_info {position:relative; margin: 0 auto 20px auto; top:0; right:0; z-index: 100; width:292px !important; display: block; border-left: #000 10px solid;}
ul.equ_list .equ_images img {width:100%; margin-bottom:10px;}
ul.equ_list .equ_images img:last-child {margin-bottom:0;}
}
@media (max-width: 500px) {
.plate{max-width:100px;}
h2{max-width:250px; top:30%;}
.top_menu div.center_logo{width:120px; top: -30px;}
.top_menu div.center_logo img{ left:-60px;}
	
.ct_02 {height: auto; padding:50px 0; background-size:100% 100%;}
.ct_02 .container-fluid .row.align-items-center { height: auto;}
	.col{padding:0;}
	.col-4 {max-width:100%;
    flex:100%; margin-top:20px;}
	.col-6 {max-width:100%;
    flex:100%; margin-top:20px;}
	
	.ct .col-4 {max-width:50%;
    flex:50%; padding:0;}
	
	.howto .mt-5 {margin-top:0 !important;}
	.in_top.pro .pro_con .frame {height:auto;}
	img.pro_con_up{margin-top:0;}
	.set01{padding:0 18%;}

#cover ul li{font-size: 2.2em;}
#cover ul li a{ padding:7px 0;}
	
.headlogo {max-width: 130px;}
.headlogo img {	 margin: 12px !important;}
.menuWrapper {
  width: 14px;
  height: 14px;
	position: absolute; top:7px; right: 26px;
}

#menuButton {
  width: 30px;
  height: 30px;
}
#menuButton span,
#menuButton::before,
#menuButton::after {
  width: 22px;
  height: 1px;
}
body{padding-top:40px;}
	
.ct h3 {max-width:200px;}
	
.copyright{ max-width: 100%; margin:0 auto; padding:0 15px; display: block;}
.copyright img.ico{max-width:70px; float:none; margin:5px auto 0 auto; display: block; }
.copyright img.name{max-width:100%; margin-top: 5px;}
	
	
	/*おためし*/
.in_top .top_menu {margin-top: 0px;}
/*.in_top .top_menu {margin-top: 42px;}*/
.in_top .plate{max-width:45px;top:7px; right:3px;}
.in_top .fortop{width:30px;}
	
table.infolist th{width:80px;}
	.sample .col-4 {max-width:100%;
    flex:100%;}
}