@charset "UTF-8";
/*-------------------------------------------
新ヘッダー用
-------------------------------------------*/

header {
	width: 100%;
	height: 130px;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}

/*header.fixed.hidden {
	transform: translate(0,-100%);
}*/

/* Fixed */
#header.fixed {
    height: 110px;
}

#header.fixed #headerInner .headerLogo {
	width: 100px;
	margin: 0 0 0 30px;
}

#header.fixed:before {
    height: 3px;
}

#header.fixed:after {
	background: rgba(0,0,0,.1);
}

/*#header.fixed #headerInner .headerMenu ul li a:after {
	bottom: -21px;
}*/


header * { box-sizing: border-box; }
header a* { text-decoration: none; }
header a:focus {
	outline: none;
}

header:before {
	content: "";
	display: block;
	width: 100%;
	height: 5px;
	background: #ffd200;
	position: absolute;
	top:0;
	left: 0;
	z-index:1;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}

header:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(0,0,0,.2);
	position: absolute;
	left: 0;
	bottom: 0;
}

header .pc_none {
	display: none;
}

header #headerInner {
	width: 100%;
  height: 100%;
}

header #headerInner > div {
	width: 100%;
  height: 100%;
	position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header #headerInner nav{
  display: flex;
  width: calc(100% - 150px - 30px);
  height: 100%;
}

header #headerInner .headerLogo {
	display: block;
  width: 150px;
  height: auto;
  margin: 0 0 0 30px;
	z-index: 100;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}

header #headerInner .headerLogo a {
	display: block;
}

header #headerInner .headerMenu {
	display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: flex-end;
	vertical-align: top;
	width: 100%;
  position: relative;
  padding: 20px 0;
}

header #headerInner .headerMenu ul {
	display:flex;
	justify-content:center;
  margin-bottom: 0;
}

header #headerInner .headerMenu ul li {
	vertical-align: middle;
	width: auto;
	height: 100%;
	padding:0 25px;
  margin-bottom: 0;
}

header #headerInner .headerMenu ul li a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-weight: bold;
	line-height:25px;
	color: #202020;
	text-decoration: none;
	position: relative;
	transition: .3s ease;
	-webkit-transition: .3s ease;
}

header #headerInner .headerMenu ul li a:hover {
	color: #ec2214;
}

header #headerInner .headerMenu ul li a:after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background: #ec2214;
	position: absolute;
	left: 0;
	bottom: -13px;
	transition: .3s ease;
	-webkit-transition: .3s ease;
}

header #headerInner .headerMenu ul li a:hover:after {
	width: 100%;
}

header #headerInner .headerSearch {
	display: inline-block;
	vertical-align: top;
	width: 18%;
	height: 100%;
}

header #headerInner .headerSearch #searchArea {
	height: 100%;
}

header #headerInner .shopIcon{
  width: 145px;
}
header #headerInner .shopIcon p{
  height: 100%;
}
header #headerInner .shopIcon a{
  background: #e50012;
  color: #fff;
  display: flex;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: bold;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: .3s ease;
}
header #headerInner .shopIcon a::before{
  content: "";
  width: 54px;
  height: 54px;
  background: url(../images/common/icon-shop.svg) center center / 100% auto no-repeat;
  transition: .3s ease;
}
header #headerInner .shopIcon a:hover{
  text-decoration: none;
  background: #ffd200;
  color: #000;
}

header #headerInner .shopIcon a:hover::before{
  background: url(../images/common/icon-shop-hover.svg?0712) center center / 100% auto no-repeat;
}

header fieldset {
	border: none;
    margin: 0;
    padding: 0;
	list-style: none;
    text-decoration: none;
	-webkit-text-size-adjust: none;
}

header form {
	width: 100%;
    height: 34px;
    color: #555;
    background: #f2f2f2;
    border-radius: 17px;
    overflow: hidden;
    position: relative;
    top: 18px;
    border: 1px solid #f2f2f2;
}

