@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

*{
margin:0;
padding:0;
border:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus, *:focus { outline:none; }
html,body {
height: 100%;
}
.SPhover{
opacity: 0.65;
}


/*共通*/
body{
-webkit-text-size-adjust:100%;
/*font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, メイリオ, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", arial, sans-serif;*/
font-family: 'Noto Sans TC', sans-serif;
text-align: center;
}

/*言語選択*/
#language{
position: absolute;
top:0;
right: 0;
font-size: 3vw;
padding: 2.8em 0.5em;
color: #FFF;
z-index: 25;
}
#language span{
font-weight: bold;
}
#language a,
#language a:hover,
#language a:visited{
color: #FFF;
}

/*メニュー*/
#mainNav{
}
#menuSPBG{
display: none;
background: #000;
opacity: 0.75;
width: 100%;
height: 100%;
position: fixed;
z-index: 24;
}
#mainNav div{
display: block;
position: fixed;
z-index: 25;
left:2%;
bottom:2%;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
background: url('images/hmbg.png') center center no-repeat;
background-size: contain;
}
#menu-trigger,
#menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
#menu-trigger {
position: relative;
width: 50px;
height: 65px;
}
#menu-trigger span {
position: absolute;
left: 20%;
width: 60%;
height: 3px;
background-color: #fff;
border-radius: 3px;
}
#menu-trigger span:nth-of-type(1) {
bottom: 29px;
}
#menu-trigger span:nth-of-type(2) {
bottom: 20px;
}
#menu-trigger span:nth-of-type(3) {
bottom: 11px;
}
#menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(9px) rotate(-45deg);
transform: translateY(9px) rotate(-45deg);
}
#menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
#menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-9px) rotate(45deg);
transform: translateY(-9px) rotate(45deg);
}

#mainNav ul{
list-style: none;
position: fixed;
left: 0;
top:0%;
width: 40%;
height: 100%;
background: #FFF;
position: fixed;
z-index: 24;
margin-left: -40%;
}
#mainNav ul li{
width: 100%;
margin: 3% 0;
font-size: 0;
}
#mainNav ul li a{
display: block;
width: 100%;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top: 22%;
}
#mainNav ul li:nth-child(1) a{
display: block;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top:60%;
background: url('images/logo_spmenu.png') bottom center no-repeat;
background-size: 80%;
margin-top: 50%;
}
#mainNav ul li:nth-child(2){
margin-top: 6%;
}
#mainNav ul li:nth-child(2) a{
background: url('images/menu_home.png') 90% center no-repeat #E60000;
background-size: 60%;
}
#mainNav ul li:nth-child(3) a{
background: url('images/menu_works.png') 90% center no-repeat #FF9B00;
background-size: 60%;
}
#mainNav ul li:nth-child(4) a{
background: url('images/menu_company.png') 90% center no-repeat #29A2BD;
background-size: 60%;
}
#mainNav ul li:nth-child(5){
margin-top: 14%;
}
#mainNav ul li:nth-child(5) a{
background: url('images/menu_contact.png') 90% center no-repeat #FF6380;
background-size: 60%;
}
#mainNav ul li:nth-child(6){
margin-top: 6%;
text-align: right;
}
#mainNav ul li:nth-child(6) a{
display: inline-block;
width: 25%;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top: 25%;
margin: 0 5% 0 0;
}
#mainNav ul li:nth-child(6) a:nth-child(1){
background: url('images/icon_tw.png') center center no-repeat;
background-size: contain;
}
#mainNav ul li:nth-child(6) a:nth-child(2){
background: url('images/icon_fb.png') center center no-repeat;
background-size: contain;
}



/*ヘッダ*/
header{
height: 100%;
background: transparent;
font-size:0;
position: relative;
}
header h1{
text-indent: -9999px;
}
#hole{
width: 100%;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top: 4%;
background: url('images/hole.png') center top no-repeat;
background-size: 70%;
margin: 3.8% auto;
position: absolute;
}
#arrow{
width: 8%;
max-width: 40px;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top: 4.875%;
background: url('images/arrow.png') 0 bottom no-repeat;
background-size: contain;
position: absolute;
bottom:2%;
left: 50%;
opacity: 1;
}
#wIcon{
width: 100%;
}
#wIcon ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
}
#wIcon li{
display: inline-block;
margin: 5%;
}
#wIcon li a img{
width: 100%;
height: auto;
}

/*フッタ*/
footer{
background:#FFF;
font-size: 0;
}
#ftrLogo{
display: block;
width: 60%;
max-width: 200px;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top: 14%;
background: url('images/logo_ftr.png') 0 bottom no-repeat;
background-size: contain;
margin:0 auto;
text-indent: -9999px;
}
footer p{
font-size:2vw;
color: #666;
padding: 1%;
}
.noPC{
display: block;
}
.noSP{
display: none;
}
@media screen and (min-width: 333px){
#ftrLogo{
padding-top: 46px;
}
}

@media screen and (min-width: 768px){


/*言語選択*/
#language{
padding: 0.5em;
font-size: 13px;
}


/*メニュー*/
#mainNav{
}
#menuSPBG{
display: none;
}
#mainNav div{
display: none;
}
#mainNav ul{
list-style: none;
position: fixed;
left: auto;
right: 0;
/*top:50%;*/
top:0%;
width: auto;
height: auto;
background: transparent;
}
#mainNav ul li{
width: 110px;
margin: 5px 0;
font-size: 0;
}
#mainNav ul li a{
display: block;
width: 110px;
height: 28px;
padding-top: 0;
}
#mainNav ul li:nth-child(1) a{
display: block;
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × divの幅 × 100 */
padding-top:68%;
background: url('images/menu_logo_r.png') bottom center no-repeat;
background-size: 70%;
margin-top: 130%;
}
#mainNav ul li:nth-child(2) a{
background-size: 75%;
}
#mainNav ul li:nth-child(3) a{
background-size: 75%;
}
#mainNav ul li:nth-child(4) a{
background-size: 75%;
}
#mainNav ul li:nth-child(5){
margin-top: 20px;
}
#mainNav ul li:nth-child(5) a{
background-size: 75%;
}
#mainNav ul li:nth-child(6){
margin-top: 10px;
text-align: right;
}
#mainNav ul li:nth-child(6) a{
display: inline-block;
width: 36px;
height: 36px;
margin: 0 8px 0 0;
padding-top: 0;
}
#mainNav ul li:nth-child(6) a:nth-child(1){
background-size: contain;
}
#mainNav ul li:nth-child(6) a:nth-child(2){
background-size: contain;
}
#hole{
margin: 30px auto;
}
#hole{
padding-top: 30px;
margin: 30px auto;
background-size: 540px 14px;
}

/*フッタ*/
footer p{
font-size:12px;
padding: 5px;
}
#ftrLogo{
margin: 0px auto 0 auto;
}
.noPC{
display: none;
}
.noSP{
display: block;
}
}