@charset "utf-8";

/* CSS Document */

body{background: url("../img/common/bg.gif");}

a[href^="tel:"]{pointer-events:none;}

.clearFix:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}

.content{margin:0 auto; max-width:1000px; width:94%;}

.sp{display: none;}

a.txt_de{text-decoration: underline;}
a.txt_de:hover{opacity: 0.3;}

#btnsp{position: fixed; bottom: 0; left: 0; width: 100%; display: none; z-index: 9000;}

.underline_hover{text-decoration: underline}
.underline_hover:hover{opacity: 0.3;}

.text_caption{font-size: 14px;margin: 30px 0;}
/*HEADER

====================================*/

header{z-index: 9999; position: fixed; top: 0; left: 0; right: 0; width: 100%; font-size:14px;}

header .content{position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}

h1{width: 110px;}



#header-right{width: 777px; text-align: right;}

#header-top{padding: 5px 0 15px 0; display: inline-block;}

#header-top li{display: inline-block; vertical-align: middle;}

#header-top >li:nth-of-type(1){width: 208px; margin: 0 11px 0 0;}

#header-top >li:nth-of-type(2){width: 164px;}

#header-top >li:nth-of-type(3){position: relative;}

#header-top >li:nth-of-type(3) a{font-size: 14px; line-height: 1; padding: 0 0.7em; position: relative;}

#header-top >li:nth-of-type(3) a:after{content: ''; position: absolute; bottom: -3px; left: 0; right: 0; margin: 0 auto; height: 3px; width: 28px; display: block; border-radius: 6px; background: #ff0000; transform-origin: top;

transform: scaleY(0); -webkit-transform: scaleY(0);

transition: transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transition: transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);}

#header-top >li:nth-of-type(3) a.active:after,

#header-top >li:nth-of-type(3) a:hover:after{transform: scaleY(1); -webkit-transform: scaleY(1);}

/* LANG  */

#header-top #lang >li:nth-of-type(3){position: relative;}

#header-top #lang >li:nth-of-type(3) a{font-size: 14px; line-height: 1; padding: 0 0.7em; position: relative;}

#header-top #lang >li:nth-of-type(3) a:after{content: ''; position: absolute; bottom: -3px; left: 0; right: 0; margin: 0 auto; height: 3px; width: 28px; display: block; border-radius: 6px; background: #ff0000; transform-origin: top;

transform: scaleY(0); -webkit-transform: scaleY(0);

transition: transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transition: transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);}

#header-top #lang >li:nth-of-type(3) a.active:after,

#header-top #lang >li:nth-of-type(3) a:hover:after{transform: scaleY(1); -webkit-transform: scaleY(1);}

#header-top #lang .current-lang a::after{transform: scaleY(1); -webkit-transform: scaleY(1) !important;}

/* #header-top #lang li:nth-child(2) a::before{position: absolute;display: block;content: '/';top: 50%;left: 0;transform: translate(0,-50%);} */

/* #header-top #lang li:nth-child(3) a::before{position: absolute;display: block;content: '/';top: 50%;left: 0;transform: translate(0,-50%);} */



/* LANG */



#btn-menu{position: absolute; top: 6vw; right: 0; width: 13.5%; display: none;}

#btn-close{position: absolute; top: 6vw; right: 0; width: 13.5%; display: none;}



#gnav{display: flex; justify-content: space-between; flex-wrap: wrap;}

#gnav li{text-align: center; width: 111px; background: url("../img/common/gnav_line.png") no-repeat top right/auto 100%;}

#gnav li:last-of-type{background: none;}

#gnav li a{display: block; position: relative;}

#gnav li span{position: absolute; bottom: 0; left: 0; width: 100%; font-size: 14px; line-height: 1; color: #333;}

#gnav li a:after{content: ''; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -28px; width: 56px; height: 56px; display: block; border-radius: 100%; background-color: rgba(46,203,255,.27);

transform: scale(0); -webkit-transform: scale(0);

transition: transform .5s ease; -webkit-transition: transform .5s ease;}

#gnav li.current-menu-item a:after,

#gnav li a:hover:after{transform: scale(1); -webkit-transform: scale(1);}



header.fixed{box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);}

