@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
html[lang="zh-Hans"] body, html[lang="zh-Hans"] button, html[lang="zh-Hans"] input, html[lang="zh-Hans"] select, html[lang="zh-Hans"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
body{
color:#000;
font-size: 1.4rem;
background:#fff;
-webkit-text-size-adjust: 100%;
}
.barlow{
font-family: 'Barlow Condensed',YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight: 400;
}
.barlow.u-fwBold{
font-weight: 700;
}
.robot{
font-family: 'Roboto',YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight: 400;
}

/* mainBodyCover */
#mainBody .mainBodyCover{
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -10;
transition: opacity 0.6s ease 0.2s;
}
@media only screen and (max-width:980px){
#mainBody .mainBodyCover{
display: none;
}
}
#mainBody.menu-open .mainBodyCover{
opacity: 1;
z-index: 100;
}
/*header*/
#header{
width: 100%;
height: 70px;
}
@media screen and (max-width:767px){
#header{
height: 50px;
}
}
#header .logo{
top: 50%;
left: 2%;
transform: translate(0,-50%);
}
#header .logo img{
width: 325px;
height: auto;
}
@media screen and (max-width:980px){
#header .logo img{
width: 225px;
}
}
@media screen and (max-width:767px){
#header .logo img{
width: 182px;
}
}
#header .logo .txt{
margin-left: 15px;
top: 13px;
}
@media screen and (max-width:980px){
#header .logo .txt{
margin-left: 10px;
top: 10px;
font-size: 1.2rem;
}
}
@media screen and (max-width:767px){
#header .logo .txt{
top: 7px;
font-size: 1rem;
}
}
#header .discription{
top: 50%;
left: calc(2% + 420px);
transform: translate(0,-50%);
}
@media screen and (max-width:980px){
#header .discription{
left: calc(2% + 310px);
font-size: 1.1rem;
}
}
#header .discription .pcnarrow{
display: none;
}
@media screen and (max-width:1200px){
#header .discription .pcnarrow{
display: block;
}
}
#header .hLinks{
top: 22px;
right: 5%;
z-index: 100;
}
#header .hLinks li{
margin-right: 1.5em;
}
#header .hLinks li:last-child{
margin-right:0;
}
#header .hLinks .slidedownIn{
padding-bottom: 5px;
}
#header .hLinks .icon-slidedown{
width: 7px;
margin-left: 10px;
}
#header .hLinks .targetLinks{
width: 240px;
top: 23px;
right: -3vw;
}
@media screen and (max-width:767px){
#header .hLinks .targetLinks{
width: 120px;
}
}
#header .hLinks .targetLinks li{
margin-right: 0;
}
#header .hLinks .targetLinks a{
height: 43px;
line-height: 43px;
z-index:100;
}
@media screen and (max-width:767px){
#header .hLinks .targetLinks a{
height: 30px;
line-height: 30px;
}
}
#header .hLinks .targetLinks a:hover{
background: #e6e6e6;
}
.fixHeader{
top: 100px;
left:0;
width: 100%;
height: 62px;
transition: all 0.6s ease;
z-index: 90;
}
.scrolled .fixHeader{
top: 20px;
}
@media screen and (max-width:767px){
.fixHeader,.scrolled .fixHeader{
top: 5px;
display: none;
transition:none;
}
}
.fixHeader .menu{
top: 0;
left: 2%;
width: 70%;
max-width: 630px;
height: 62px;
border-radius: 62px;
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15));
}
@media screen and (max-width:767px){
.fixHeader .menu{
width: 96%;
height: 50px;
}
}
.fixHeader .navi{
margin: 0 15px;
line-height: 62px;
}
@media screen and (max-width:767px){
.fixHeader .navi{
margin: 0 7px;
line-height: 50px;
font-size: 1.2rem;
}
}
.fixHeader .btnOuter{
top: 50%;
right: 5%;
transform: translate(0,-50%);
}
@media screen and (max-width:1079px){
.fixHeader .btnOuter{
display: none;
}
}
.fixHeader .hBtn + .hBtn{
margin-left: 10px;
}
.fixHeader .hBtn a{
border-radius: 20px;
height: 40px;
line-height: 40px;
padding: 0 20px;
width: auto;
}
.fixHeader .hBtn a .bg{
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.3s ease;
}
.fixHeader .hBtn a:hover .bg{
opacity: 1;
}
.fixHeader .hBtn a .icon{
width: 20px;
top: -2px;
margin-right: 5px;
}
.fixBtnOuter{
display: none;
}
@media screen and (max-width:1079px){
.fixBtnOuter{
display: block;
bottom:0;
left: 0;
width: 100%;
height: 60px;
z-index: 90;
}
.fixBtnOuter .l-row{
margin: 0 5%;
}
.fixBtnOuter .btn{
width: 49%;
}
.fixBtnOuter .btn + .btn{
margin-left: 2%;
}
.fixBtnOuter .btn a{
margin:10px 0 0;
border-radius: 20px;
height: 40px;
line-height: 40px;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
.fixBtnOuter .btn a .bg{
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.3s ease;
}
.fixBtnOuter .btn a:hover .bg{
opacity: 1;
}
.fixBtnOuter .btn a .icon{
width: 20px;
top: -2px;
margin-right: 5px;
}
}
@media screen and (max-width:767px){
.fixBtnOuter .l-row{
margin: 0 3%;
}
.fixBtnOuter .btn{
width: 49.5%;
}
.fixBtnOuter .btn + .btn{
margin-left: 1%;
}
.fixBtnOuter .btn a{
padding: 0 5px;
font-size: 1.1rem;
}
.fixBtnOuter .btn a .icon{
width: 14px;
margin-right: 3px;
}
}
@media screen and (max-width:413px){
.fixBtnOuter .l-row{
margin: 0 2%;
}
.fixBtnOuter .btn{
width: 49.75%;
}
.fixBtnOuter .btn + .btn{
margin-left: 0.5%;
}
.fixBtnOuter .btn a{
padding: 0 4px;
font-size: 1rem;
}
.fixBtnOuter .btn a .icon{
width: 12px;
margin-right: 3px;
}
}
#footer {
background: #333;
padding: 100px 0 20px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
@media only screen and (max-width:767px){
#footer {
padding: 50px 0 80px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
}
#footer .snsTtl{
font-size: 4.4rem;
}
@media only screen and (max-width:767px){
#footer .snsTtl{
font-size:3.5rem;
}
}
#footer .sns{
font-size: 5.6rem;
margin: 0 15px;
}
@media only screen and (max-width:767px){
#footer .sns{
font-size: 4rem;
margin: 0 10px;
}
}
#footer .fMessage{
font-size: 8rem;
}
@media only screen and (max-width:767px){
#footer .fMessage{
font-size: 4rem;
}
}
#footer .bgSide{
width: 100%;
height: 350px;
}
@media only screen and (max-width:767px){
#footer .bgSide{
height: 175px;
}
}
#footer .bg01{
background: url("../images/common/bg-footer-scroll01.jpg") top left repeat;
background-size: auto 350px;
animation: bgSlide01 30s linear infinite;
}
@media only screen and (max-width:767px){
#footer .bg01{
background: url("../images/common/bg-footer-scroll01.jpg") top left repeat;
background-size: auto 175px;
}
}
@keyframes bgSlide01 {
0% {background-position: 0 0;}
100% {background-position:-1900px 0;}
}
#footer .bg02{
background: url("../images/common/bg-footer-scroll02.jpg") top right repeat;
background-size: auto 350px;
animation: bgSlide02 30s linear infinite;
}
@media only screen and (max-width:767px){
#footer .bg02{
background: url("../images/common/bg-footer-scroll02.jpg") top right repeat;
background-size: auto 175px;
}
}
@keyframes bgSlide02 {
0% {background-position: 0 0;}
100% {background-position:1900px 0;}
}
#footer .officialBtn{
max-width:560px;
width: 100%;
height: auto;
}

#footer .officialBtn a{
transition: all 0.3s ease;
}
.pcContent #footer .officialBtn a:hover{
background: #fff;
}
#footer .officialBtn a .bg{
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.3s ease;
}
.pcContent #footer .officialBtn a:hover .bg{
opacity: 0.8;
}