/*▼ ハンバーガーメニュー  ここから▼*/
@media (min-width:481px) {
#header-sp { margin-left: 90px;margin-top: 20px;margin-bottom: 20px;}
#header-sp #logo-sp { display: inline-block;}
#header-sp #logo-sp a { text-decoration: none;}
#header-sp #logo-sp p { font-family: "M PLUS 1 Code", monospace;font-size: 36px;font-weight: 700;line-height: 1em;color: #203275;}
#header-sp #logo-sp p span { font-family: "Cormorant Garamond", serif;font-size: 22px;display: block;font-weight: bold;}
#header-sp img.img-logo { position: relative;top: -10px;margin-right:10px;width:150px;}
/*============
ナビ
#navArea
=============*/
#navArea { position: relative;z-index: 999;}
#navArea .h2-01 { font-size: 22px;margin-bottom: 0px;}
#navArea .h2-01 span { background: url(../images/common/h2-icon.png) left 18px no-repeat;background-size: 22px auto;padding-left: 35px;}
#navArea .inner { position: relative;z-index: 999;}
#navArea .inner .area-01 { text-align: center;padding-top: 20px;}
#navArea .inner .area-01 h2 { font-size: 18px;font-weight: bold;padding-bottom: 10px;margin: 0 0px 0px;}
#navArea .inner .area-01 .p-tel { font-size:30px;font-weight: 600;letter-spacing: 2px;line-height: 1em;margin: 0 0 10px;vertical-align: middle;}
#navArea .inner .area-01 .p-tel a { color: #333333;display: inline-block;text-decoration: none;}
#navArea .inner .area-01 .p-01 { font-size: 15px;letter-spacing: normal;margin-bottom: 20px;}
#navArea .inner .area-01 .p-01 img { vertical-align: middle;margin-right: 5px;position: relative;top: -2px;}
#navArea .inner .area-01 .btn { font-size: 17px;font-weight: bold;text-align: center;}
#navArea .inner .area-01 .btn a { background: #203275 url(../images/common/ico-mail.png) left 55px top 52% no-repeat;color: #fff;padding: 20px 60px 20px 100px;display: inline-block;text-decoration: none;border-radius: 50px;position: relative;}
#navArea .inner .area-01 .btn a img { position: absolute;left: 25px;top: 17px;}
nav { display: block;position: fixed;top: 80px;/*上からの距離*/ right: -100%;/*左から出すか右から出すか*/ bottom: 0;width:30%;background: #fff;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;transition: all .5s;z-index: 20;opacity: 0;}
.open nav { right: 0;/*左から出すか右から出すか*/ opacity: 1;top:80px;}
nav .inner ul { list-style: none;margin: 0 0 15px;padding: 0;}
nav .inner ul li { position: relative;font-family: "Zen Maru Gothic", serif;}
nav .inner ul li a { display: block;text-align:center;color: #333333;font-size: 16px;font-weight: 600;line-height: 3.8;padding: 0 0 0 1.5em;letter-spacing: 2px;text-decoration: none;transition-duration: 0.2s;position: relative;border-bottom: 1px solid #efefef;}
/*============
メニュー（3本線）
.toggle_btn
=============*/
.toggle_btn { display: block;position: fixed;top:10px;right:80px;width: 60px;height: 60px;transition: all .5s;cursor: pointer;z-index: 3;background: #203275;}
.toggle_btn span { display: block;position: absolute;left: 15px;width: 30px;height: 3px;background: #fff;border-radius: 15px;transition: all .5s;}
.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 { }
.open .toggle_btn span:nth-child(1) { -webkit-transform: translateY(10px) rotate(-45deg);transform: translateY(10px) rotate(-45deg);}
.open .toggle_btn span:nth-child(2) { opacity: 0;}
.open .toggle_btn span:nth-child(3) { -webkit-transform: translateY(-10px) rotate(45deg);transform: translateY(-10px) rotate(45deg);}
/*============
背景（マスク）
#mask
=============*/
#mask { display: none;transition: all .5s;}
.open #mask { display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #fff;opacity: .7;z-index: 2;cursor: pointer;}
}
@media (max-width:480px) {
#header-sp { margin-left:10px;margin-top: 10px;margin-bottom: 0px;height:70px;}
#header-sp #logo-sp { display: inline-block;}
#header-sp #logo-sp a { text-decoration: none;}
#header-sp #logo-sp p { font-family: "M PLUS 1 Code", monospace;font-size: 20px;font-weight: 700;line-height: 1em;color: #203275;margin-top:10px;}
#header-sp #logo-sp p span { font-family: "Cormorant Garamond", serif;font-size: 16px;display: block;font-weight: bold;}
#header-sp img.img-logo { height: 20px;display:block;}
/*============
ナビ
#navArea
=============*/
#navArea { position: relative;z-index: 999;}
#navArea .h2-01 { font-size: 22px;margin-bottom: 0px;}
#navArea .h2-01 span { background: url(../images/common/h2-icon.png) left 18px no-repeat;background-size: 22px auto;padding-left: 35px;}
#navArea .inner { position: relative;z-index: 999;}
#navArea .inner .area-01 { text-align: center;padding-top: 20px;}
#navArea .inner .area-01 h2 { font-size: 18px;font-weight: bold;padding-bottom: 10px;margin: 0 0px 0px;}
#navArea .inner .area-01 .p-tel { font-size:30px;font-weight: 600;letter-spacing: 2px;line-height: 1em;margin: 0 0 10px;vertical-align: middle;}
#navArea .inner .area-01 .p-tel a { color: #333333;display: inline-block;text-decoration: none;}
#navArea .inner .area-01 .p-01 { font-size: 15px;letter-spacing: normal;margin-bottom: 20px;}
#navArea .inner .area-01 .p-01 img { vertical-align: middle;margin-right: 5px;position: relative;top: -2px;}
#navArea .inner .area-01 .btn { font-size: 17px;font-weight: bold;text-align: center;}
#navArea .inner .area-01 .btn a { background: #203275 url(../images/common/ico-mail.png) left 55px top 52% no-repeat;color: #fff;padding: 20px 60px 20px 100px;display: inline-block;text-decoration: none;border-radius: 50px;position: relative;}
#navArea .inner .area-01 .btn a img { position: absolute;left: 25px;top: 17px;}

nav { display: block;position: fixed;top: 80px;/*上からの距離*/ right: -100%;/*左から出すか右から出すか*/ bottom: 0;width: 100%;background: #fff;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;transition: all .5s;z-index: 20;opacity: 0;}
.open nav { right: 0;/*左から出すか右から出すか*/ opacity: 1;top: 80px;}
nav .inner ul { list-style: none;margin: 0 0 15px;padding: 0;}
nav .inner ul li { position: relative;font-family: "Zen Maru Gothic", serif;}
nav .inner ul li a { display: block;color: #333333;font-size: 16px;font-weight: 600;line-height: 3.8;padding: 0 0 0 1.5em;letter-spacing: 2px;text-decoration: none;transition-duration: 0.2s;position: relative;border-bottom: 1px solid #efefef;}
/*============
メニュー（3本線）
.toggle_btn
=============*/
.toggle_btn { display: block;position: fixed;top: 10px;right: 10px;width: 60px;height: 60px;transition: all .5s;cursor: pointer;z-index: 3;background: #203275;}
.toggle_btn span { display: block;position: absolute;left: 15px;width: 30px;height: 3px;background: #fff;border-radius: 15px;transition: all .5s;}
.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 { }
.open .toggle_btn span:nth-child(1) { -webkit-transform: translateY(10px) rotate(-45deg);transform: translateY(10px) rotate(-45deg);}
.open .toggle_btn span:nth-child(2) { opacity: 0;}
.open .toggle_btn span:nth-child(3) { -webkit-transform: translateY(-10px) rotate(45deg);transform: translateY(-10px) rotate(45deg);}
/*============
背景（マスク）
#mask
=============*/
#mask { display: none;transition: all .5s;}
.open #mask { display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #fff;opacity: .7;z-index: 2;cursor: pointer;}
}