@charset "utf-8";
/* CSS Document */


/* ----------------------------------------------------------------------------------------------------

	リセット

---------------------------------------------------------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,p,blockquote,th,td{
	margin:0;padding:0;
}


table{
	border-collapse:collapse;border-spacing:0; font-size:100%;
}
img{ border:0;}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;font-weight:normal;
}
ul li,ol li { list-style:none; } 
h1,h2,h3,h4,h5,h6{
	font-size:100%;font-weight:normal;
}
input,textarea,select{ font-family:meiryo;font-size:inherit;font-weight:inherit; }
input,textarea,select{ *font-size:100%; }
a img{border:none;}





/* ----------------------------------------------------------------------------------------------------

	全ページ共有セレクタ

---------------------------------------------------------------------------------------------------- */

html {
	overflow: auto;
}


body{
	text-align: left;
  font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
  font-size: 100.01%;
    background-color: #fff;
	line-height: 1.4;
	overflow: hidden;
	margin:0; padding:0;
		-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
}



 /* ヘッダー固定 タブレット・スマホ対応 */
header {
    position: fixed;
    width: 100%;
    height: 58px;
    background-color: #fff;
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    z-index: 1000;
  	padding: 5px;
 		border-bottom: 1px solid silver;
}

/*750以下　タブレット・スマホ対応*/
@media only screen and (max-width: 750px) {
	#container {
		clear: both;
		padding-top: 54px;
  }
}



 /* ヘッダー固定 　pc用　750以上*/
@media print, screen and (min-width: 750px) {
header {
    position: fixed;
    max-width: 870px;
    height: 97px;
    background-color: #fff;
    top: 0px;                   /* 位置(上0px) */
    left: auto;                  /* 位置(右0px) */
    z-index: 1000;
  	padding: 0px;
 		border-bottom: 0px solid silver;
	}
}

/*750以上　pc用*/
@media print, screen and (min-width: 750px) {
	#container {
		clear: both;
		padding-top: 140px;
  }
}
/*ヘッダーの左右背景画像*/
#gnav-w {
	overflow: hidden;
	position: relative;
	background-image: url(../img/back-w.png);
	padding: 0 500%;
  margin: 0 -500%;
}



#wrap{
	max-width: 870px;
	margin: 0px auto; 
}


.clear {
	clear: both;
	margin-top: 10px;
}


/* グランドメニュー PC */
#menu{
  width: 100%;
  max-width: 870px;
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 16.6%;
  margin: 0;
  padding: 0;
}
#menu li a{
  display: block;
  padding: 14px 0 14px;
  background-image: url("img/back.png");
  color: #666666; /*文字色*/
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{
  background-image: url("img/back2.png");
}

/*メニューの左右背景画像*/
#gnav1 {
	overflow: hidden;
	position: relative;
	background-image: url(img/back.png);
	padding: 0 500%;
  margin: 0 -500%;
}
.gnav2 {
	overflow: hidden;
	position: relative;
	background-image: url(img/btn_toppage2.png);
	padding: 0 100%;
  margin: 0 -100%;
}


/* 区切り線 */
/* 最初の<li>には両側のボーダー、次に来る<li>には右側のボーダー */
#menu li {
  padding: 0 1px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid silver; /* 区切り線 */
  border-right: 1px solid silver; /* 区切り線 */
}

#menu li+ li { 
  border-left: 0; 
  border-right: 1px solid silver; 
 } 



#menu-s ul li { 
  border-left: 1px solid #333; 
  border-right: 1px solid #333; 
 } 
  
#menu-s ul li+ li { 
  border-left: 0; 
  border-right: 1px solid #333; 
 } 



#toggle{ 
 display: none;
}


/* グランドメニュー スマホ */
#menu-s{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#menu-s li{
  display: inline-block;
  float: left;
  width: 20%;
  margin: 0;
  padding: 0; 
  border-left: 0.5px solid silver; /* 区切り線 */
  border-right: 0.5px solid silver; /* 区切り線 */
}
#menu-s li+ li { 
  border-left: 0; 
  border-right: 0.5px solid silver; 
 } 
#menu-s li a{
  display: block;
  padding: 3px 0 2px;
  background-image: url("../img/back.png");
  color: #666666; /*文字色*/
  text-align: center;
  text-decoration: none;
  line-height: 0;
}




