@charset "utf-8";
/* ============================================================
   ヘッダー／フッターのナビゲーション の統合CSS（menu-all.css）
   menu-pc.css と menu-tb.css を1本にまとめたもの。
   ・上半分 = PC用（画面幅 1180px 以上）
   ・下半分 = タブレット／スマートフォン用（画面幅 1179px 以下）
   読み込み側の media 属性で振り分けていたものを @media に置き換えただけで、
   どの画面幅でどのルールが効くかは分割時とまったく同じ。
   ============================================================ */

/* ------------------------------------------------------------
   PC（画面幅 1180px 以上）
   ------------------------------------------------------------ */
@media screen and (min-width:1180px) {

  /* CSS Document */

  #header {
  	width: 96%;
  	padding: 20px 0px 10px;
  	margin: 0 auto;
  }
  #header ul.top {
  	height: 80px;
  	padding-bottom: 10px;
  }
  #header ul.top li {
  	float: left;
  	width: calc(100%/3);
  }
  #header img.kuraka-logo {
  	width: 50%;
  	margin: 3% 0 0 0px;
  }
  #header img.diamond-logo {
  	width: 60%;
  	margin: 0 20% 0;
  }
  #header h4 {
  	font-size: 24px;
  	line-height: 26px;
  	text-align: right;
  	font-weight: bold;
  	color: #544b4d;
  }
  #header table {
  	display: block;
  	width: 100%;
  	margin: 1% 0 0 40px;
  }
  #nav-sf {
  	display: none;
  }
  #nav-pc ul {
  	width: 100%;
  	margin: 0 auto;
  	display: block;
  }
  #nav-pc ul li {
  	float: left;
  	width: calc(100%/9 - 2px);
  	text-align: center;
  	border-left: 1px solid #544b4d;
  	padding: 2px 0;
  }
  #nav-pc ul li.last {
  	border-right: 1px solid #544b4d;
  }
  #nav-pc h2 {
  	font-size: 24px;
  	line-height: 26px;
  }
  #nav_toggle-title {
  	display: none;
  }
  #nav_toggle {
  	display: none;
  }

  /*フッターメニュー*/
  #footer {
  	width:  100%;
  	background: #060606;
  	padding: 10px 0 0;
  }
  #footer a {
  	color: #fff;
  }
  #footer ul.footer-menu-ul {
  	margin: 0 auto;
  	text-align: center;
  }
  #footer ul.footer-menu-ul li {
  	width: calc(100%/7 - 6%);
    	text-align: center;
    	display: inline-block;
  }
  #footer li {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
  }
  #footer ul.footer-banner {
  	margin: 20px auto;
  	text-align: center;
  }
  #footer ul.footer-banner li {
  	width: calc(100%/2 - 30%);
    	text-align: center;
    	display: inline-block;
  }
  #footer ul.footer-sns {
  	text-align: center;
  	margin-bottom: 10px;
  }
  #footer ul.footer-sns li.insta {
  	width: 5%;
  	text-align: center;
  	display: inline-block;
  }
  .copyright {
  	text-align: center;
  	color: #fff;
  	padding: 20px;
  	font-size: 20px;
  	border-top: 1px solid #555;
  }

}


/* ------------------------------------------------------------
   タブレット・スマートフォン（画面幅 1179px 以下）
   ------------------------------------------------------------ */
