@charset "utf-8";
html {outline: none;}

body > div:last-child{margin-bottom: 0;}
a {
  text-decoration: none;
}
@font-face {
    font-family: Noto Sans JP;
    src: url('/smc_css/fonts/NotoSansJP-Bold.otf') format("opentype");
    src: url('/smc_css/fonts/NotoSansJP-Medium.otf') format("opentype");
    src: url('/smc_css/fonts/NotoSansJP-Regular.otf') format("opentype");
}


@media screen and (min-width:767px){
.sp_on{display:none !important;}
.pc_on{display:block;}
body {font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;margin: 0;padding: 0;background-image: url(/assets/content/products/ja-jp/qr/images/index_bg.jpg);background-position: top center;background-repeat: no-repeat;background-color: #000;}
#wrapper{margin:0 auto;width:100%;max-width: 1550px;}

.mainimg{width: 90%;margin: 0 auto;}

footer{margin-top: 90px; width: 100%; background: #363636; width: 100%; height: 260px; text-align: center; color: #fff;font-size: 11px; padding-top: 43px;line-height: 23px;}

.wrap {
  display:flex;
  flex-flow: column;
  justify-content: center;
}
* {
  box-sizing: border-box;
  padding: 0;
}
ul {
  list-style-type: none;
}
.tab-area {
  display: flex;
  border: 2px solid;
  cursor: pointer;
  margin-top: 690px;
margin-left:480px;
  width: 300px;
  text-align: center;
}
.tab {
  width: 300px;
  padding: 5px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.tab.active {
  background-color: #000;
  color: #fff;
}
.panel {
  display: none;
  text-align: center;
}
.panel.active {
  display: block;
}

.transparent{
  display: flex;
  justify-content: center;

}



.linkbutton_lg {
  width: 600px;
height: 60px!important;
  margin: 0px 20px 20px 20px;
  background-color: #1861ae;
}


.transparent ul li a span {
  font-size: 18px;
letter-spacing: 2px;
  display: block;
  width: 100%;
height: 60px!important;
  padding: 16px 0 14px 25px;
  background-color: transparent;
  border: solid 1px #fff;
  color: #fff;
  position: relative;

}
.transparent > ul li:first-child a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/01_about.png);
  position: absolute;
  right: 520px;
top:-4px;
}
.transparent > ul li:nth-child(2) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/02_instagram.png);
  position: absolute;
  right: 520px;
top:-3px;
}

.transparent > ul li:nth-child(3) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/03_youtube.png);
  position: absolute;
  right: 520px;
top:-3px;
}


.transparent > ul li:nth-child(4) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/04_salesnetwork.png);
  position: absolute;
  right: 520px;
top:-4px;
}

.transparent > ul li:nth-child(5) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/05_globalnetwork.png);
  position: absolute;
  right: 520px;
top:-4px;
}

.transparent > ul li:nth-child(6) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/06_cad.png);
  position: absolute;
  right: 520px;
top:-4px;
}

.transparent > ul li:nth-child(7) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/07_webcatalog.png);
  position: absolute;
  right: 520px;
top:-4px;
}

.transparent > ul li:nth-child(8) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/08_recruitment.png);
  position: absolute;
  right: 520px;
top:-2px;
}

.transparent ul li a span:hover {
  background-color: rgba(255, 255, 255, 0.4);
text-decoration:none!important;
}


.transparent_en{
  display: flex;
  justify-content: center;
}

.transparent_en >.linkbutton_lg {
  width: 600px;
height: 60px!important;
  margin: 0px 20px 20px 20px;
  background-color: #1861ae;
}


.transparent_en ul li a span {
  font-size: 18px;
letter-spacing: 2px;
  display: block;
  width: 100%;
height: 60px!important;
  padding: 16px 0 14px 25px;
  background-color: transparent;
  border: solid 1px #fff;
  color: #fff;
  position: relative;


}
.transparent_en > ul li:first-child a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/01_about.png);
  position: absolute;
  right: 520px;
top:-4px;
}
.transparent_en > ul li:nth-child(2) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/02_instagram.png);
  position: absolute;
  right: 520px;
top:-3px;
}

.transparent_en > ul li:nth-child(3) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/03_youtube.png);
  position: absolute;
  right: 520px;
top:-3px;
}

.transparent_en > ul li:nth-child(4) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/05_globalnetwork.png);
  position: absolute;
  right: 520px;
top:-4px;
}

.transparent_en > ul li:nth-child(5) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/06_cad.png);
  position: absolute;
  right: 520px;
top:-4px;
}

.transparent_en > ul li:nth-child(6) a span::before {
  content: '';
    width: 68px;
    height: 68px;
    background-image: url(/assets/content/products/ja-jp/qr/images/07_webcatalog.png);
  position: absolute;
  right: 520px;
top:-4px;
}


.transparent_en ul li a span:hover {
  background-color: rgba(255, 255, 255, 0.4);
text-decoration:none!important;
}


}