/*メニューの左右背景画像*/
#gnav-s {
	overflow: hidden;
	position: relative;
	background-image: url(../img/back.png);
	padding: 0 500%;
  margin: 0 -500%;
}


/*500以下　非表示*/
@media only screen and (max-width: 500px){
.cl50{
 	  display: none;
  }
}






/*775以下　タブレット対応
@media only screen and (max-width: 775px) {
    #menu li{
    width: 32.5%;
  }
}
*/

/*750以上　タブレット対応*/
@media print,screen and (min-width: 750px) {
  #gnav-s{
    display: none;
  }
}




/*750以下　タブレット・スマホ対応*/
@media only screen and (max-width: 749px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #FFB6C1;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    color: #666666;
    text-align: center;
    text-decoration: none;
  }






/*中央ハンバーガーメニュー　スマホ対応*/
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #FFB6C1;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}


/****グランドメニュー終了****/



.top{
    margin: 0;
    text-align: center;
		vertical-align: top;
}

/*770以下　タブレット対応 フレーズ*/
@media only screen and (max-width: 760px) {
    .cl{
    display: none;
  }
}
/*848以下　タブレット対応*/
@media only screen and (max-width: 848px) {
    .cl2{
    display: none;
  }
}
/*830以下　タブレット対応 topページ　リンク用*/
@media only screen and (max-width: 830px) {
    .cl83{
    display: none;
  }
}




/*ハンバーガーメニューー*/
/*620以上非表示*/
@media print,screen and (min-width: 750px) {
  .gmn{
    display: none;
  }
 }



/*未使用*/
/*右上ハンバーガーメニュー　スマホ対応*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 0 0; /*メニュー内左右上下余白*/
		text-align:center;
    position: fixed;
    right: -200px; /*メニュー横幅 width と合わせる*/
    top: 0;
		-webkit-transition: transform 0.3s linear 0s;;
		-moz-transition:all transform 0.3s linear 0s;;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 200px; /*メニュー横幅*/
    z-index: 1001;
}

#ham-menu a {
		color: #033560;
    text-decoration: none;
    display: block;
    padding: 10px 0;
		-webkit-transition: background-color .3s linear;
		-moz-transition:all  background-color .3s linear;
    transition: background-color .3s linear;
}

#ham-menu a:hover{
    /*アニメーションをさせるプロパティの最終値は:hover等の部分に書く*/
    background-color: #ffcce9;
}
/*End 未使用*/




/*右上ハンバーガーメニュー*/
nav.ham-menu {
  width: 210px;
  height: 100%;
  padding-top: 20px; /*メニュー内左右上下余白*/
	background-color: rgba(255,255,255,0.9);;  /*メニュー背景色(白,透明度0.9)*/
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1003;
    -webkit-transform: translateX(210px);
    -moz-transform: translateX(210px);
    transform: translateX(210px);
		-webkit-transition: all .5s;
		-moz-transition:all  all .5s;
    transition: all .5s;

}
nav.open {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}
nav.ham-menu ul{ 
 height: 100%; 
 overflow: auto; 
 -webkit-overflow-scrolling: touch; 
} 
nav.ham-menu li {
  color: #fff;
  text-align: left;
	padding-left: 10px;
	line-height: 2.5;
	border-bottom:ridge;/*下線*/
	border-color:#999999;
	border-width:1px;
}

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}

/*メニュー左の矢印*/
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 19px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 18px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

/*濃バック→*/
.s1::before{
    width: 14px;
    height: 14px;
    background: #999;
}
.s1::after{
    left: 3px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*白バック→*/
.s2::before{
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
}
.s2::after{
    left: 3px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ma20{
    height: 15px;
    background: #ccc;
}


/*右上ハンバーガーメニュー ボタン*/
.hamToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 0px;
		top: 0px;
    width: 42px;
    height: 56px;
    cursor: pointer;
    z-index: 1001;
    text-align: center;
    padding: 8px;
	background-color: rgba(255,255,255,0.9);; /*メニュー背景色(白,透明度0.9)*/
	border-radius: 3px 0 0 0;
  z-index: 1003;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
		-webkit-transition:all .5s;
		-moz-transition:all .5s;
    transition:all .5s;
	display: block;
 }
 .hamToggle.active {
    -webkit-transform: translateX(-210px);
    -moz-transform: translateX(-210px);
    transform: translateX(-210px);
}
 
.hamToggle span {
    display: block;
    position: absolute;    /* .hamToggleに対して */
    width: 30px;
    border-bottom: solid 3px #000;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    left: 6px;

}
 
.hamToggle span:nth-child(1) {
    top: 10px;
}
 
.hamToggle span:nth-child(2) {
    top: 18px;
}
 
.hamToggle span:nth-child(3) {
    top: 26px;
}
 
.hamToggle span:nth-child(4) {
    border: none;
    color: #000;
    font-size: 7px;
    font-weight: bold;
    top: 35px;
}

/* 最初のspanをマイナス45度に */
.hamToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.hamToggle.active span:nth-child(2),
.hamToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}