header input:-webkit-autofill, 
header textarea:-webkit-autofill, 
header select:-webkit-autofill {
	background: #f2f2f2 !important;
	color: #555 !important;
}

header form #serachArea_Btn {
	position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: none;
    background: none;
    font-size: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: initial;
	background: url(../images/common/dennysCommonImg.png) no-repeat;
    background-size: 260px 450px;
    background-position: -224px 0;
	transition: .3s ease;
	-webkit-transition: .3s ease;
}

header form #serachArea_input {
	width: 100%;
	font-size: 14px;
    line-height: 32px;
	color: #555;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    vertical-align: middle;
	padding-left: 32px;
}

header input[type="submit"]:focus,
header input[type="text"]:focus {
  outline: 0;
  border-color: none;
}

/*お問い合わせ追加*/
header #headerInner .subNav {
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
  padding-right: 25px;
}

header #headerInner .subNav p {
	display: inline-block;
	border-left: 1px solid #222;
	padding-left:25px;
	margin-left:25px;
  margin-bottom: 20px;
}

header #headerInner .subNav p:first-child {
	border-left: none;
	padding-left:0;
	margin-left:0;
}

header #headerInner .subNav p a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 12px;
	font-weight: bold;
	color: #555;
	text-decoration: none;
	position: relative;
	transition: .3s ease;
	-webkit-transition: .3s ease;
}

header #headerInner .subNav p a span.iconlang,
header #headerInner .subNav p a span.iconstore {
	padding: 1px 0 1px 20px;
}

header #headerInner .subNav p a span.iconlang {
	background: url(../images/common/icon-language.svg) left 50% / 14px 14px no-repeat;
}

header #headerInner .subNav p a span.iconstore {
	background: url(../images/common/icon-store.svg) left 50% / 14px 14px no-repeat;
}

header #headerInner .subNav p a:hover {
	color: #ec2214;
}

header #headerInner .subNav p a:after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background: #ec2214;
	position: absolute;
	left: 0;
	bottom: -5px;
	transition: .3s ease;
	-webkit-transition: .3s ease;
}

header #headerInner .subNav p a:hover:after {
	width: 100%;
}


/*-------------------------------------------
hover
-------------------------------------------*/
@media screen and (min-width:821px) {

  header #headerInner .subNav p a:hover span.iconlang {
    background: url(../images/common/icon-language-red.svg) left 50% / 14px 14px no-repeat;
  }

  header #headerInner .subNav p a:hover span.iconstore {
    background: url(../images/common/icon-store-red.svg) left 50% / 14px 14px no-repeat;
  }

}

/*-------------------------------------------
以下、小PC用
-------------------------------------------*/

/*@media screen and (max-width:768px) {*/
@media screen and (max-width:1280px) {
  header #headerInner .headerMenu ul{
    padding-right: 15px;
  }
  header #headerInner .headerMenu ul li {
    padding: 0 10px;
  }
  header #headerInner .headerMenu ul li a{
    font-size: 12px;
  }
}

/*-------------------------------------------
以下、TAB用
-------------------------------------------*/

