@charset "UTF-8";

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: normal;
}

body { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; font-size: 1em; line-height: 1.8em; -webkit-text-size-adjust: 100%; color: #4b4b4d; -webkit-font-smoothing: antialiased; background-color: #fff; padding: 0px; margin: 0px; }
.cl:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both }
img { vertical-align: top; margin: 0px; }

#navskip { display: none }


#hd { padding-top: 95px; padding-bottom: 35px; }
#hd:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

#hd header>.inner { padding:0px; width: 960px; overflow: visible; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
#hd header>.inner:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

#hd .logo { display: block; width: 292px; height: 71px; float: left; }
#hd .logo a { display: block; width: 292px; height: 71px; overflow: hidden; opacity: 1; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); }
#hd .logo a:hover { opacity: .7; }
#hd .logo a:before { content: ""; display: block; width: 292px; height: 71px; background-image: url(../img/logo.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

#hd .txt{ text-align: right; float: right; padding-top: 5px; }
#hd .txt p{ margin: 0px; width: 265px; height: 58px; overflow: hidden; }
#hd .txt p:before { content: ""; display: block; width: 265px; height: 58px; background-image: url(../img/hd_txt.svg); background-repeat: no-repeat; background-position: left top; }

#hd #gnav { display: block; background-color: #000000; min-width: 1000px; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 3000; height: 60px; }
#hd #gnav .inner{ display: block; width: 990px; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; }
#hd #gnav .inner ul{ display: block; float: left; }
#hd #gnav .inner ul li { float: left; list-style: none; display: block; line-height: 1.3em; }
#hd #gnav .inner ul li a{ color: #fff; font-size: 16px; font-weight: normal; text-decoration: none; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); display: inline-block; padding: 20px 15px; }
#hd #gnav .inner ul li a:hover{ opacity: .6; }
#hd #gnav .inner ul.gnav li.cart{ display: none; }
#hd #gnav .inner ul:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

#hd #gnav .inner ul.buybtn{ float: right; }
#hd #gnav .inner ul.buybtn li a{ color: #bff30b; }
#hd #gnav .inner ul.buybtn li a:hover{ opacity: .6; }

#ft { background-color: #fff; padding-top: 30px; min-width: 1040px; }
#ft .inner { width: 960px; margin: 0 auto; padding-bottom: 30px; position: relative; padding-bottom: 55px; }
#ft .inner .lf{ float: left; padding-bottom: 35px; }
#ft .inner .ri{ float: right; padding-bottom: 35px; }
#ft .inner .toiawase.lf p.txt{ float: none; margin-bottom: 18px; padding-top: 13px; }

#ft .inner .toiawase.lf p.free_dial a,
#ft .inner .toiawase.lf p.free_dial span{ width: 347px; height: 57px; overflow: hidden; float: none; display: block; }
#ft .inner .toiawase.lf p.free_dial a:before,
#ft .inner .toiawase.lf p.free_dial span:before{ content: ""; display: block; width: 347px; height: 57px; background-image: url(../img/free_dial.png); background-repeat: no-repeat; background-position: left top; background-size: 347px auto; }

#ft .inner .ri p{ font-size: 18px; font-weight: normal;}
#ft .inner .ri a{ color: #4b4b4d; text-decoration: none; }

#pagetop { display: none; width: 70px; height: 70px; overflow: hidden; position: fixed; right: 0px; bottom: 380px; z-index: 2000; background-color: #50baa8; border-radius:3px 0px 0px 3px; transition: .2s cubic-bezier(0.44, 0.18, 0.49, 0.99); }
#pagetop:before { content: ""; display: block; width: 70px; height: 70px; background-image: url(../img/pagetop.png); background-position: center; background-size: 31px auto; background-repeat: no-repeat }
#pagetop:hover { background-color: #62c1b1; }

.pc{ display: block !impoartant; }
.sp{ display: none !impoartant; }

