/*----------  ハンバーガーメニュー  ----------*/
/*----------  ハンバーガーメニュー  ----------*/
#header-sp{ background:#fff; width:100%; height:60px; position:fixed; left:0; top:0; z-index:9999;}
#header-sp .logo-sp{ padding:10px 15px 0;}
#header-sp .logo-sp a{ display:inline-block;}
#header-sp .logo-sp img{ width:40px; margin-right:10px; vertical-align:middle;}
#header-sp .logo-sp .tb{ display:inline-block; vertical-align:middle;}
#header-sp .logo-sp .p-01{ font-size:10px; font-weight:500; letter-spacing:normal;}

#header-sp .logo-sp .p-name{font-family:"Fredoka",sans-serif;font-size:24px;font-weight:700;color:#1F4386;}

#navArea{ position:relative; z-index:9999;}
#navArea .inner{ position:relative;}

nav{ background:#fff; width:100%; height:100%; display:block; position:fixed; top:60px; right:-100%; overflow-y:auto; transition:.5s; opacity:0; z-index:9998;}
.open nav{ right:0; opacity:1;}
nav .inner ul{ padding:0; margin:0; list-style:none;}
nav .inner #menu{ overflow:hidden; padding:20px 20px 0;}
nav .inner #menu li{ width:50%; float:left;}
nav .inner #menu li a{ font-size:15px; font-weight:bold; color:#1f4386; padding:15px 20px 15px; display:block;}
nav .inner #menu li:after{ background:url(../images/common/nav-dots.png) left center no-repeat; background-size:135px 6px; height:6px; margin:0 0 0 10px; content:""; display:block;}

nav .inner #menu li:last-child{ width:100%; margin:20px 0 0 15px;}
nav .inner #menu li:last-child a{ font-size:13px; font-weight:500; letter-spacing:normal; padding:0px; display: inline-block;}
nav .inner #menu li:last-child:after{ display:none;}

/*  電話・お問い合わせフォームボタン  */
nav .nav-contact{ padding:20px 30px 0;}
nav .nav-contact a{ height:55px; text-align:center; margin-bottom:10px; display:block;}
nav .nav-contact .tel{ background:#1f4386; font-size:11px; color:#fff; line-height:1.4em; padding-top:10px;}
nav .nav-contact .tel span{ font-size:18px; font-weight:700; color:#fff; line-height:1.2em; font-family:"Lato",sans-serif; display:block;}
nav .nav-contact .tel span:before{ background:url(../images/common/icon-tel.png) center no-repeat; background-size:contain; width:16px; height:17px; margin-right:5px; content:""; display:inline-block; vertical-align:-2px;}
nav .nav-contact .mail{ background:#ffad00; font-size:15px; font-weight:600; color:#fff; line-height:55px;}
nav .nav-contact .mail:before{ background:url(../images/common/icon-mail.png) center no-repeat; background-size:contain; width:20px; height:14px; margin-right:10px; content:""; display:inline-block; vertical-align:-1px;}

nav .nav-sns{ text-align:center; padding:10px 0 20px;}
nav .nav-sns li{ margin:0 10px; display:inline-block;}
nav .nav-sns a{ background:#1f4386; width:40px; height:40px; padding:10px; display:block; border-radius:50%;}
nav .nav-sns img{ width:20px; display:block;}

/*  水色の波（山と谷が1つずつ）  */
nav:after{ background:url(../images/common/wave-blue.png) center bottom no-repeat; background-size:100% 70px; width:100%; height:70px; content:""; position:absolute; left:0; bottom:60px; pointer-events:none;}
/*  走ってる犬  */
nav:before{ background:url(../images/common/dog-run.webp) center no-repeat; background-size:contain; width:120px; height:85px; content:""; position:absolute; right:5px; bottom:110px; pointer-events:none; animation:dogRun 0.9s ease-in-out infinite; z-index:3;}
nav .inner{ z-index:1;}

/*  上から順にふわっと出る（0.05秒ずつ）  */
.open nav #menu li, .open nav .nav-contact, .open nav .nav-sns{ animation:navIn 0.5s ease-out both;}
.open nav #menu li:nth-child(1){ animation-delay:0.10s;}
.open nav #menu li:nth-child(2){ animation-delay:0.15s;}
.open nav #menu li:nth-child(3){ animation-delay:0.20s;}
.open nav #menu li:nth-child(4){ animation-delay:0.25s;}
.open nav #menu li:nth-child(5){ animation-delay:0.30s;}
.open nav #menu li:nth-child(6){ animation-delay:0.35s;}
.open nav #menu li:nth-child(7){ animation-delay:0.40s;}
.open nav #menu li:nth-child(8){ animation-delay:0.45s;}
.open nav #menu li:nth-child(9){ animation-delay:0.50s;}
.open nav .nav-contact{ animation-delay:0.55s;}
.open nav .nav-sns{ animation-delay:0.60s;}
@keyframes navIn{
0%{ opacity:0; transform:translateY(10px);}
100%{ opacity:1; transform:translateY(0);}
}

.toggle_btn{ width:60px; height:60px; position:fixed; right:0; top:0; z-index:10000; cursor:pointer;}
.toggle_btn span{ background:#1f4386; width:30px; height:3px; position:absolute; left:15px; transition:.4s; border-radius:20px;}
.toggle_btn span:nth-child(1){ top:20px;}
.toggle_btn span:nth-child(2){ top:30px;}
.toggle_btn span:nth-child(3){ top:40px;}
.open .toggle_btn span:nth-child(1){ transform:translateY(10px) rotate(-45deg);}
.open .toggle_btn span:nth-child(2){ opacity:0;}
.open .toggle_btn span:nth-child(3){ transform:translateY(-10px) rotate(45deg);}

#mask{ display:none;}
.open #mask{ background:rgba(0,0,0,.5); width:100%; height:100%; display:block; position:fixed; left:0; top:0; z-index:9997;}