header.fixed:before{background: #fff; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

header.fixed .content{padding: 10px 0;}

header.fixed h1{width: 63px; transition: all .3s ease; -webkit-transition: all .3s ease;}

header.fixed #header-top{display: none;}





/*MAIN CONTENT

====================================*/

.main{margin-top: 140px;}



#mv{position: relative;}

#mv h2{position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; font-size: 35px; font-weight: bold; line-height: 79px; height: 79px; color: #f05c84; text-align: center; font-family: 'Kosugi Maru', sans-serif; background: url("../img/common/bg_h2.png") no-repeat center center/auto 100%;

transform: translateY(-50%); -webkit-transform: translateY(-50%);}



#pagetop{position: fixed; width: 60px; right: 20px; bottom: 20px; z-index: 1000; cursor: pointer;}

#pagetop:hover{opacity: .8;}



.hotline{position:fixed;left:0; right:90px; bottom:15vw; visibility:visible; background-color:transparent; width:110px; height:110px; cursor:pointer; z-index:1000; display: none;}

.hotline-img{width:32px; height:32px; top:43px; left:43px; position:absolute; border-radius:100%; border:2px solid transparent; opacity:.7;

background:rgba(30,30,30,.1) url("../img/common/ic_tel.png") no-repeat center center; background-color:#f05c84; background-size:70%;

-webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out;

-webkit-transform-origin:50% 50%; transform-origin:50% 50%;}

.hotline-fill{width:60px; height:60px; top:28px; left:28px; position:absolute; background-color:#f05c84; opacity:.75 !important; border-radius:100%; border:2px solid transparent;

-webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out;

-webkit-transition:all .5s; transition:all .5s;}

.hotline-circle{width:90px; height:90px; top:12px; left:12px; position:absolute; background-color:transparent; border-radius:100%; border:2px solid rgba(30,30,30,.4); opacity:.1; border-color:#f05c84; opacity:.5;}

.hotline:hover .txt{
  opacity: 1;
}

.hotline .txt{
  opacity: 1;
  pointer-events: none;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 100%;
  transform: translate(0,-50%);
  font-size: 16px;
  text-align: center;
  background-color: #f05c84;
  /* border: 1px solid #f05c84; */
  /* border-radius: 25px; */
  font-weight: bold;
  color: #fff;
}

.hotline .txt::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%,-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 20px solid #f05c84;
  border-bottom: 5px solid transparent;
}


.fb_dialog{bottom: 150px !important;}

.fb_customer_chat_bounce_in_v2{bottom: 215px !important;}





/*FOOTER

===================================*/

footer{background-image: url("../img/common/footer_bg3.png"), url("../img/common/footer_bg2.png"), url("../img/common/footer_bg.png"); 

background-repeat: repeat-x, no-repeat, repeat-x;

background-position: bottom center, bottom center, bottom center;}

footer .content{height: 268px; display: flex; position: relative; flex-wrap: wrap; padding: 40px 0 0 0;}

footer #logo{width: 12.1%; margin: 0 4% 0 0;}



footer #fcontact{width: 37%;}

footer #address{padding: 0 0 20px 50px; color: #543e2f; background: url("../img/common/footer_line.png") no-repeat bottom left/100% auto; position: relative; margin: 0 0 7px; line-height: 1.3;}

footer #address:before{position: absolute; top: 0; left: 0; width: 40px; height: 100%; content: ''; background: url("../img/common/ic_address.png") no-repeat top left/100% auto;}

footer #address p{font-size: 17px; font-family: 'Kosugi Maru', sans-serif; font-weight: bold;}

footer #time{width: 87.5%;}



footer #social{position: absolute; top:30px ; right: 0; text-align: center; width: 19%; display: flex; flex-wrap: wrap; justify-content: space-between;}

footer #social figure{width: 73.68%; margin: 0 auto 5px;}

footer #social p {display: flex; justify-content: space-between;}

footer #social p a{width: 28.95%;}

footer #social p a:hover{opacity: .8;}



#copyright{font-size: 10px; line-height: 1.3; position: absolute; bottom: 20px; right: 0;}



#spDisplay{display: none;}



/* =========================== 07 - 15 ============================= */

.add_0715{display: none;}

/* =========================== 07 - 15 ============================= */


/*===============================

             MEDIA

================================*/