@media screen and (min-width:0px) and (max-width:1179px) {

  /* CSS Document */

  /*ダイヤモンドピザスマホヘッダー固定*/
  #header {
  	position: fixed;
  	z-index: 9999;
  	background-color: #fff;
  	top: 0px;
  	width: 100%;
  	height: 14vw;
  }
  /*ハンバーガーメニュー*/
  #sandwich_menu {
  	display: block;
  	position: relative;
  	width: 25%;
  	height: 14vw;
  	top: -4vw;
  	left: 74%;
  }
  #sandwich_menu:hover {
  	cursor: pointer;
  }
  #nav_toggle-title {
  	display: block;
  	position: absolute;
  	vertical-align: text-top;
  	width: 70%;
  	height: 100%;
  	top: 10%;
  	left: 0%;
  }
  #nav_toggle-title p {
  	display: block;
  	margin-top: 20%;
  	font-weight: bold;
  	font-size: 3vw;
  }
  /*ハンバーガーメニューアイコン*/
  #nav_toggle{
  	display: block;
  	width: 30%;
  	height: 100%;
  	position: absolute;
  	top: 20%;
  	right: 0%;
  	z-index: 1000;
  }
  #nav_toggle div {
  	position: relative;
  }
  #nav_toggle span{
  	display: block;
  	height: 5px;
  	background: #333;
  	position:absolute;
  	width: 100%;
  	right: 10px;
  	-webkit-transition: 0.5s ease-in-out;
  	-moz-transition: 0.5s ease-in-out;
  	transition: 0.5s ease-in-out;
  }
  #nav_toggle span:nth-child(1){
  	top:0px;
  }
  #nav_toggle span:nth-child(2){
  	top: 3vw;
  }
  #nav_toggle span:nth-child(3){
  	top:6vw;
  }
  /*開閉ボタンopen時*/
  .open #nav_toggle span:nth-child(1) {
  	top: 12px;
  	-webkit-transform: rotate(135deg);
  	-moz-transform: rotate(135deg);
  	transform: rotate(135deg);
  }
  .open #nav_toggle span:nth-child(2) {
  	width: 0;
  	left: 50%;
  }
  .open #nav_toggle span:nth-child(3) {
  	top: 12px;
  	-webkit-transform: rotate(-135deg);
  	-moz-transform: rotate(-135deg);
  	transform: rotate(-135deg);
  }
  /*スマホトップ部分*/
  #nav-pc {
  	display: none;
  }
  #header ul.top {
  	width: 100%;
  	padding: 10px 20px;
  }
  #header ul.top li {
  	float: left;
  }
  #header ul.top li.tel-pc {
  	display: none;
  }
  #header ul.top li.kuraka-logo {
  	width: 20%;
  	margin-top: 4vw;
  }
  #header ul.top li.diamond-logo {
  	width: 60%;
  	text-align: center;
  }
  #header ul.top li.diamond-logo img {
  	width: 54%;
  	margin: 2vw auto 0;
  }

  /*スマホ用メニュー*/
  #nav-sf{
  	display: none;
  	position: absolute;
  	top: 14vw;
  	width: 100%;
  	background-color: rgba(255,255,255,1.0);
  	left: 0;
  	padding: 10px 10px 20px;
  	border-bottom: #545454 solid 1px;
  	font-size: 5vw;
  	line-height: 5vh;
  }
  #nav-sf ul {
  	display: block;
  	width: 90%;
  	text-align: left;
  	margin: 0 auto;
  }
  #nav-sf ul li {
  	padding-top: 5%;
  }
  #nav-sf h4 {
  	font-size: 5vw;
  	color: #804000;
  }

  /*フッター*/
  #footer {
  	width:  100%;
  	background: #060606;
  	padding: 10px 0 0;
  }
  #footer a {
  	color: #fff;
  }
  #footer ul.footer-menu-ul {
  	margin: 0 auto;
  	text-align: center;
  }
  #footer ul.footer-menu-ul li {
  	width: calc(100%/7 - 1%);
    	text-align: center;
    	display: inline-block;
  }
  #footer li {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
  }
  #footer ul.footer-banner {
  	margin: 20px auto;
  	text-align: center;
  }
  #footer ul.footer-banner li {
  	width: calc(100%/3 - 4%);
    	text-align: center;
    	display: inline-block;
  }
  #footer ul.footer-sns {
  	text-align: center;
  	margin-bottom: 10px;
  }
  #footer ul.footer-sns li.insta {
  	width: 10%;
  	text-align: center;
  	display: inline-block;
  }
  .copyright {
  	text-align: center;
  	color: #fff;
  	padding: 20px;
  	font-size: 20px;
  	border-top: 1px solid #555;
  }

}