/*@media screen and (max-width:768px) {*/
@media screen and (max-width:1000px) {
  #header.fixed {
      height: 60px;
  }
  #header.fixed #headerInner .headerLogo,
  #header.fixed #headerInner .subNav {
    display: block;
  }

  #header.fixed #headerInner .headerLogo {
    width: 80px;
    margin: 0 auto;
  }

  #header.fixed #headerInner .headerMenu ul {
      margin: 0 auto 0;
  }

  #header.fixed:before {
      height: 5px;
  }

  #header.fixed #headerInner .headerMenu ul li a:after {
    bottom: auto;
  }


  header .sp_none { display: none !important; }
  header .pc_none { display: inline-block; }

  .backOverlay {
    display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: .75;
      background: #000;
      z-index: 998;
      cursor: pointer;
  }

  header {
    height: 60px;
  }

  header #headerInner {
    width: 100%;
  }

  header #headerInner > div{
    display: block;
  }
  
  header #headerInner nav {
    width: 100%;
  }
    
  header #headerInner .headerLogo {
    width: 80px;
    position:absolute;
    top:14px;
    left: 15px;
      margin: 0 auto;
  }

  header #headerInner .headerMenu {
    display: block;
    padding: 0;
      position: fixed;
      width: 100%;
      top: 60px;
      left: 0;
    transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }

  header #headerInner .opening {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transition: .3s ease;
    -webkit-transition: .3s ease;
  }

  header #headerInner .headerMenu ul {

    flex-wrap: wrap;
    width:100%;
    background: rgba(255,255,255,.9) ;
    box-shadow: 0 3px 12px -6px rgba(0,0,0,.5) inset;
    position: relative;
    overflow: hidden;
	
	padding-right: 0;
  }

  header #headerInner .headerMenu ul li {
    width: calc(100% / 3);
    vertical-align: top;
      margin: 0;
      text-align: center;
    position: relative;
  }

  header #headerInner .headerMenu ul li:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: #000;
    opacity: .1;
    position: absolute;
    top: 0;
    right: 0;
  }

  header #headerInner .headerMenu ul li:last-child:after {
    content: none;
  }

  header #headerInner .headerMenu ul li a {
    height: auto;
    line-height: 1.4;
    font-weight: bold;
    padding: 102px 15px 20px 15px;
    overflow: hidden;
  }

  header #headerInner .headerMenu ul li a:after {
    content: "";
      width: 72px;
      height: 72px;
      background: url(../images/common/dennysCommonImg.png) no-repeat;
      background-size: 260px 450px;
      overflow: hidden;
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      bottom: auto;
    margin: auto;
    transform: none;
      -ms-transform: none;
      -webkit-transform: none;
  }

  header #headerInner .headerMenu ul li:before {
      content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    opacity: .1;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  header #headerInner .headerMenu ul li:last-child:before {
      content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    opacity: .1;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  header #headerInner .headerMenu ul li a:hover:after {
    width: 72px;
  }

  /*header #headerInner .headerMenu ul li:nth-child(1) a:after { background-position: 0 -268px; }*/
  header #headerInner .headerMenu ul li:nth-child(2) a:after { background-position: 0 -196px; }
  header #headerInner .headerMenu ul li:nth-child(3) a:after { background-position: -72px -268px; }
  header #headerInner .headerMenu ul li:nth-child(4) a:after { background-position: -72px -196px; }
  header #headerInner .headerMenu ul li:nth-child(5) a:after { background-position: -144px -196px; }
  header #headerInner .headerMenu ul li:nth-child(6) a:after { background-position: 0 -268px; }
  header #headerInner .headerMenu ul li:nth-child(8) a:after { background-position: -144px -268px; }

  header #headerInner .headerMenu #closeBtnOverlay {
    display: block;
    width: 180px;
      height: 42px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 42px;
      border-radius: 21px;
      background: rgba(255,255,255,.9);
      margin: 42px auto 0;
  }

  header .headerSP {
    width: 100%;
      height: inherit;
      position: relative;
    background: #fff;
    font-size: 0;
      letter-spacing: 0;
  }

  header .headerSP .searchBtn {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }

  header .headerSP .searchBtn p {
    margin: 0 auto;
  }

  header .headerSP .searchBtn p a {
    display: block;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: .1em;
    background: #f2f2f2;
    padding: 0 20px 0 36px;
    border-radius: 16px;
    text-decoration: none;
    position: relative;
  }

  header .headerSP .searchBtn p a:before {
    content: "";
    display: block;
    width: 32px;
      height: 32px;
      background: url(../images/common/dennysCommonImg.png) no-repeat;
      background-size: 260px 450px;
      background-position: -224px 0;
    position: absolute;
    top: 0;
    left: 4px;
  }

  header .headerSP #toggleBtn {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    position: relative;
    background:#ffd200;
    cursor: pointer;
    float:right;
  }

  header .headerSP #toggleBtn span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1.5px;
    background: #202020;
    position: absolute;
    left:0;
    right: 0;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    margin:auto;
  }

  header .headerSP #toggleBtn span:nth-child(1) { top: 22px; }
  header .headerSP #toggleBtn span:nth-child(2) { top: 31px; }
  header .headerSP #toggleBtn span:nth-child(3) { top: 40px; }

  header .headerSP .closing span:nth-child(1) {
    top: 30px !important;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }

  header .headerSP .closing span:nth-child(3) { 
    top: 30px !important;
    transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
  }

  header .headerSP .closing span:nth-child(2) {
    transform: scaleX(0);
    -ms-transform: scaleX(0);
    -webkit-transform: scaleX(0);
  }

  header #closeBtn {
    width: 60px;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
  }

  header .upper {
    height: 100% !important;
  }

  /*hoverの取り消し*/

  header #headerInner .headerMenu ul li a:hover {
    color: #555;
  }

  header #headerInner .headerMenu ul li a:hover:after {
    transform: none;
    -ms-transform: none;
    -webkit-transform: none;
  }

  /*お問い合わせ追加*/
  header .headerSP .searchBtn2 {
    display: block;
    width: 58px;
    height: 58px;
    position: absolute;
    top: 2px;
    bottom: 0;
    right: 60px;
    margin: auto;
    background: #e50012;
    text-align: center;
  }

  header .headerSP .searchBtn2 a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/icon_shop_sp.svg) center center / contain no-repeat;
  }

  header .headerSP .faqBtn {
    display: inline-block;
      width: 49px;
      height: 55px;
      position: absolute;
      top: 2px;
      bottom: 0;
      right: 126px;
      margin: auto;
  }

  header .headerSP .faqBtn a {
    display: block;
    width: inherit;
    height: inherit;
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden;
    background: url(../images/common/dennysCommonImg.png) no-repeat;
    background-size: 260px 450px;
    background-position: -48px -338px;
  }

  header .headerSP .menuBtn {
    display: inline-block;
      width: 48px;
      height: 55px;
      position: absolute;
      top: 2px;
      bottom: 0;
      right: 187px;
      margin: auto;
  }

  header .headerSP .menuBtn a {
    display: block;
    width: inherit;
    height: inherit;
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden;
    background: url(../images/common/dennysCommonImg.png) no-repeat;
    background-size: 260px 450px;
    background-position: 0 -338px;
  }


  header #headerInner .faqNav {
    display: inherit;
  }
  
  header #headerInner .shopIcon {
	  display: none;
	  opacity: 0;
	  visibility: hidden;
  }
	
  /*Language追加*/
	header .headerSP .languageBtn {
    display: inline-block;
      width: 44px;
      height: 55px;
      position: absolute;
      top: 2px;
      bottom: 0;
      right: 128px;
      margin: auto;
  }
  header .headerSP .languageBtn a {
    display: block;
    width: inherit;
    height: inherit;
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden;
    background: url(../images/common/dennysCommonImg.png) no-repeat;
    background-size: 260px 450px;
    background-position: -130px -338px;
  }

}


