@media print, screen and (max-width: 768px) {
/* General Demo Style */


.dl-menuwrapper a {
color: #ccc;
text-decoration: none;
}
.dl-menuwrapper a:hover {
color: #fff;
}
/* Common styles of menus */

.dl-menuwrapper {
background: #ff8533;
background-image: url(/wp/wp-content/themes/deguchi/img/logo.png);
background-repeat: no-repeat;
background-position: 5px;
width: 100%;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
}
.dl-menuwrapper:first-child {
margin-right: 100px;
}
.dl-menuwrapper button {
position: relative;
width: 170px;
margin: 5px;
height: 45px;
cursor: pointer;
font-size: 20px;
text-align: center;
color: #fff;
padding: 10px;
border: 2px solid #fff;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul {
background: #aaa;
}
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 30px;
height: 5px;
background: #fff;
top: 8px;
left: 10px;
box-shadow: 0 10px 0 #fff,  0 20px 0 #fff;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
text-align: left;
}
.dl-menuwrapper li {
position: relative;
}
.dl-menuwrapper li a {
display: block;
position: relative;
padding: 15px 20px;
font-size: 16px;
line-height: 14px;
font-weight: 300;
color: #fff;
outline: none;
}
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
.dl-menuwrapper li.dl-back > a {
padding-left: 30px;
background: rgba(0,0,0,0.1);
}
.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after {
position: absolute;
top: 0;
line-height: 50px;
font-family: 'icomoon';
speak: none;
-webkit-font-smoothing: antialiased;
content: "\e000";
}
.dl-menuwrapper li.dl-back:after {
left: 10px;
color: rgba(212,204,198,0.3);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.dl-menuwrapper li > a:after {
right: 10px;
color: rgba(0,0,0,0.15);
}
.dl-menuwrapper .dl-menu {
margin: 0px 0 0 0;
position: absolute;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.dl-menuwrapper .dl-menu.dl-menu-toggle {
transition: all 0.3s ease;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
display: none;
}
/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a {
display: none;
}
.dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
display: block;
}
/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
position: absolute;
width: 100%;
top: 50px;
left: 0;
margin: 0;
}
/* Animation classes for moving out and in */


.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
animation: MenuAnimOut2 0.3s ease-in-out;
}
 @-webkit-keyframes MenuAnimOut2 {
 0% {
}
 100% {
 -webkit-transform: translateX(-100%);
 opacity: 0;
}
}
 @keyframes MenuAnimOut2 {
 0% {
}
 100% {
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 opacity: 0;
}
}
.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
animation: MenuAnimIn2 0.3s ease-in-out;
}
 @-webkit-keyframes MenuAnimIn2 {
 0% {
 -webkit-transform: translateX(-100%);
 opacity: 0;
}
 100% {
 -webkit-transform: translateX(0px);
 opacity: 1;
}
}
 @keyframes MenuAnimIn2 {
 0% {
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 opacity: 0;
}
 100% {
 -webkit-transform: translateX(0px);
 transform: translateX(0px);
 opacity: 1;
}
}
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
animation: SubMenuAnimIn2 0.3s ease-in-out;
}
 @-webkit-keyframes SubMenuAnimIn2 {
 0% {
 -webkit-transform: translateX(100%);
 opacity: 0;
}
 100% {
 -webkit-transform: translateX(0px);
 opacity: 1;
}
}
 @keyframes SubMenuAnimIn2 {
 0% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
 opacity: 0;
}
 100% {
 -webkit-transform: translateX(0px);
 transform: translateX(0px);
 opacity: 1;
}
}
.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
animation: SubMenuAnimOut2 0.3s ease-in-out;
}
 @-webkit-keyframes SubMenuAnimOut2 {
 0% {
 -webkit-transform: translateX(0%);
 opacity: 1;
}
 100% {
 -webkit-transform: translateX(100%);
 opacity: 0;
}
}
 @keyframes SubMenuAnimOut2 {
 0% {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);
 opacity: 1;
}
 100% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
 opacity: 0;
}
}
/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
position: relative;
opacity: 1;
-webkit-transform: none;
transform: none;
}
.no-js .dl-menuwrapper li .dl-submenu {
display: block;
}
.no-js .dl-menuwrapper li.dl-back {
display: none;
}
.no-js .dl-menuwrapper li > a:not(:only-child) {
background: rgba(0,0,0,0.1);
}
.no-js .dl-menuwrapper li > a:not(:only-child):after {
content: '';
}
/* Colors for demos */


/* Demo 2 */
.dl-menuwrapper button {
background: #e86814;
}
.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul {
background: #D35400;
}
.flexnav {
display: none;
}
}