@media screen and (max-width:740px) {
    .sp{ display: block !impoartant; }
    .pc{ display: none !impoartant; }
    
    #hd { padding-top: 70px; padding-bottom: 15px; }
    #hd:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

    #hd header>.inner { padding:0px; width: auto; overflow: visible; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
    #hd header>.inner:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

    #hd .logo { display: block; width: calc(292px / 2); height: calc(71px / 2); float: left; }
    #hd .logo a { display: block; width: calc(292px / 2); height: calc(71px / 2); overflow: hidden; opacity: 1; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); }
    #hd .logo a:hover { opacity: .7; }
    #hd .logo a:before { content: ""; display: block; width: calc(292px / 2); height: calc(71px / 2); background-image: url(../img/logo.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

    #hd .txt{ text-align: right; float: right; padding-top: 2px; }
    #hd .txt p{ margin: 0px; width: calc(265px / 2); height: calc(58px / 2); overflow: hidden; }
    #hd .txt p:before { content: ""; display: block; width: calc(265px / 2); height: calc(58px / 2); background-image: url(../img/hd_txt.svg); background-repeat: no-repeat; background-position: left top; }

    #hd #gnav { display: block; background-color: #000000; min-width: auto; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 3000; height: auto; }
    #hd #gnav .inner{ display: block; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; }
    
    #hd #gnav .inner ul.gnav{ display: none; float: none; position: fixed; width: 100%; height: calc(100% - 80px); background-color: #000; padding-top: 80px; }
    #hd #gnav .inner ul li { float: none; list-style: none; display: block; line-height: 1.3em; }
    #hd #gnav .inner ul li a{ color: #fff; font-size: 20px; line-height: 1.2em; font-weight: normal; text-decoration: none; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); display: inline-block; padding: 17px 15px; display: block; text-align: center; }
    #hd #gnav .inner ul li a:hover{ opacity: .6; }
    #hd #gnav .inner ul.gnav li.cart{ display: block; }
    #hd #gnav .inner ul.gnav li.cart a{ color: #bff30b; }
    
    #hd #gnav .inner ul:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

    #hd #gnav .inner ul.buybtn{ float: right; display: block; }
    #hd #gnav .inner ul.buybtn li a{ color: #bff30b; font-size: 14px; }
    #hd #gnav .inner ul.buybtn li a:hover{ opacity: .6; }
    
    #hd #gnav #mn{ display: block; width: 50px; height: 50px; position: absolute; left: 0px; top: 0px; }
    #hd #gnav #mn span{ height: 3px; width: 28px; position: absolute; left: 12px; top: calc(50% - 2px); background-color: #fff; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); }
    #hd #gnav #mn span:before{ content: ""; display: block; height: 3px; width: 28px; position: absolute; left: 0px; top: -7px; background-color: #fff; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); }
    #hd #gnav #mn span:after{ content: ""; display: block; height: 3px; width: 28px; position: absolute; left: 0px; bottom: -7px; background-color: #fff; transition: .1s cubic-bezier(0.44, 0.18, 0.49, 0.99); }
    
    #hd #gnav #mn.active{ display: block; width: 50px; height: 50px; position: absolute; left: 0px; top: 0px; }
    #hd #gnav #mn.active span{ height: 3px; width: 28px; position: absolute; left: 12px; top: calc(50% - 2px); background-color: transparent; }
    #hd #gnav #mn.active span:before{ content: ""; display: block; height: 3px; width: 28px; position: absolute; left: 0px; top: 0px; background-color: #fff; transform:rotate(45deg); }
    #hd #gnav #mn.active span:after{ content: ""; display: block; height: 3px; width: 28px; position: absolute; left: 0px; bottom: 0px; background-color: #fff; transform:rotate(-45deg);  }

    #ft { background-color: #fff; padding-top: 30px; min-width:inherit; }
    #ft .inner { width: auto; margin: 0 auto; padding-bottom: 15px; position: relative; padding-bottom: 25px; }
    #ft .inner .lf{ float: none; padding-bottom: 35px; width: auto; }
    #ft .inner .ri{ float: none; padding-bottom: 35px; }
    #ft .inner .toiawase.lf p.txt{ float: none; margin-bottom: 18px; padding-top: 13px; }
    
    #ft .inner .toiawase.lf p.free_dial{ width: 280px; margin-left: auto; margin-right: auto; }
    #ft .inner .toiawase.lf p.free_dial a,
    #ft .inner .toiawase.lf p.free_dial span{ width: 280px; height: 46px; overflow: hidden; float: none; display: block; }
    #ft .inner .toiawase.lf p.free_dial a:before,
    #ft .inner .toiawase.lf p.free_dial span:before{ content: ""; display: block; width: 280px; height: 46px; background-image: url(../img/free_dial.png); background-repeat: no-repeat; background-position: left top; background-size: 280px auto; }
    #ft .inner .toiawase.lf p.free_dial.sp{ display: block; }
    #ft .inner .toiawase.lf p.free_dial.pc{ display: none; }
    
    #ft .inner .ri{ width: 280px; margin-left: auto; margin-right: auto; }
    #ft .inner .ri p{ font-size: 18px; font-weight: normal;}
    #ft .inner .ri a{ color: #4b4b4d; text-decoration: none; }
    
    #ft .inner:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }
    
}