/*-------------------------------------------
以下、SP用
-------------------------------------------*/

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

  /*header #headerInner .headerMenu ul {
    display:table;
    width:100%;
  }*/

  header #headerInner .headerMenu ul li {
    width: calc(100% / 2);
    /*display:inline-block;*/
  }

  header #headerInner .headerMenu ul li a {
    font-size: 12px;
      padding: 96px 12px 16px 12px;
  }

  header #headerInner .headerMenu ul li a:after {
    top: 16px;
    left: 0;
    right: 0;
    bottom: auto;
  }


  /*header #headerInner .headerMenu ul li:first-child {
    width: 100%;
  }

  header #headerInner .headerMenu ul li:first-child:after {
    width: 100%;
    height: 1px;
    top: auto;
    bottom: 0;
  }

  header #headerInner .headerMenu ul li:first-child a {
    width: 100%;
      height: 120px;
      padding: 0;
  }

  header #headerInner .headerMenu ul li:first-child a span {
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 0;
    padding: 0 30px 0 120px;
    transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
  }

  header #headerInner .headerMenu ul li:first-child a span:after {
    content: "モーニングからランチ、ディナーはもちろん、テイクアウトや宅配まで！デニーズ自慢のメニューはこちらから。";
    display: block;
      width: 100%;
      height: auto;
      font-size: 10px;
      line-height: 1.4;
      margin-top: 5px;
  }

  header #headerInner .headerMenu ul li:first-child a:after {
    top: 24px;
    left: 30px;
    right: auto;
    bottom: auto;
  }*/

  header #headerInner .headerMenu #closeBtnOverlay {
      width: 132px;
      font-size: 12px;
  }

}