/* ここまでスマートフォン用 */
/* ここから共通項目 */

@media all and (min-width: 769px) {
.flexnav {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
-webkit-transform-style: preserve-3d;
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
.flexnav.opacity {
opacity: 0;
}
.flexnav.flexnav-show {
max-height: 2000px;
opacity: 1;
-webkit-transition: .10s ease-in-out;
-moz-transition: .10s ease-in-out;
-ms-transition: .10s ease-in-out;
transition: .10s ease-in-out;
}
.flexnav.one-page {
position: fixed;
top: 50px;
right: 5%;
max-width: 200px;
}
.flexnav li {
font-size: 100%;
position: relative;
overflow: hidden;
background: #ef6d17;
}
.flexnav li a {
position: relative;
display: block;
padding: 10px 13px 10px 13px;
z-index: 2;
overflow: hidden;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background: none;
/*font-weight: bold;*/
}
.flexnav li:hover > a {
background: none;
color: none;
text-decoration: underline;
}
.flexnav li ul {
width: 200px;
}
.flexnav li ul li {
font-size: 100%;
position: relative;
overflow: hidden;
}
.flexnav li ul.flexnav-show li {
overflow: visible;
}
.flexnav li ul li a {
display: block;
background: none;
}
.flexnav ul li ul li a {
background: none;
}
.flexnav ul li ul li ul li a {
background: none;
}
.flexnav .touch-button {
position: absolute;
z-index: 999;
top: 0;
right: 0;
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
}
.flexnav .touch-button:hover {
cursor: pointer;
}
.flexnav .touch-button .navicon {
position: relative;
top: 0.9em;
font-size: 12px;
color: #ffffff;
}
.dl-menuwrapper {
display: none;
}
body.one-page {
padding-top: 70px;
}
.flexnav {
overflow: visible;
}
.flexnav.opacity {
opacity: 1;
}
.flexnav.one-page {
top: 0;
right: auto;
width: 100%;
}
.flexnav li {
position: relative;
list-style: none;
float: left;
display: block;
/*margin-top: -1px;*/
overflow: visible;
}
.flexnav li a {
border-left: 1px solid #FF9468;
border-bottom: none;
}
.flexnav li:first-child a {
border-left: none;
}
.flexnav li:last-child ul {
left: -100%;
width: 200%
}
.flexnav li > ul {
position: absolute;
top: auto;
width: 300px;
left: 0;
}
.flexnav li > ul li {
width: 100%;
}
.flexnav li ul li > ul {
margin-left: 100%;
top: 0;
}
.flexnav li ul li a {
border-bottom: 1px solid #FF9468;
line-height: 1.2em;
}
.flexnav li ul.open {
display: block;
opacity: 1;
visibility: visible;
z-index: 1;
}
.flexnav li ul.open li {
overflow: visible;
max-height: 45px;
}
.flexnav li ul.open ul.open {
margin-left: 100%;
top: 0;
}
/*ここまでPC専用*/


.oldie body.one-page {
padding-top: 70px;
}
.oldie .flexnav {
overflow: visible;
}
.oldie .flexnav.one-page {
top: 0;
right: auto;
max-width: 1080px;
}
.oldie .flexnav li {
position: relative;
list-style: none;
float: left;
display: block;
background-color: none;
width: 20%;
/*min-height: 45px;*/
overflow: visible;
}
.oldie .flexnav li:hover > ul {
display: block;
width: 100%;
overflow: visible;
}
.oldie .flexnav li:hover > ul li {
width: 100%;
float: none;
}
.oldie .flexnav li a {
border-left: 1px solid #acaca1;
border-bottom: none;
overflow: visible;
}
.oldie .flexnav li > ul {
background: #acaca1;
position: absolute;
top: auto;
left: 0;
display: none;
z-index: 1;
overflow: visible;
}
.oldie .flexnav li ul li ul {
top: 0;
}
.oldie .flexnav li ul li a {
border-bottom: none;
}
.oldie .flexnav li ul.open {
display: block;
width: 100%;
overflow: visible;
}
.oldie .flexnav li ul.open li {
width: 100%;
}
.oldie .flexnav li ul.open ul.open {
margin-left: 100%;
top: 0;
display: block;
width: 100%;
overflow: visible;
}
.oldie .flexnav ul li:hover ul {
margin-left: 100%;
top: 0;
}
.oldie .menu-button {
display: none;
}
.oldie.ie7 .flexnav li {
width: 19.9%;
}
#topReform02 #reform .bnr_re_cont2 {
float: left;
text-align: left;
margin-right: 0px;
margin-bottom: 15px;
}
}