@media screen and (max-width:767px){
*:focus {outline: none !important;}

@font-face {
    font-family: Noto Sans JP;
    src: url('/smc_css/fonts/NotoSansJP-Bold.otf') format("opentype");
    src: url('/smc_css/fonts/NotoSansJP-Medium.otf') format("opentype");
    src: url('/smc_css/fonts/NotoSansJP-Regular.otf') format("opentype");
}
body {font-family: 'Noto Sans JP', 'Noto Sans', sans-serif; margin: 0;padding: 0;background-image: url(/assets/content/products/ja-jp/qr/images/index_bg_sp05.jpg);background-position: top center;background-repeat: no-repeat;background-color: #000;background-size: cover!important;}
#wrapper{margin:0 auto;width:100%;position:relative;}
footer{margin-top: 60px; width: 100%; background: #363636; height: 260px; text-align: center; color: #fff;font-size: 11px; padding-top: 43px;line-height: 23px;}
.pc_on{display:none !important;}
.sp_on{display:block !important;}

.wrap {
  display:flex;
  flex-flow: column;
  justify-content:space-between;
}
* {
  box-sizing: border-box;
  padding: 0;
}
ul {
  list-style-type: none;

}
.tab-area {
  display: flex;
  border: 2px solid;
  cursor: pointer;
  margin-top: 300px;
margin-left:10px;
  width: 300px;
  text-align: center;
}
.tab {
  width: 300px;
  padding: 5px;
  text-align: center;
}

.tab.active {
  background-color: #000;
  color: #fff;
}
.panel {
  display: none;
  text-align: center;
}
.panel.active {
  display: block;
}

.transparent{
    display: block;
}



.linkbutton_lg {
    width: 92%;
    max-width: 100%;
height: 60px!important;
margin: 10px 16px;
  background-color: #1861ae;
  display: flex;
  flex-flow: column;
  justify-content:space-between;
}


.transparent ul li a span {
  font-size: 16px;
letter-spacing: 2px;
  display: block;
  width: 100%;
height: 60px!important;
  padding: 16px 0 14px 25px;
  background-color: transparent;
  border: solid 1px #fff;
  color: #fff;
  position: relative;

}
.transparent > ul li:first-child a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/01_about.png);
  position: absolute;
float:left;
margin-left:-150px;
top:-4px;
}
.transparent > ul li:nth-child(2) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/02_instagram.png);
  position: absolute;
float:left;
margin-left:-137px;
top:-3px;
}

.transparent > ul li:nth-child(3) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/03_youtube.png);
  position: absolute;
float:left;
margin-left:-146px;
top:-4px;
}


.transparent > ul li:nth-child(4) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/04_salesnetwork.png);
  position: absolute;
float:left;
margin-left:-150px;
top:-4px;
}

.transparent > ul li:nth-child(5) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/05_globalnetwork.png);
  position: absolute;
float:left;
margin-left:-86px;
top:-4px;
}

.transparent > ul li:nth-child(6) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/06_cad.png);
  position: absolute;
float:left;
margin-left:-121px;
top:-4px;
}

.transparent > ul li:nth-child(7) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/07_webcatalog.png);
  position: absolute;
float:left;
margin-left:-127px;
top:-4px;
}

.transparent > ul li:nth-child(8) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/08_recruitment.png);
  position: absolute;
float:left;
margin-left:-146px;
top:-4px;
}

.transparent ul li a span:hover {
  background-color: rgba(255, 255, 255, 0.4);
text-decoration:none!important;
}


.transparent_en{
    display: block;
margin-bottom: 156px;
}

.transparent_en > .linkbutton_lg {
    width: 92%;
    max-width: 100%;
height: 60px!important;
margin: 10px 16px;
  background-color: #1861ae;
  display: flex;
  flex-flow: column;
  justify-content:space-between;

}



.transparent_en ul li a span {
  font-size: 16px;
letter-spacing: 2px;
  display: block;
  width: 100%;
height: 60px!important;
  padding: 16px 0 14px 25px;
  background-color: transparent;
  border: solid 1px #fff;
  color: #fff;
  position: relative;

}
.transparent_en > ul li:first-child a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/01_about.png);
  position: absolute;
float:left;
margin-left:-145px;
top:-4px;
}
.transparent_en > ul li:nth-child(2) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/02_instagram.png);
  position: absolute;
float:left;
margin-left:-137px;
top:-3px;
}

.transparent_en > ul li:nth-child(3) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/03_youtube.png);
  position: absolute;
float:left;
margin-left:-146px;
top:-4px;
}

.transparent_en > ul li:nth-child(4) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/05_globalnetwork.png);
  position: absolute;
float:left;
margin-left:-112px;
top:-4px;
}

.transparent_en > ul li:nth-child(5) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/06_cad.png);
  position: absolute;
float:left;
margin-left:-130px;
top:-4px;
}

.transparent_en > ul li:nth-child(6) a span::before {
  content: '';
    width: 58px;
    height: 58px;
    background-image: url(/assets/content/products/ja-jp/qr/images/07_webcatalog.png);
  position: absolute;
float:left;
margin-left:-125px;
top:-4px;
}


.transparent_en ul li a span:hover {
  background-color: rgba(255, 255, 255, 0.4);
text-decoration:none!important;
}

}