@media only screen and (max-width:1000px){

h1{width: 100px;}    

#header-right{width: 600px;}

#header-top{padding: 5px 0 10px;}

#header-top >li:nth-of-type(1){width: 180px;}

#header-top >li:nth-of-type(2){width: 142px;}



#gnav li{width: 85px;}

#gnav li span{font-size: 12px;}



.main{margin-top: 117px;}

    

footer{background-image: url("../img/common/footer_bg3.png"), url("../img/common/footer_bg2.png"); 

background-repeat: repeat-x, no-repeat;

background-position: bottom center, bottom center;

background-size: 110% auto, 110% 100%;}

footer .content{height: 26.8vw; padding: 4vw 0 0 0;}    

footer #address{font-size: 1.8vw; padding: 0 0 20px 40px;}

footer #address:before{width: 30px;}

footer #address p{font-size: 1.7vw;}

    

#copyright{font-size: 1.2vw;}    

}



@media only screen and (max-width:767px){

a[href^="tel:"]{pointer-events:auto;}

.sp{display: block;}    

    

#btnsp{display: block;}



header .content{padding: 2vw 0 !important;}

h1{position: static; width: 18% !important;}



#header-right{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9990; overflow: hidden; display: none;}

#header-top{position: absolute; top: calc(183px + 72vw); left: 0; width: 100%; text-align: center; opacity: 0; }

#header-top >li:nth-of-type(1),

#header-top >li:nth-of-type(2){display: none;}

#header-top >li:nth-of-type(3){display: block;}



#btn-menu{display: block;}

#btn-close{display: block;}



#gnav{margin: 20vw 0 0 0;  opacity: 0;}

#gnav ul{margin: 20vw 0 0 0;}

#gnav li{width: 50%; position: relative;}

#gnav li:nth-of-type(2n){background: none;}

#gnav li:last-of-type{background: url("../img/common/gnav_line.png") no-repeat top right/auto 100%;}

#gnav li:after{content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; width: 100%; background: url("../img/common/gnav_line2.png") repeat-x bottom center;}

#gnav li a{padding: 4vw 0;}

#gnav li a:after{bottom: 4vw;}

#gnav li img{width: 111px; line-height: 0;}

#gnav li span{font-size: 14px; bottom: 4vw;}



header.fixed #header-top{display: block;} 

header.open #gnav{opacity: 1; transition:opacity .8s cubic-bezier(.55,0,.1,1) .3s; -webkit-transition:opacity .8s cubic-bezier(.55,0,.1,1) .3s;}

header.open #header-top{opacity: 1; transition:opacity .8s cubic-bezier(.55,0,.1,1) .6s; -webkit-transition:opacity .8s cubic-bezier(.55,0,.1,1) .6s;}



.main{margin-top: 24vw;}

    

#mv h2{font-size: 6vw; height: 13vw; line-height: 13vw; top:46%;}

.hotline{display: block;}    

.fb_dialog{bottom: 33vw !important; right: 2vw !important;}

.fb_customer_chat_bounce_in_v2{bottom: 44vw !important;}

    

#pagetop{bottom: 14vw; right: 2vw; width: 12vw;}    

    

footer{background: url("../img/common/footer_bg_sp.png") no-repeat bottom center/100% 100%; margin: 0 0 11.6vw;}

footer .content{height: 55vw; padding: 8vw 0 0 0;}



footer #logo{width: 18.7%; margin: 0 8% 0 3%;}

footer #fcontact{width: 65%;}

footer #address{font-size: 3.5vw; padding: 0 0 3vw 6vw; margin: 0 0 1vw;}

footer #address:before{width: 5vw;}

footer #address p{font-size: 3vw;}

footer #social{top: auto; right: auto; left: 0; bottom: 7vw; width: 24%;}

footer #social figure{margin: 0 auto;}

    

#copyright{left: 12vw; bottom: 6vw; text-align: center; font-size: 2.4vw;}

/* =========================== 07 - 15 ============================= */

.add_0715{display: flex;position: fixed;top: 0;left: 50%;transform: translate(-50%,0);z-index: 99999999999;}
.add_0715 li{max-width: 110px;width: 10vw;margin: 5vw 2vw 0 2vw;}
footer #social{display: none;}

/* =========================== 07 - 15 ============================= */


}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 768px)
  and (orientation: landscape) {
#spDisplay{background-color: #636b70; width: 100%; height: 100%; z-index: 999999; position: fixed; top: 0px; left:0px; display: block;}
#spDisplay img{position: absolute; top:50%; left: 50%; z-index: 999999; margin-left: -40px; margin-top: -40px;}	
#fb-root{display: none;}
}