/*改字型font-family, h1/h2大小, #tab2 h2padding-bottom*/
@import "navigation.css";
@import "custom-tw.css";
/*base attribute*/
body{
font-family:"Meiryo" !important;
}
h3, h4{
font-weight:bold !important;}
li, p, td{
font-size:18px;
border:none;
}
#tab3 tr{
width:100%
}
#tab3 tr>td{
width:70%;
}
/*tab bottom*/
.tab-content{font-size:20px}
.bottom{
margin-top:0 !important;
background:none;
width:auto;
margin:5px;
}
.all h2{
font-size:36px;
color:#06ffff;
line-height: initial !important;
margin:5% 0;
font-weight:normal !important;
}
.all h1 {
color: #fff;
/*line-height: 5vmin;
margin-top: 5%;*/
font-weight:bold !important;
}
.content h2, .content-r h2, #other h2 {
font-size: 23px;/*34px*/
line-height:initial;
font-weight:bold !important;
}
.s-side.change:after {
transform:rotate(-135deg);
}
/*id*/
#tab3 h2:before{top:0px}
#tab2, #tab3{
font-size:20px}
/*#tab2 .content-r, #tab3 .content-r{
padding:0 8%;
}*/
#tab2 i, #tab3 i{
padding-right:1%;
}
#tab2 h3{
color:#0079c3; font-size:24px}
#other-l{
display:flex;
align-items:center;
flex-direction: row-reverse;
}
#other-l .content {
padding: 0 12% 0 9%;
}
.vcontainer>div{bottom:-54px}
.series{padding-bottom:0}

/*media queries*/
@media screen and (max-width:576px){
.all h1{
font-size:32px;
line-height:1;
margin-top:5px;
}
.series{padding:0 2px}
#other p{
border-right:none;
border-bottom:3px solid #3e3a39;padding-bottom:2rem}	
#other p:last-child{
border-bottom:none;}
#text p:not(:last-child){
border-right:none;
border-bottom:3px solid #3e3a39;	
}
}
@media screen and (min-width:768px) and (max-width:1440px){
.headimg{
margin-top:5vw; /*if carousel move out, then move away*/
}
.header-pic>img{
text-align:center;
margin-top:5vw;
max-width:700px;
width:100%;
}}
@media screen and (max-width:767px){
.side-button{
display:none;
}
.all, .header-pic{margin-top:3rem}
.header-pic>img, .click-light{
text-align:center;
/*margin-bottom:17vw;*/
}
#copy>div {height: 370px;}
}
@media screen and (min-width:1600px){/*if carousel move out, move out*/
.g-owlcarousel-item-img{width:80%;}
.header-pic{margin-top:2vw}
}
@media screen and (min-width:990) and (max-width:1200px){
	.tab-content {
    width: 990px;
    margin: auto;
	}
}
/*desktop only*/
@media screen and (min-width:992px){
	/*head*/
	.head ul{padding-left:20px}
	/*.all h1{font-size:36px;}*/
	.content h2, .content-r h2, #other h2{font-size:40px}
	.all h2{margin:0 0 15px}
	.pro>div h3, .pro>div p{
    text-align: left;
	}
	#text{text-align:left}
	#text p{padding:0 3%}
	#other>.col-md-7{padding:0 8% 0 0; max-width:772px}
	#other-l .content{max-width:522px;float: right;padding:0}
	#tab2 h2, #tab3 h2{font-size:36px}
}
@media screen and (max-width: 767px) and (min-width: 457px){
	#copy>div {height: 400px;}
}
@media screen and (max-width:476px){
.graphic {flex-direction: column;align-items: baseline;}
}