@media screen and (max-width:320px) {
  header #headerInner .headerLogo {
      left: 8px;
    }

  header .headerSP .searchBtn2 {
      right: 68px;
    }

  header .headerSP .faqBtn {
      right: 111px;
    }

  header .headerSP .menuBtn {
      right: 172px;
    }
}





/* underHeaderArea */
#header + .underHeaderArea{
	background: #ffd200;
	text-align: center;
	width: 100%;
	position: fixed;
	top: 130px;
	height: 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 998;
	
    transition: all .3s ease;
}
#header + .underHeaderArea a{
	display: flex;
	justify-content: center;
	font-weight: bold;
}
#header + .underHeaderArea a .text{
	line-height: 1.5;
	margin: 0;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
}
#header + .underHeaderArea a .text::before{
	content: "";
	display: block;
	margin-right: 0.6em;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000000;
  border-right: 0;
	transition: .3s;
}
#header + .underHeaderArea a .text .deadline{
	background: #000;
	line-height: 1;
	color: #fff;
	font-size: 0.8em;
	padding: 5px 15px;
	border-radius: 3px;
	margin-left: 1em;
	transition: .3s;
}

#header + .underHeaderArea a:hover{
	text-decoration: none;
	color: #e50012;
}
#header + .underHeaderArea a:hover .text::before{
  border-left: 5px solid #e50012;
}
#header + .underHeaderArea a:hover .text .deadline{;
	background: #e50012;
}

#header.fixed + .underHeaderArea{
	top: 110px;
}

.underHeaderArea + #container{
	padding-top: 200px;
}

#header.fixed + .underHeaderArea + #container{
	padding-top: 180px;
}

.underHeaderArea br{
	display: none;
}

/*--- アプリの時の表示 ---*/
.is-app #header + .underHeaderArea{
	top: 0;
}
.is-app .underHeaderArea + #container{
	padding-top: 70px;
}
/*アプリの時の店舗検索*/
.underHeaderArea + #app.map .map-page#app-container,
.underHeaderArea + #app.detail {
    margin-top: 70px !important;
}

@media screen and (max-width:1000px) {
	#header + .underHeaderArea{
		top: 60px;
		height: 56px;
	}
	#header + .underHeaderArea a .text{
		font-size: 14px;
	}
	
	#header.fixed + .underHeaderArea{
		top: 56px;
	}
	
	#header.fixed + .underHeaderArea + #container{
		padding-top: 56px;
	}	
	
	.underHeaderArea + #container,
	#header.fixed + .underHeaderArea + #container{
		padding-top: 116px;
	}
	
	/*--- アプリの時の表示 ---*/
	.is-app #header + .underHeaderArea{
		top: 0;
	}
	.is-app .underHeaderArea + #container{
		padding-top: 56px;
	}
	/*アプリの時の店舗検索*/
	.underHeaderArea + #app.map .map-page#app-container,
	.underHeaderArea + #app.detail {
		margin-top: 56px !important;
	}
	
		
}
@media screen and (max-width:480px) {
	
	/*.underHeaderArea br{
		display: inline;
	}*/
	#header + .underHeaderArea a .text{
		font-size: 12px;
	}
	#header + .underHeaderArea a .text .deadline{
		padding: 3px 5px;
	}

}