/*　画面TOPナビ　PC*/
@media print,screen and (min-width: 750px){
.topnav {
	margin: 5px auto 2px ;
}
ul.topnav {
		display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;

		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: align-self;/*　flex-end */

		-webkit-box-pack: justify;
		-ms-flex-pack: distribute;
		justify-content: center;

		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
ul.topnav li{
    margin: 2px;
  }
}
ul.topnav li:last-child{ /*最後だけ右寄せ*/
margin-left: auto;
}

/*　画面TOPナビ　アイコン縦位置設定*/
ul.topnav li:nth-child(1){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-end;
}
ul.topnav li:nth-child(2){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-end;
}
ul.topnav li:nth-child(3){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-end;
}
ul.topnav li:nth-child(3){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-start;
}



/* EX フリーダイアル用　*/
.exnav{
	width:285px;
	display: inline-block;
  text-align: center;
}

ul.exnav {
		display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;

		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: align-self;/*　flex-end */

		-webkit-box-pack: justify;
		-ms-flex-pack: distribute;
		justify-content: space-around;

		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
ul.exnav li{
    margin: 2px;
  }

.exnav li a {
  display: block;
  padding: 0.5px;
}



/* topナビ用　*/
.tnav{
	width:399px;
	display: inline-block;
  text-align: center;
  padding: 1px 0;
}

ul.tnav {
		display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;

		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: align-self;/*　flex-end */

		-webkit-box-pack: justify;
		-ms-flex-pack: distribute;
		justify-content: space-between;

		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}


/*　画面TOPナビ　アイコン縦位置設定*/
ul.tnav li:nth-child(1){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-start;
}
ul.tnav li:nth-child(2){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-start;
}
ul.tnav li:nth-child(3){
	-webkit-box-align: end;
	-ms-flex-align: end;
    align-self: flex-start;
}
ul.tnav li:nth-child(4){
	-webkit-box-align: start;
	-ms-flex-align: start;
  align-self:  flex-start;
}
ul.tnav li:nth-child(5){
	-webkit-box-align: start;
	-ms-flex-align: start;
  align-self:  flex-start;
}
ul.tnav li:nth-child(6){
	-webkit-box-align: start;
	-ms-flex-align: start;
  align-self:  flex-start;
}
ul.tnav li:nth-child(7){
	-webkit-box-align: start;
	-ms-flex-align: start;
  align-self:  flex-start;
}
ul.tnav li:nth-child(8){
	-webkit-box-align: start;
	-ms-flex-align: start;
  align-self:  flex-end;
}

.mc {
  font-family: "Sawarabi Mincho";
	font-size: 8px;
}

/*750以下　非表示*/
@media only screen and (max-width: 751px){
.topnav{
    display: none;
  }
}


/*　画面TOPナビ　スマホ*/
/*750以上　非表示*/
@media print,screen and (min-width: 750px){
.topnav-s{
 	  display: none;
    z-index: 2001;
  }
}

@media only screen and (max-width: 750px){
.topnav-s{
  	margin: 3px 3px auto;
  	text-align: center;
}

ul.topnav-s{
	 display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
}
ul.topnav-s li{
    margin: 0px 10px 10px;
  }

div.lefts{
	text-align: left;
  }


/*4業態グレーメニュー　不使用
table.men-s {
	margin: 0px auto;
  background-color: #eee;
	width:100%;
}
.men-s tr td{
	border-bottom:		0px solid silver;
	padding:		0.8em 0.8em;
	line-height:		0.8em;
  vertical-align:  top;
}
*/